Collection of CSS Skills | Thinking Technology Weekly

Time:2022-11-25

CSS is a computer language used to express file styles such as HTML or XML. I believe that everyone is familiar with it. Today, I will organize a collection of CSS tips for you, hoping to provide you with some new design ideas~

There are various ways to play with CSS, let’s take a look~

1. Tips! Exploration of CSS full-block text overflow and ellipsis features

Today’s article is very interesting. I will talk about some interesting details of the entire block of text overflowing and omitting dots.

super long text

We all know that as of today (2021/03/06), CSS provides two ways to facilitate us to omit super-long text.

For single-line text, use single-line elision:

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Collection of CSS Skills | Thinking Technology Weekly

For the super-long ellipsis of multi-line text, use the related attributes of -webkit-line-clamp, and the compatibility is already very good:

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Collection of CSS Skills | Thinking Technology Weekly

CodePen Demo — inline-block realizes the overflow management of the whole block

https://codepen.io/Chokcoco/p…

Problem 1: Overlong text is omitted in its entirety

Question 2: iOS does not support the omission of the entire super long overflow

2. The original CSS background can also play like this

As a front-end developer, the background is a frequent visitor in development. As large as the theme background of the entire website, as small as the background of a button. The background property of CSS is basically encountered every day in development. In most cases, we only use solid color backgrounds or image backgrounds. If you want to make the content you develop look more lively and interesting, through this article, you can also develop cool backgrounds with pure CSS.

before the start

Before starting, please answer the following questions first. If you can answer all of them correctly, it means that you have a good grasp of the background property!

1. What is the default shape of the radial gradient?

A: Prototype B: Oval

  1. When there are multiple values ​​of the background attribute, which value’s layer is on top?

A: first value B: last value

  1. background: green, linear-gradient(red, pink); What is the effect?

A: Green background B: Red pink gradient background C: No background

  1. When the background property has multiple values, how to specify the size of each background layer?

basic background

First of all, let’s review the basic backgrounds. The simplest one is the solid color background:

background: pink;

Collection of CSS Skills | Thinking Technology Weekly

Linear gradient, of course you can also customize the direction:

.linear {
    background: linear-gradient(red, pink);
}
.linear1 {
    background: linear-gradient(145deg, red 20%, pink);
}

Collection of CSS Skills | Thinking Technology Weekly

radial gradient

background: radial-gradient(red, pink);

Collection of CSS Skills | Thinking Technology Weekly

corner gradient

background: conic-gradient(red, pink);background: conic-gradient(red, pink);background: radial-gradient(red, pink);

Collection of CSS Skills | Thinking Technology Weekly

base background extension

There is nothing to say about a solid color background, only to change the color.

1. Linear background

2. Radial background

3. Angular Gradient

4. Combined background

3. Using these CSS properties, the layout efficiency has been raised to another level!

There are a lot of CSS properties that some people don’t understand, or they understand them, but forget to use them when needed. In fact, sometimes we use JavaScript to implement certain interactions, which can be done with one property of CSS, which can greatly save our coding time.

As front-end developers, we often encounter things like this. So I asked myself, why not make an article listing all those lesser used CSS properties that are both useful and interesting?

In this article, I will introduce some different CSS properties, hoping to bring you something fresh, so without further ado, let’s get started.

Using Place-Items in CSS Grid

Collection of CSS Skills | Thinking Technology Weekly

We can center elements horizontally and vertically with just two lines of CSS code.

HTML

<div class="hero">
    <div class="hero-wrapper">
        <h2>CSS is awesome</h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>

CSS

.hero {
    display: grid;
    place-items: center;
}

place-items is a shorthand property that combines justify-items and align-items. The above code is equivalent to the following code:

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}

You might be wondering, what’s going on here? Let’s explain. When using place-items, it will be applied to every cell in the grid, which means the content of the cell will be centered. It would be very clear if we add a few more cells:

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}

Collection of CSS Skills | Thinking Technology Weekly

The cooperation between flexbox and margin

Collection of CSS Skills | Thinking Technology Weekly

Used in conjunction with flexbox, margin: auto makes it very easy to center flex items horizontally and vertically.

html

<div class="parent">
    <div class="child"></div>
</div>

css

.parent {
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}
.child {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}

looks kind of cool

The marker property of the list

Collection of CSS Skills | Thinking Technology Weekly

text-align property

Collection of CSS Skills | Thinking Technology Weekly

display: inline-Flex attribute

Collection of CSS Skills | Thinking Technology Weekly

column-rule attribute

Collection of CSS Skills | Thinking Technology Weekly

background-repeat: round

Collection of CSS Skills | Thinking Technology Weekly

object-fit property

Collection of CSS Skills | Thinking Technology Weekly

4. Resources: 15 Excellent Responsive CSS Frameworks

Responsive web design aims to provide an optimal browsing experience on a variety of devices, from desktop monitors to mobile phones. This article rounds up some great HTML and CSS frameworks for responsive web design. These frameworks are open source and free.

Comparing responsive web frameworks is not so easy. Some frameworks are good for designing certain features for faster, leaner websites, while others may offer a ton of features, plugins, and add-ons, but can be bulky and difficult to learn.

1. Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. Bootstrap makes front-end development faster and easier. They provide a lot of documentation, samples, and demos that can help you get started with responsive web development quickly. Some major changes in Bootstrap 5, such as free use of jQuery and the addition of RTL support, coupled with ready-made components and utility classes, make Bootstrap one of the best choices for web developers.

You can also find many free premium bootstrap templates and UI kits, which make your development process easier.

Official website:https://getbootstrap.com/

2. Tailwind CSS

Tailwind offers a modern, utility-based approach to building responsive sites. It has tons of utility classes for building modern websites without writing CSS. It differs from other frameworks in that development settings are required to reduce the size of the final CSS, because if you use the default values, you will end up with a very large CSS file. Tailwind can quickly add styles to HTML elements and provides a large number of design styles out of the box. There are tons of Tailwind CSS resources here:

https://superdevresources.com…

Official website:https://tailwindcss.com/

3. Tachyons

Tachyons is also a utility-based CSS library that provides many complex functions out-of-the-box without writing a lot of CSS yourself. The advantage of this is that Tachyons are lightweight out of the box and require no additional setup. There are still ways to reduce the size if desired. If you need an easy-to-use utility library, then this should be a good choice.

Official website:https://tachyons.io/

4. Foundation

Foundation is an adaptive front-end framework made by product design company ZURB. This framework is the result of building web products and services they’ve been building since 1998. Foundation is a state-of-the-art responsive front-end framework and it offers a lot of customization features.

Official website:http://foundation.zurb.com/

5. Material Design for Bootstrap (MDB)

MDB is built on top of Bootstrap and provides a Material Design look and feel out of the box. It has an excellent CSS library and is compatible with most popular JavaScript frameworks such as jQuery, Angular, React, and .Vue.js. Its core library is completely free to use.

Official website:https://mdbootstrap.com/

  1. UIkit
  2. Pure CSS
  3. Material Design Lite Framework (MDL)
  4. Materialize
  5. Skeleton
  6. Bulma
  7. Semantic UI
  8. Milligram
  9. Spectre.css
  10. Base CSS Framework

5. Use mask to realize mask filtering of video barrage characters

Friends who often watch some LOL game live broadcasts must know that on some bullet screen websites (Bilibili, Huya), when characters and bullet screens appear together, the bullet screen will “smartly” hide under the characters, Looks very smart.

A simple screenshot example:

Collection of CSS Skills | Thinking Technology Weekly

In fact, this is achieved by using the MASK property in CSS.

Introduction to simple usage of mask

Mask has been mentioned in many articles before, and the more detailed one is — the wonderful CSS MASK. This article does not explain the basic concept of mask too much. When you read down, if you are confused about the usage of some masks, you can read it again. go and see.

Here is just a brief introduction to the basic usage of mask:

The most basic way to use a mask is to use an image, something like this:

{
    /* Image values */
    mask: url(mask.png); /* use bitmap as mask */
    mask: url(masks.svg#star); /* Use the shape in the SVG graphic as a mask */
}

Of course, the way to use pictures will be discussed later. The method of using pictures is actually quite cumbersome, because we have to prepare corresponding picture materials first. In addition to pictures, mask can also accept a parameter similar to background, that is, gradient.

Similar to the following usage:

{
    mask: linear-gradient(#000, transparent) /* use gradient to make mask */
}

How to use it? A very simple example, above we created a gradient color from black to transparent, we apply it in practice, the code looks like this:

The following picture is superimposed with a gradient from transparent to black,

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

Collection of CSS Skills | Thinking Technology Weekly

After applying the mask, it will look like this:

Collection of CSS Skills | Thinking Technology Weekly

In this DEMO, you can simply understand the basic usage of mask.

Here is the most important conclusion of using the mask: the element with the mask attribute added, its content will overlap with the gradient transparent part represented by the mask, and the overlapping part will become transparent.

It is worth noting that the gradient above uses linear-gradient(90deg, transparent, #fff), and the #fff solid color part here can actually be replaced with any color without affecting the effect.

CodePen Demo — basic use of MASK

https://codepen.io/Chokcoco/p…

Use mask to achieve character mask filtering

After understanding the usage of the mask, next, we use the mask to simply realize the example of automatically hiding and filtering the bullet chat when it touches a person in the video bullet chat.

First, I simply simulated a Summoner’s Canyon, and some basic barrage:

For convenience, a static image is used here, which shows the map of Summoner’s Canyon, not a real video, but the barrage is one by one<p> elements, consistent with the actual situation. The pseudo code is roughly like this:

<! -- Map -->
<div class="g-map"></div>
<! -- Container that wraps all barrage -->
<div class="g-barrage-container">
    <! -- All bullet screens -->
    <div class="g-barrage">6666</div>
    ...
    <div class="g-barrage">6666</div>
</div>

In order to simulate the actual situation, we use a div to add an actual character. If we do not do any processing, it is actually the feeling when we watch the video and open the barrage, and the character is blocked by the video:

Collection of CSS Skills | Thinking Technology Weekly

Note that here I added a character Yasuo, and used animation to simulate a simple movement. During the movement, the character is blocked by the barrage.

Next, you can ask for the mask.

We use the mask to make a radial-gradient so that the vicinity of the character is transparent, and according to the animation of the character’s movement, add the same animation to the mask-position of the mask. Finally, you can get this effect:

.g-barrage-container {
    position: absolute;
    mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%);
    animation: mask 10s infinite alternate;
}
@keyframes mask {
    100% {
        mask-position: 85vw 0;
    }
}

Collection of CSS Skills | Thinking Technology Weekly

In fact, it is to add a mask attribute to the container where the barrage is placed, mark the position of the character, and change the mask continuously according to the movement of the character. Let’s replace the mask with background, and the principle can be understood at a glance.

  • Replace the mask with the background diagram:

Collection of CSS Skills | Thinking Technology Weekly

The transparent part of the background, that is, the transparent part of the mask, is actually the part where the bullet chatting will be hidden and masked, while the other white parts, the bullet chatting will not be hidden, which perfectly utilizes the characteristics of the mask.

In fact, this technology has nothing to do with the video itself. We only need to calculate the position where the barrage needs to be blocked according to the video calculation, and get the corresponding mask parameters. If the background and moving characters are removed, only the barrage and mask are kept, like this:

Collection of CSS Skills | Thinking Technology Weekly

It needs to be clear that using a mask does not cover the part of the bullet chat, but uses the mask to specify which parts are normally displayed and which parts are transparently hidden under the bullet chat container.

Finally, you can click here for the complete demo:

CodePen Demo — mask realizes barrage character mask filtering click to preview

https://codepen.io/Chokcoco/p…

Application in the actual production environment

Of course, above we simply restored the effect of using mask to achieve barrage mask filtering. But the actual situation is much more complicated than the above scenario, because the position of the characters and heroes is uncertain and changes every moment. Therefore, in the actual production environment, the parameters of the mask image are actually calculated by the back-end processing the video in real time, and then passed to the front-end for rendering.

For the live broadcast website using this technology, we can inspect the elements and see that the mask attribute of the container wrapping the barrage is changing every moment:

Collection of CSS Skills | Thinking Technology Weekly

What is returned is actually an SVG image, which looks like this:

Collection of CSS Skills | Thinking Technology Weekly

In this way, according to the real-time position changes of the video characters, a new mask is continuously calculated, and then acts on the barrage container in real time to realize mask filtering.

at last

This is the end of this article, I hope it will be helpful to you :), this article introduces a very meaningful practice of CSS mask in an actual production environment, and also shows that many new CSS technologies, if used properly, can still bring great benefits to the business. Helpful and helpful.


Collection of CSS Skills | Thinking Technology Weekly