Written by Nguyen Nhat Anh
1. Sticky Footer
Most of you who work on the web know about this problem. For most projects, you’ll want a footer at the bottom of the screen, regardless of the size of the content.
Previously, it was quite difficult and difficult to create a sticky footer in the right sense. Today, with the emergence of CSS3 and flexbox, things become a lot easier. We use the flex-grow attribute for the div containing the content of the page. For example:
flex-grow controls how many flex elements are fill into container and the relationship between them and other flex elements. In the example below, I use flex: auto, it will automatically set flex-grow to 1 by default.
To prevent any unwanted behavior, we can also add flex-shrink: 0 to the footer. The flex-shrink is in stark contrast to the flex-grow, controlling the amount of flexing (shrink) flex element to match its container and setting it to 0 will prevent the footer from shrinking – ensuring that it remains the size.
2. Zoom-on-Hover Images
The zoom effect is a great way to draw attention to clickable images. When the user moves through it, the image will increase slightly, but its size remains the same.
To achieve this effect, we need a div around the img tag in HTML.
To make this effect work, you need to set the width and height of the parent element and ensure the overflow is set to hidden. Then you can apply any kind of transition animation to the image inside.
3. Instant Night Mode
If you are looking for a quick way to apply night mode to your website, try using invert (reverse) and hue-rotate filters (color rotation).
- Filter: invert () on a scale of 0 to 1 – in which 1 changes white to black.
- The: hue-rotation () filter changes the color content of your components in a way they more or less retain the same level of separation. Its value ranges from 0deg to 360deg.
By combining these effects on your body card, you can quickly try your site’s night mode. (Note that, to update the background, you must set it to a color.)
Here is an example:
|
1 2 3 4 |
body { background: #FFF; filter: invert (1) hue-rotate (210deg); } |
Using these settings, we can provide Google Google homepage with an immediate change:
4. Custom Bullet Points
To create custom bullet points for an unordered list, you can use the content property, together with the :: before pseudo-element.
In the CSS below, I’m using two classes of .complete and .incomplete để xác định hai kiểu các dòng khác.
To create custom bullets for an unordered list, you can use the content attribute, along with the pseudo-element :: element.
In the CSS snippet below, I use two .complete and .incomplete classes to distinguish two different types of bullet points.
|
1 2 3 4 5 6 7 8 9 |
ul { list-style: none; } ul.complete li :: before { content: '?'; } ul.incomplete li :: before { content: '☐'; } <code class=" language-css"> |
Maybe you are interested
Responsive HTML with a CSS line
Recreate Medium’s article layout with CSS Grid
5. Parallax Images
This eye-catching effect is increasingly popular and it can be used to bring a page’s fun to the user scrolling through it.
Although the normal image of a page moves as the user scrolls, the parallax image seems to remain fixed – only the window that it can see moves.
CSS-only Example The required attribute for the simplest version of this effect is background-attachment: fixed, fixing the background image on the background in the view-port. (The opposite effect is achieved by using background-attachment: scroll).
CSS + JavaScript Example For more advanced effects, you can use JavaScript to add motion to the image when the user scrolls.
6. Animation with Cropped Images
Like the footer, it is difficult to crop images before CSS3 version. Now, we have two properties that make it easy to cut, object-fit and object-position, allowing you to resize the image without affecting the frame rate.
In the past, it was always possible to crop your images in a photo editor, but a big advantage of cropping them in the browser is the ability to resize images as part of animation.
The following example activates the effect using the <input type = “checkbox”> tag. That way, we can take advantage of the pseudo-class: checked and we don’t need to use any JavaScript code:
7. Blend Modes
If you have experience using Photoshop, you can know how powerful its different blend modes can be to create interesting effects. But did you know that most blending modes in Photoshop are also available in CSS?
Here, the Medium homepage looks like when the background-color of the images is lightblue and the blend-mode differs:
In addition, backgrounds are the only way you can use blend-modes. The mix-blend-mode attribute allows you to mix elements with their existing background. So, for example, you can create effects like this, using mix-blend-mode of color-dodge and the background of lightalmon.
8. Pinterest-style Image Board
CSS Grid and Flexbox make it easy to create different types of response layouts and allow us to easily align elements vertically on a page – this is very difficult before.
However, a rather peculiar layout is used by Pinterest, in which the vertical position of each component changes based on the height of the element above it.
The best way to achieve this is to use the column attribute. They are most commonly used to create multiple newspaper-style text columns, but this is another great use case.
To do this, you need to wrap your elements in a div and give the column-width and column-gap wrapper an attribute.
Then, to prevent any element from being split between the two columns, add the column-break-inside: avoid attribute to the individual elements.