A selection of interesting CSS recipes "Naked Fridays # 4"

  • Tutorial
bare friday

Hello, dear reader of Habr!
Today we’ll talk about sticky blocks, a new property for object-fit images , advanced use of CSS counters, the currentColor keyword, and whether there is animation in z-index.

position: sticky


Not so long ago appeared what we have been waiting for so long! Now we can create “sticky” blocks that will behave as fixed, but not overlap other blocks. In other words, while there is free space on the page, the block remains in place, but if other blocks run into this free space when scrolling the page, they move the sticky block. However, it is better to see 1 time .

position: sticky animation

So far, only Firefox and Safari of the latest versions support this property, but for other browsers you can simply set any other positioning:

.sticky {
  position: static; /* указываем перед sticky */
  position: sticky;
  top: 0px; /* обязательно указываем позицию элемента */
}

In this case, we get a sticky block for browsers that support this property and a regular static block for the rest.

This property is especially useful in mobile versions of sites, when we seem to need an element with a fixed positioning, but it should not overlap other blocks, because there is not enough free space on the screen. Yes, and in desktop versions it looks pretty interesting.

background-size for or magic object-fit property


Remember how often you wanted to set the background-size property to an image? After all, it is so convenient: you do not need to calculate the width, height, follow the proportions. So, now there is a wonderful object-fit property for this , which is very well supported by webkit browsers, and will be supported by firefox from the next version. For everything else, there is a polyphile .

The principle of operation of object-fit is the same as that of background-size for background images, with the only difference being that it applies to images, videos, and other media elements:

.image__contain {
  object-fit: contain; // изображение ужимается или растягивается, чтобы полностью поместиться в область с сохранением пропорций
} 
.image__fill {
  object-fit: fill; // растягивается на всю область блока
}
.image__cover {
  object-fit: cover; // растягивается на всю область блока с сохранением пропорций и центрируется
}
.image__scale-down {
  object-fit: scale-down; // изображение ужимается (но не растягивается!), чтобы полностью поместиться в область с сохранением пропорций
}

css object-fit
Example

Advanced CSS Counters


In one of our previous articles, we already examined the basic features of CSS counters, but this is definitely not enough for a technology with such wide capabilities.

Let's start with something simple. For example, with paging:


.pages {
  counter-reset: pages;
}
.pages a {
  counter-increment: pages;
}
.pages a:before {
  content: counter(pages);
}

As you can see, numbers are registered automatically using CSS. In real projects, this is useless, but, you see, it looks pretty funny :)


Example.

You can also read user-marked items:

Total selected:


.languages {
  counter-reset: characters;
}
input:checked {
  counter-increment: characters;
}
.total:after {
  content: counter(characters);
} 

Here we increase the counter values ​​by each checked checkbox using the input: checked selector and display its value.


Example

You can also write a small calculator:

Sum


.numbers {
  counter-reset: sum;
}
#one:checked { counter-increment: sum 1; }
#two:checked { counter-increment: sum 2; }
#three:checked { counter-increment: sum 3; }
#four:checked { counter-increment: sum 4; }
#five:checked { counter-increment: sum 5; }
#one-hundred:checked { counter-increment: sum 100; }
.sum::after {
  content: '= ' counter(sum);
} 

And again, nothing is complicated: for each checkbox, a number is indicated by which it will increase the counter value, which is then displayed.


An example and an article (as well as its translation ) that opened my eyes.

currentColor


For a long time (since the release of IE9) we can use the wonderful, but little-known keyword currentColor . What is its essence? It contains the current color value of the element, both inherited from the parent and not inherited by default. This allows you not to set the same color many times and sometimes not to introduce variables (if you work with preprocessors).

For example, this can be very useful when working with SVG icons that change color depending on the state of the parent. Usually, we would have to write it something like this:

.button {
  color: black;
}
.button:hover {
  color: red;
}
.button:active {
  color: green;
}
.button svg {
  fill: black;
}
.button:hover svg {
  fill: red;
}
.button:active svg {
  fill: green;
}

but currentColor makes the code much more concise:

svg {
  fill: currentColor;
}
.button {
  color: black;
  border: 1px solid currentColor;
}
.button:hover {
  color: red;
}
.button:active {
  color: green;
}

Another example of a useful application is pseudo-elements:

a {
  color: #000;
}
a:hover {
  color: #333;
}
a:active {
  color: #666;
}
a:after,
a:hover:after,
a:active:after {
  background: currentColor;
  ...
}


Transition for z-index


You might not have guessed, but the z-index property also supports animated transitions. However, it changes the values ​​in steps, so it seems that there is no transition. But he is! Do not be fooled!

z-index transition

Great example of how this works.

That's all for today. We hope that in this article you have found something new and useful for yourself. See you soon.

PS Special thanks to the user DonSinDRom , who literally sprinkles me with links to new interesting css chips after each article :)

Only registered users can participate in the survey. Please come in.

Was this collection helpful to you?

  • 75.3% Yes, I learned a lot; 922
  • 21.2% New to me were 1-2 recipes; 260
  • 3.4% I already knew all this. 42

Also popular now: