CSS is a computer language used to show HTML or XML and other file styles, I believe that friends are not unfamiliar with it, today to give you a collection of tips related to CSS, I hope to provide you with some new design ideas ~
CSS has a variety of ways to play, let’s take a look ~
1. Tips! CSS whole text overflow ellipsis feature exploration
Today’s article is very interesting. I will talk about some interesting details of overflows and omissions in whole blocks of text.
Text extra long RBI
As we all know, as of today (2021/03/06), CSS provides two ways to make it easier for us to delete long text.
For one-line text, use one-line ellipsis:
{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
As for the long omission of multi-line text, the compatibility of -webkit-line-clamp related properties is also very good:
{
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Codepen Demo — inline-block implements entire block overflows
https://codepen.io/Chokcoco/p…
Problem 1: Whole blocks of very long text are omitted
Problem 2: iOS does not support overflows of large chunks
2. The original CSS background can also be played this way
As a front-end developer, my background is a regular one. It can be as big as a theme background for an entire site, or as small as a button background. The background property of CSS is basically encountered every day in development. In most cases, we only use solid color background or image background. If you want to make your content look more interesting, this article will let you develop cool backgrounds with pure CSS.
Prior to the start
Before you start, please answer the following questions. If you can answer all of them correctly, you have a good understanding of the background property.
1. What is the default shape of radial gradient?
A: Prototype B: Oval
- When the background property has more than one value, which value is on the top layer?
A: First value B: Last value
- background: green, linear-gradient(red, pink); What is the effect?
A: Green background B: Red and pink gradient background C: No background
- When the background property has multiple values, how do I specify the size of the background for each level?
Based on the background
First of all, let’s review the basic background. The simplest is a solid color background:
background: pink;
Linear gradient, of course, you can also customize the direction:
.linear {
background: linear-gradient(red, pink);
}
.linear1 {
background: linear-gradient(145deg, red 20%, pink);
}
Radial gradient
background: radial-gradient(red, pink);
Angular gradient
background: conic-gradient(red, pink); background: conic-gradient(red, pink); background: radial-gradient(red, pink);
Basic background expansion
There is nothing to say about a solid background except to change the color.
1. Linear background
2. Radial background
3. Angle gradient
4. Combine the background
Use these CSS properties to take your layout efficiency 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 they need to. In fact, sometimes we use JavaScript to implement certain interactions, CSS can be done with a single property, which can save us a lot of coding time.
As front-end developers, this happens to us all the time. So I asked myself, why not write an article listing all the less used but useful and interesting CSS properties?
In this article, I’m going to introduce a few different CSS properties that I hope will give you something new, but without further ado, let’s get started.
Use place-items in the CSS grid
We can center elements horizontally and vertically with just two lines of CSS.
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 the shorthand property that combines justify-items with align-items. The above code is equivalent to the following code:
.hero {
display: grid;
justify-items: center;
align-items: center;
}
You may be wondering, what’s going on here? Let’s explain. When you use Place-Items, it is applied to every cell in the grid, meaning that the contents of the cell are centered. If we add a few more cells it will be clear:
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
}
Flexbox and margin coordination
When combined with Flexbox, margin: auto makes it very easy to center Flex projects 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 😎
Marker property of the list
The text – the align attribute
Display: inline – Flex properties
The column – rule properties
background-repeat: round
Object – fit attributes
Resources: 15 great responsive CSS frameworks
Responsive Web design is designed to provide the best browsing experience for a variety of devices, from desktop monitors to mobile phones. This article has put together some excellent HTML and CSS frameworks for responsive Web design. These frameworks are open source and free.
It’s not easy to compare responsive Web frameworks. Some frameworks are suitable for designing some of the features of a faster, leaner site, while others may offer a large number of features, plug-ins, and add-ons, but may be bulky and difficult to use.
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 wealth of documentation, examples, and demos to help you quickly develop responsive Web. Some major changes in Bootstrap 5, such as the casual use of jQuery and the addition of RTL support, along with off-the-shelf component and utility classes, make Bootstrap one of the best choices for Web developers.
You can also find many free advanced bootstrap templates and UI toolkits that will make your development process much easier.
Website: https://getbootstrap.com/
2. Tailwind CSS
TailWind provides a modern utility-based approach to building response sites. It has a large number of utility classes that allow you to build a modern Web site without writing CSS. It differs from other frameworks in that you need to develop Settings to reduce the final CSS size, because if you use the defaults, you end up with a very large CSS file. TailWind is able to quickly add styles to HTML elements and offers a wide range of design styles out of the box. There are plenty of resources for Tailwind CSS:
https://superdevresources.com…
Website: https://tailwindcss.com/
3. Tachyons
Tachyons is also a utility-based CSS library that provides a lot of out-of-the-box sophistication without having to write a lot of CSS yourself. The advantage of this is that Tachyons’ out-of-the-box styling is lightweight and requires no other setup. There are still ways to reduce the size if necessary. If you need a utility library that is easy to use, then this should be a good choice.
Website: https://tachyons.io/
4. Foundation
Foundation is an adaptive front-end framework created by product design firm ZURB. The framework is the result of their efforts to build Web products and services since 1998. Foundation is the most advanced responsive front-end framework and provides many custom features.
Website: http://foundation.zurb.com/
5. Material Design for Bootstrap (MDB)
MDB is built on top of Bootstrap and provides an out-of-the-box material design look. It has an excellent CSS library and works well with most popular JavaScript frameworks such as jQuery, Angular, React and. Vue.js) is compatible. The core library is completely free to use.
Website: https://mdbootstrap.com/
- UIkit
- Pure CSS
- Material Design Lite Framework (MDL)
- Materialize
- Skeleton
- Bulma
- Semantic UI
- Milligram
- Spectre.css
- Base CSS Framework
5. Use mask to filter video barrage characters
If you often watch the live broadcast of some LOL matches, you must know that in some barrage websites (Bilibili, tiger fang), when the characters appear together with the barrage, the barrage will “cleverly” hide under the characters and look very smart.
A simple screenshot example:
In fact, this is done using the MASK property in CSS.
Mask simple usage introduction
Masks have been mentioned in several articles, one of which is the wonderful CSS mask. This article won’t go into the basic concept of a mask too much. If you’re wondering about some of the uses of a mask as you read on, you can check it out again.
Here is just a brief introduction to the basic use of mask:
Basically, the way to use a mask is with an image, something like this:
{ /* Image values */ mask: url(mask.png); /* Use bitmaps to make masks */ Mask: URL (Masks. SVG # Star); /* Use the shape in the SVG graph to make the mask */}Of course, we’ll talk more about how to use pictures. In fact, it is rather tedious to use pictures, because we need to prepare the corresponding picture materials first. In addition to pictures, the mask can also accept a parameter similar to background, that is, the gradient.
Similar to the following use method:
{mask: linear-gradient(#000, Transparent) /* Use gradient to make the mask */}How do you use it? A very simple example, above we created a black to transparent gradient, we applied it to the real world, the code looks like this:
In the following image, overlay a gradient from transparent to black,
{
background: url(image.png) ;
mask: linear-gradient(90deg, transparent, #fff);
}
After applying the mask, it will look like this:
In this DEMO, we can have a simple understanding of the basic use of mask.
This brings us to the most important conclusion of using a mask: the contents of an element with a mask attribute will overlap with the gradient transparency represented by the mask, and the overlap will become transparent.
It should be noted that the gradient used above is linear-gradient(90deg, Transparent, # FFF). The # FFF solid part can be changed to any color without any effect.
Codepen Demo — Basic use of a MASK
https://codepen.io/Chokcoco/p…
Use a mask to filter the character mask
After understanding the usage of mask, we will use mask to simply realize the example that the screen will automatically be hidden and filtered when the screen meets the character in the video barrage.
First, I simply simulated a summoner canyon and some basic barrages:
For your information, a still image is used to show the map of Summoner’s Gorge, not a real video, and the barrage is a string of <p> elements, which is consistent with the actual situation. The pseudocode looks something like this:
<! <div class="g-map"></div> <! > <div class="g-barrage-container"> <! - all barrage -- > < div class = "g - barrage" > 6666 < / div >... <div class="g-barrage">6666</div> </div>In order to simulate the actual situation, we add an actual character with a DIV. If we do not do any processing, it is actually the feeling when we watch the video and open the barbed screen, and the character is blocked by the video:
Note that I added a character Yasuo here and simulated a simple movement with animation. In the process of movement, the character was blocked by the barrage.
Next, you can ask for a mask.
We use the mask to make a radial gradient to make the vicinity of the figure transparent. And according to the animation of the character’s movement, the same animation can be added to the mask-position of the mask. The result is this:
.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; }}
In fact, add a mask property to the container where the barrage is placed, mark the position of the character, and constantly change the mask according to the movement of the character. Let’s replace the mask with the background, just so you can understand the principle.
- Replace the mask with the background diagram:
The transparent part of the background is the transparent part of the mask, which is actually the part where the barrage can be hidden, while the other white parts can’t be hidden, which is the perfect use of the characteristics of the mask.
In fact, this technology has nothing to do with the video itself. We only need to calculate the position of the barrage to be screened according to the video and get the corresponding mask parameter. If you remove the background and moving characters and just keep the barrage and mask, it would look like this:
It should be made clear that the use of mask is not to hide the parts of the barrage, but to specify which parts are normally displayed and which parts are transparently hidden under the container of the barrage.
Finally, the full Demo you can stamp here:
Codepen Demo — Mask filter for barrake characters click preview
https://codepen.io/Chokcoco/p…
Application in actual production environment
Of course, above, we simply restored the effect of using mask to achieve the filtering effect of the barrage. But the actual situation is much more complicated than the above scenario, because the position of the hero is uncertain and changes from moment to moment. Therefore, in the actual production environment, the parameters of the mask picture are actually calculated by the real-time processing of the video at the back end, and then transmitted to the front end, which then renders.
For live streaming websites that use this technology, we can review the elements and see that the mask property of the container that wraps the barrage changes from moment to moment:
What comes back is an SVG image that looks something like this:
In this way, according to the real-time position changes of video figures, new masks are constantly calculated and then applied on the container of the barrage in real time to realize mask filtering.
The last
This article ends here, hope to help you :), this article introduces a practical production environment of CSS Mask, a very meaningful practice, but also shows that many new CSS technology, when used properly, or can bring very beneficial help to the business.
