8 techniques for working with CSS: parallax, "sticky" footer and others

From the translator: Bret Cameron 's article about tricks in working with CSS was translated for you. Many moments will be useful not only for beginners, but also for experienced developers.

This article is about working in CSS, having learned about them, I exclaimed: “Agaaaa!”. I hope you make a couple of discoveries too.
')
CSS is a specific technology. At first glance, it seems very simple. But some effects, which in theory seem simple, are not such in practice.

I will show a few tricks and talk about the principles of their use in CSS. The article itself is not about complexity. On the contrary, it is designed to make your work more comfortable.

Skillbox recommends: Practical two-month course "Profession Frontend-developer" .

We remind: for all readers of Habr - a discount of 10,000 rubles when writing to any Skillbox course on the promotional code "Habr".

1. "Sticky" footer

Despite the simplicity of implementation, it can be a stumbling block for novice developers.

In most projects, you want the footer to remain at the bottom of the screen regardless of the amount of content and adapt to different viewing conditions.

Before the advent of CSS3, this effect was difficult to achieve without knowing the exact height of the footer. But now this is not a problem, it’s best to use the Flexbox to create a sticky footer. Namely, take the flex-shrink property, so you will be sure that the footer will retain its size.

At size 0, it will not shrink at all.

2. Increase when hovering

This effect is a great way to draw the user's attention to the clickable image. When he moves the cursor over the picture, it is slightly “lifted” with the same size preserved.

In order to make this effect, we need a wrapper div, they need to wrap the image tag in HTML.

In addition, to make the effect work, you need to set the width and height of the element, as well as make sure that its overflow is set to hidden. After this, you can apply any type of transformation.

3. Constant Night Mode

If you need a quick way to set night mode for your site, then use invert and hue-rotate filters.

filter: invert () can take values ​​from 0 to 1. 1 is an inversion, white becomes black.

filter: hue-rotate () changes the color content of your elements so that they keep more or less the same level of separation from each other. Values ​​range from 0 to 360 degrees.

If you combine these effects inside the body tag, you can quickly get a night skin for the site (the background in this case you need to set the color).

Here is an example:

body { background: #FFF; filter: invert(1) hue-rotate(210deg); } 

Using these settings, you can turn the Google home page into this.

4. custom bullets

To create custom bullets for the list, you can use content along with the pseudo element :: before

In the CSS below, I use two classes .comlete and .incomplete to distinguish two types of bullets.



Bonus: bread crumbs in navigation

There are many ways to get interesting effects using the content property, but I could not resist adding one more.

Since slashes and other symbols used to separate bread crumbs, this is the style, it makes sense to define them in CSS. As in many other examples in this article, the effect is based on a last-child pseudo-class. It is available only in CSS3:

 .breadcrumb a:first-child::before { content: " » "; } .breadcrumb a::after { content: " /"; } .breadcrumb a:last-child::after { content: ""; } 

5. Parallax images

This popular effect attracts the attention of users. It should be used if you want to revive the page while scrolling.

While normal images change their location when scrolling, the parallax images remain in place.

CSS example (CSS only)

Here background-attachment: fixed is an integral element, it binds the position of the background image to a specific position. The picture remains in place, while the window from which it is visible scrolls. It seems that the picture is behind the entire site. To replace this effect with the opposite, specify background-attachment: scroll.


CSS + JavaScript

6. Animation with cropped images.

As in the case of the sticky footer, before the advent of CSS3, it was difficult to make animation with cropped images. Now we have object-fit and object-position, which together allow you to resize the image without affecting the aspect ratio of the image.

Previously, it was necessary to use an image editor. The big advantage of CSS3 is the ability to make image resizing a part of the animation.

Here is an example with a tag. In this case, you can take advantage of the pseudo-class: checked, and JavaScript is not needed.

7. Mixing Modes

If you are familiar with Photoshop, then you well understand the advantages of blend modes for achieving various interesting effects. But did you know that the same modes are available in CSS?

Here are examples of using blend modes for Medium pages with background-color - lightblue and blend-mode - difference:



You can use these modes not only to work with the background. The mix-blend-mode property allows you to mix elements with the background. For example, using mix-blend-mode - color-dodge and background lightsalmon, you can get this effect.



Before CSS3, it was hard to believe that sites could look like this.

Yes, there is a problem with Chrome 58+ that incorrectly renders elements set in transparent tags or. Quick fix - add background-color - white.

8. Pinterest style - imageboard

CSS Grid and Flexbox have greatly simplified the creation of various types of adaptive layouts, making it easy to center elements vertically on the page.

But they are practically useless in Pinterest style imageboards, where the vertical position of each element varies depending on the height of the element above it.



The best way to achieve this is to use a set of CSS column properties. Most often they are used to create multiple columns of newspaper-style text, but there is another example of use.

To make it work, you need to wrap the elements in a div and set the properties column-width and column-gap.

Then, to prevent the separation of elements between the two columns, add the column-break-inside parameter:


The example above is the use of the pseudo-class: not (). Used here: hover.

And what techniques when working with CSS do you use? Indicate them in the comments - I am sure it will be useful for all readers.

Skillbox recommends:

• Practical course "Mobile developer from scratch . "
• Online course "C # developer with 0" .
• Practical course Python-developer from scratch .