Undocumented CSS Techniques
Hello! My name is Dmitry Grigorov. I work as a frontman at Raiffeisenbank in the RBO PRO team. I will tell and show you how you can creatively apply these CSS features. The article will cover the following topics:
In the first topic “Backgrounds and Frames” I’ll tell you what currentColor in CSS3 is , how to make transparent frames, several frames, what is flexible background positioning. In the second topic "Figures" I will give methods for creating various types of rectangles using css. In the visual effects will consider examples of the imposition of various color tones. And in the topic “User interaction” I will show how to make an interactive comparison of images.
')
What do you think, what color will the border have on the block with the text “Hello world”?
The same blue? Yes, right. And why?
The color will be the same # 38A because CSS has such a nice variable like currentCollor , which takes its color value from the color property. And if we do not pass the color in the border, outline, text-shadow, box-shadow , then by default we get the same color as in the color property.
In the figure below you can see that currentColor can be transmitted, either explicitly or not at all.
The currentColor variable provides us with a very convenient code and follows DRY principles (don't repeat yourself). And as shown in the following figure, changing only the color property, for the block with the code that was presented above, we get a different display of the element.
If someone had asked me earlier how to make a translucent frame, then I would answer: “Easy! I would make two diva blocks: the parent and the child. And already in the parent I would set some padding: 10px and background-color: rgba (255, 255, 255, 0.5) (translucent), which would be the color of my transparent border. ” But this can be done much easier.
What if we just pass a translucent border to our frame? We will not get anything good. Why? In CSS there is such a property as background-clip , and many forget about its existence. Background-clip is responsible for spreading the background and has three values: border-box (default), content-box and padding-box .
By default, it is in our border-box , which means that our background will go under our frame, and we will not see the very transparency that was transferred to the border , since our background will be below our border. Also in the background-clip, you can transfer the content-box , which will mean that our background is distributed under our content. But here we pass the padding-box and get a transparent frame like this.
We can create several frames in two ways, one using the border and outline . Border and Outline are good, but with their help we can only make two frames.
And what if we need much more frames, for example 3, 4 or more, then shadows come to our aid.
All of us came across the box-shadow property. Many people know that if you pass zero vertical offset (v-offset) , zero horizontal offset (h-offset) , zero blur (blur), and the fourth parameter, called the spread radius (spread radius) , which makes the shadow larger, you will get something something like a frame. And so you can create as many frames as you like, separating them with a comma.
The next topic is flexible background positioning. Many of us were faced with the problem of how to arrange a picture on our background. You can arrange it using background-position . I want to note that keywords like right, top, bottom, left in CSS have been updated. Now, when we write right 10 px and bottom 20 px for our picture, it will mean that we indent on the right 10 px , and below 20 px .
Similarly, if you write background-position: right 10 px top 20 px , then you will get an indent on the right 10 px , above 20 px .
With the help of flexible positioning, you can have several pictures in our background. We tell them all no-repeat and with the help of keywords we scatter in different corners. That's how cool it turns out. everything is excellent supported, use.
Let's talk about creating the background. Usually, to create a non-one-colored background, we resort to the use of various pictures, which are made with the help of visual editors. Or the designer has drawn a picture to us, we inserted it, and everything is beautifully displayed here.
But a simple striped background can be made with CSS alone.
We all know what the standard gradient looks like.
And what if we set the boundaries of this gradient?
Then at the edges we will see a solid color.
What if we reduce the gradient to one point?
We will see just two strips. These two bands will be the basis of our striped background. Next, set the background-size: 30px . One lane will be 15 px and the second one will also be 15 px , since the gradient is divided 50/50 . And we get such a striped background.
In order to make one lane larger, the other smaller, we set 30% for yellow and 0 for blue. What does this zero mean? Of course, 30% of us will have a yellow color. But what does this 0 mean, can anyone say? In fact, this is just the remaining distance of our background-size . That is, 30% of 30px - this is about 9px , we will fill with yellow, and the rest of the blue.
In order to draw several colors in our background, we are faced with such a situation as intermediate repetition of colors. That is, I say to our yellow color: fill me with 33% of our background with yellow, and the resulting part fill with blue. Then I say to the blue color: no, fill up to 66% , and fill up the rest with yellow-green, and we get 3 colors in our background.
In order to make vertical stripes, everything is the same, only we change the background-size and the keyword to right appears in the linear-gradient . Also, instead of a keyword, we can insert 90 ° and everything will be displayed as it should.
If we combine the horizontal and vertical stripes together, then we get this background in the grid.
We have a square background-size , we pass our gradients through a comma in the background-image and get the background in the grid.
With the background in the diagonal strip a little more complicated. Here we no longer use the usual linear-gradient , we use here repeating-linear-gradient . Please note that our background is up to 30 px , and the background-size is square 42px by 42px . Why is 42?
What if we pass on something else? For example, 30px instead of 42px.
Why is 42px. The usual school mathematics comes to the rescue.
We know that our background is a square, and a square consists of two isosceles triangles. Next we do some mathematical transformations, but remember that our background extends up to 30px .
We substitute 30 into our formula and we get about 42 . Round off to a lesser degree. We get here such a background, diagonal stripes.
lea.verou.me/css3patterns
The author of the book “CSS Secrets” Lea Vera, an employee of the global web consortium w3c, has a whole collection of backgrounds that she realizes using gradients.
Examples that implements Lea Vera.
Examples implemented by Bennett Fili.
And I will start this topic with parallelograms.
All of us know what parallelograms look like. A parallelogram is, first of all, a non-standard rectangle whose corners should not always be straight. In order to make beveled corners, you can do with a pseudo-class before . Set the relative positioning ( position: relative ) to the button class, and absolutely position the pseudo-class before . We assign a pseudo- class background , do a transformation with the help of skewX and get these beveled corners.
In order to make a trapezoid - all the same, similarly. Only here we pass the perspective and rotateX . And we get just such a trapezoid.
A diamond shaped image can be made in various ways. One of them is also using transformation. That is, we have a parent div, and an image is attached to it.
Rotate the parent div by 45 degrees , and we already get a rhombus, but the image we have leaned too. We want to return it to its normal form and expand our image back to -45 degrees . The result is a hexagon. Why? And because we have two rectangles here, and they cut corners. In order for us to get exactly a rhombus, we simply set the scale (1.42) , magnify our image and get such a rhombus.
A diamond-shaped image can also be made using the clip-path . There we can transfer various names such as circle , polygon and others. Here I use the landfill. I transfer to the polygon the middle of each side of the square, and with hover-e I return the points to the corners of the square and get this kind of animation. This is a very good property.
It supports animation, but unfortunately, it is very poorly supported by browsers. It is supported only by Chrome and Firefox.
How to make cut corners? Recall the theme of the striped background. Here, too, with gradients. We, in fact, divide our background into 4 parts. We have 4 gradients that we scatter using flexible positioning at different angles and paint them from a transparent color to blue. And we get cut corners.
In order to make the cut corners inward, radial-gradient is used here. The only thing that we have, these are keywords such as circle at top left , to arrange the circles in different angles. Again, we arrange the 4 parts, using keywords, in places and get these angles.
How to make simple pie charts using CSS alone. Usually, to create pie charts, we use some kind of framework, for example, d3.js. But a simple pie chart can be made on CSS.
We have a block, we make a circle out of it.
Fill half of the circle with brown color.
Then we make a pseudo-class, which we paint over the same green color that is already in the block.
In fact, simply moving this pseudo-class already produces some kind of pie chart, but only up to half, since the other part is green.
I will describe such an interesting approach, if you pass a negative animation-delay to our block and leave the animation-play-state in a paused state, then you will notice that the state of our element changes. And if our animation is playing up to 4s (4 seconds), and we write in the -2s styles, we’ll get a half-lost state, and our circle will be half-painted.
Color overlays can be done in various ways, I will give two examples: the first one is color overlay using filters. With the help of filters we can impose many shades, but to achieve any particular will be a problem for many. And here comes to the rescue such a property as background-blend-mode .
And let's move on to a much more adaptive way: this is background-blend-mode .
It is more adaptive, because it can not only impose the desired colors, but also mix them, and this property is beautifully animated. Plus, with the help of it we can make different color effects.
But, unfortunately, this property is not all good with support. And to use it or not, you decide.
The next example is a smooth state animation. Why is it so called, let's see.
We have a panorama, and we want to add some animation.
We place the image on the background and then animate the background-position , and get the animation.
Pay attention to the layout, on HTML. We have a container, image-slider , and it has one image that is nested in a div , and the other is not nested. For the parent container, we set position: relative , and for the image embedded in the div , we’ll work with it, we set position: absolute and 50% width. The most important thing is that we do resize: horizontal .
With this resize we will have an interactive comparison. Since I have a very good resolution, we do not see such a bug that arises due to resize: horizontal . We have a slider, which is similar to the resize slider of the HTML element textarea . In order to remove it, we simply paint over it with a pseudo-class and tie cursor: ew-resize on it .
I want to note that the article was based on the book Css Secrets. Better Solutions to Everyday Web Design Problems . Although she has already been published a long time ago, I strongly recommend reading this book. From this book you will learn much more than what I have presented here and will truly try out many of the secrets of CSS live.
Link to repository with examples and presentation
- Backgrounds and frames;
- Figures;
- Visual effects.
Backgrounds and frames
In the first topic “Backgrounds and Frames” I’ll tell you what currentColor in CSS3 is , how to make transparent frames, several frames, what is flexible background positioning. In the second topic "Figures" I will give methods for creating various types of rectangles using css. In the visual effects will consider examples of the imposition of various color tones. And in the topic “User interaction” I will show how to make an interactive comparison of images.
')
What do you think, what color will the border have on the block with the text “Hello world”?
The same blue? Yes, right. And why?
The color will be the same # 38A because CSS has such a nice variable like currentCollor , which takes its color value from the color property. And if we do not pass the color in the border, outline, text-shadow, box-shadow , then by default we get the same color as in the color property.
In the figure below you can see that currentColor can be transmitted, either explicitly or not at all.
The currentColor variable provides us with a very convenient code and follows DRY principles (don't repeat yourself). And as shown in the following figure, changing only the color property, for the block with the code that was presented above, we get a different display of the element.
Translucent frames
If someone had asked me earlier how to make a translucent frame, then I would answer: “Easy! I would make two diva blocks: the parent and the child. And already in the parent I would set some padding: 10px and background-color: rgba (255, 255, 255, 0.5) (translucent), which would be the color of my transparent border. ” But this can be done much easier.
What if we just pass a translucent border to our frame? We will not get anything good. Why? In CSS there is such a property as background-clip , and many forget about its existence. Background-clip is responsible for spreading the background and has three values: border-box (default), content-box and padding-box .
By default, it is in our border-box , which means that our background will go under our frame, and we will not see the very transparency that was transferred to the border , since our background will be below our border. Also in the background-clip, you can transfer the content-box , which will mean that our background is distributed under our content. But here we pass the padding-box and get a transparent frame like this.
Several frames
We can create several frames in two ways, one using the border and outline . Border and Outline are good, but with their help we can only make two frames.
And what if we need much more frames, for example 3, 4 or more, then shadows come to our aid.
All of us came across the box-shadow property. Many people know that if you pass zero vertical offset (v-offset) , zero horizontal offset (h-offset) , zero blur (blur), and the fourth parameter, called the spread radius (spread radius) , which makes the shadow larger, you will get something something like a frame. And so you can create as many frames as you like, separating them with a comma.
Flexible background positioning
The next topic is flexible background positioning. Many of us were faced with the problem of how to arrange a picture on our background. You can arrange it using background-position . I want to note that keywords like right, top, bottom, left in CSS have been updated. Now, when we write right 10 px and bottom 20 px for our picture, it will mean that we indent on the right 10 px , and below 20 px .
Similarly, if you write background-position: right 10 px top 20 px , then you will get an indent on the right 10 px , above 20 px .
With the help of flexible positioning, you can have several pictures in our background. We tell them all no-repeat and with the help of keywords we scatter in different corners. That's how cool it turns out. everything is excellent supported, use.
Striped Background
Let's talk about creating the background. Usually, to create a non-one-colored background, we resort to the use of various pictures, which are made with the help of visual editors. Or the designer has drawn a picture to us, we inserted it, and everything is beautifully displayed here.
But a simple striped background can be made with CSS alone.
We all know what the standard gradient looks like.
And what if we set the boundaries of this gradient?
Then at the edges we will see a solid color.
What if we reduce the gradient to one point?
We will see just two strips. These two bands will be the basis of our striped background. Next, set the background-size: 30px . One lane will be 15 px and the second one will also be 15 px , since the gradient is divided 50/50 . And we get such a striped background.
In order to make one lane larger, the other smaller, we set 30% for yellow and 0 for blue. What does this zero mean? Of course, 30% of us will have a yellow color. But what does this 0 mean, can anyone say? In fact, this is just the remaining distance of our background-size . That is, 30% of 30px - this is about 9px , we will fill with yellow, and the rest of the blue.
In order to draw several colors in our background, we are faced with such a situation as intermediate repetition of colors. That is, I say to our yellow color: fill me with 33% of our background with yellow, and the resulting part fill with blue. Then I say to the blue color: no, fill up to 66% , and fill up the rest with yellow-green, and we get 3 colors in our background.
In order to make vertical stripes, everything is the same, only we change the background-size and the keyword to right appears in the linear-gradient . Also, instead of a keyword, we can insert 90 ° and everything will be displayed as it should.
If we combine the horizontal and vertical stripes together, then we get this background in the grid.
We have a square background-size , we pass our gradients through a comma in the background-image and get the background in the grid.
With the background in the diagonal strip a little more complicated. Here we no longer use the usual linear-gradient , we use here repeating-linear-gradient . Please note that our background is up to 30 px , and the background-size is square 42px by 42px . Why is 42?
What if we pass on something else? For example, 30px instead of 42px.
Why is 42px. The usual school mathematics comes to the rescue.
We know that our background is a square, and a square consists of two isosceles triangles. Next we do some mathematical transformations, but remember that our background extends up to 30px .
We substitute 30 into our formula and we get about 42 . Round off to a lesser degree. We get here such a background, diagonal stripes.
lea.verou.me/css3patterns
The author of the book “CSS Secrets” Lea Vera, an employee of the global web consortium w3c, has a whole collection of backgrounds that she realizes using gradients.
Examples that implements Lea Vera.
Examples implemented by Bennett Fili.
Figures
And I will start this topic with parallelograms.
All of us know what parallelograms look like. A parallelogram is, first of all, a non-standard rectangle whose corners should not always be straight. In order to make beveled corners, you can do with a pseudo-class before . Set the relative positioning ( position: relative ) to the button class, and absolutely position the pseudo-class before . We assign a pseudo- class background , do a transformation with the help of skewX and get these beveled corners.
In order to make a trapezoid - all the same, similarly. Only here we pass the perspective and rotateX . And we get just such a trapezoid.
A diamond shaped image can be made in various ways. One of them is also using transformation. That is, we have a parent div, and an image is attached to it.
Rotate the parent div by 45 degrees , and we already get a rhombus, but the image we have leaned too. We want to return it to its normal form and expand our image back to -45 degrees . The result is a hexagon. Why? And because we have two rectangles here, and they cut corners. In order for us to get exactly a rhombus, we simply set the scale (1.42) , magnify our image and get such a rhombus.
A diamond-shaped image can also be made using the clip-path . There we can transfer various names such as circle , polygon and others. Here I use the landfill. I transfer to the polygon the middle of each side of the square, and with hover-e I return the points to the corners of the square and get this kind of animation. This is a very good property.
<source lang="css"><img src="tiger.jpg" alt=" " /> <img src="tiger2.jpg" alt=" "/> img { max-width: 250px; margin: 20px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: all 1s; } img:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } It supports animation, but unfortunately, it is very poorly supported by browsers. It is supported only by Chrome and Firefox.
How to make cut corners? Recall the theme of the striped background. Here, too, with gradients. We, in fact, divide our background into 4 parts. We have 4 gradients that we scatter using flexible positioning at different angles and paint them from a transparent color to blue. And we get cut corners.
In order to make the cut corners inward, radial-gradient is used here. The only thing that we have, these are keywords such as circle at top left , to arrange the circles in different angles. Again, we arrange the 4 parts, using keywords, in places and get these angles.
How to make simple pie charts using CSS alone. Usually, to create pie charts, we use some kind of framework, for example, d3.js. But a simple pie chart can be made on CSS.
We have a block, we make a circle out of it.
Fill half of the circle with brown color.
Then we make a pseudo-class, which we paint over the same green color that is already in the block.
In fact, simply moving this pseudo-class already produces some kind of pie chart, but only up to half, since the other part is green.
I will describe such an interesting approach, if you pass a negative animation-delay to our block and leave the animation-play-state in a paused state, then you will notice that the state of our element changes. And if our animation is playing up to 4s (4 seconds), and we write in the -2s styles, we’ll get a half-lost state, and our circle will be half-painted.
Visual effects
Color overlays can be done in various ways, I will give two examples: the first one is color overlay using filters. With the help of filters we can impose many shades, but to achieve any particular will be a problem for many. And here comes to the rescue such a property as background-blend-mode .
And let's move on to a much more adaptive way: this is background-blend-mode .
It is more adaptive, because it can not only impose the desired colors, but also mix them, and this property is beautifully animated. Plus, with the help of it we can make different color effects.
.tinted-image { ... backgroung-color: hsl(335, 100%, 50%); background-blend-mode: luminosity; transition: .5s background-color; } .tinted-image { ... backgroung-color:yellow; background-blend-mode: difference; transition: .5s background-color; } .tinted-image:hover { background-color: transparent; } But, unfortunately, this property is not all good with support. And to use it or not, you decide.
The next example is a smooth state animation. Why is it so called, let's see.
We have a panorama, and we want to add some animation.
We place the image on the background and then animate the background-position , and get the animation.
.panoramic { width: 300px, height: 300px; background: url('b.jpg'); background-size: auto 100%; border-radius: 50%; animation: panoramic 10s linear infinite alternate; animation-play-state: paused; } .panoramic:hover, .panoramic:focus { animation-play-state:running; } @keyframes panoramic { to {background-position: 100% 0;} } Pay attention to the layout, on HTML. We have a container, image-slider , and it has one image that is nested in a div , and the other is not nested. For the parent container, we set position: relative , and for the image embedded in the div , we’ll work with it, we set position: absolute and 50% width. The most important thing is that we do resize: horizontal .
With this resize we will have an interactive comparison. Since I have a very good resolution, we do not see such a bug that arises due to resize: horizontal . We have a slider, which is similar to the resize slider of the HTML element textarea . In order to remove it, we simply paint over it with a pseudo-class and tie cursor: ew-resize on it .
I want to note that the article was based on the book Css Secrets. Better Solutions to Everyday Web Design Problems . Although she has already been published a long time ago, I strongly recommend reading this book. From this book you will learn much more than what I have presented here and will truly try out many of the secrets of CSS live.
Link to repository with examples and presentation
Source: https://habr.com/ru/post/346770/
All Articles