';}ul.
incomplete li::before { content: '☐ ';;}Bonus Use: Navigation BreadcrumbsThere are many more useful ways to take advantage of the content property, and I couldn’t resist adding one more.
Since the slashes and other symbols used to separate breadcrumbs are stylistic, it makes a lot of sense to define them in CSS.
Like many of the examples in this article, this effect relies on a pseudo-class — last-child — only made available in CSS3:.
breadcrumb a:first-child::before { content: " » ";}.
breadcrumb a::after { content: " /";}.
breadcrumb a:last-child::after { content: "";}5.
Parallax ImagesThis eye-catching effect is increasingly popular, and it can be used to bring life to a page as the user scrolls through it.
While normal images of a page move as the user scrolls, the parallax image appears to stays fixed — only the window through which it is visible moves.
The must-have property for this effect is background-attachment: fixed , which fixes the background image’s position within the view-port.
(The opposite effect is achieved using background-attachment: scroll ).
For a more advanced effect, you can use JavaScript to add movement to the image as the user scrolls.
Credit to Renan Breno, for this CodePen, which demonstrates some of what’s possible:6.
Animation with Cropped ImagesLike the sticky footer, it was very tricky to crop images before CSS3.
Now, we have two properties which make cropping easy, object-fit and object-position, which together allow you to change an image’s dimensions without affecting it’s aspect ratio.
Before, it was always possible to crop your images in a photo editor, but a big advantage of cropping them in a browser is the ability to resize images as part of an animation.
To demonstrate this effect as simply as possible, the following example triggers the effect using an <input type="checkbox"> tag.
That way, we can take advantage of CSS’s :checked pseudo-class, and we won’t need to use any JavaScript:7.
Blend ModesIf you’ve got experience using Photoshop, you likely know how powerful its different blend modes can be to create interesting effects.
But did you know that most of Photoshop’s blend modes are also available in CSS?Here’s what Medium’s homepage looks like when the images are given a background-color of lightblue, and a blend-mode of difference :Plus, backgrounds aren’t the only way you can take advantage of blend modes.
The mix-blend-mode property allows you to blend elements with their existing background.
So, for example, you can create effects like this, with uses a mix-blend-mode of color-dodge and a background of lightsalmon .
Before CSS3, it was hard to believe that websites could look like this!Note: there is currently a bug with Chrome 58+ where mix-blend-mode won’t render on elements set on transparent <body> or <html> tags.
A quick fix is to give them both these tags a background-color of white .
8.
Pinterest-style Image BoardCSS Grid and Flexbox have made it much easier to achieve many different types of responsive layouts, and allow us to easily centre elements vertically on a page — which was very difficult before.
However, one style of layout they are not well suited to is the one used by Pinterest, where the vertical positioning of each element changes based on the height of the element above it.
https://www.
pinterest.
co.
uk/The best way to achieve this is to use CSS’s suite of column properties.
These are most commonly used to create multiple newspaper-style columns of text, but this is another great use-case.
For this to work, you need to wrap your elements in a div and give this wrapper a column-width and column-gap property.
Then, to prevent any elements being split between two columns, add column-break-inside: avoid to the individual elements.
I owe my understanding of this effect to the following CodePen, by Dudley Storey, which demonstrates it very effectively.
The above example is also a great example of CSS’s :not() pseudo-class.
He uses it with :hover , so that all but the hovered element fade out.
Additional ResourcesOverall, I hope the following examples have clarified some useful CSS effects — and maybe even drew attention to a few features you weren’t aware of.
It was difficult to decide on my top 8 CSS tricks, since there have been several other CSS effects that really enhanced my understanding of it.
These include features like animation using keyframes, scroll-snapping, more complex navigation bars, 3D effects, CSS for printing.
Features like these don’t really fall into the category of “simple tricks”, and they can be explored in considerable depth by themselves.
so instead of describing them here, I’ll direct you to some of my favourite resources to learn about them:Keyframe animationhttps://css-tricks.
com/snippets/css/keyframe-animation-syntax/Scroll-snappinghttps://css-tricks.
com/practical-css-scroll-snapping/Multi-level navigationhttp://bradfrost.
com/blog/post/complex-navigation-patterns-for-responsive-design/3D effectshttps://www.
the-art-of-web.
com/css/3d-transforms/CSS for printhttps://www.
smashingmagazine.
com/2018/05/print-stylesheets-in-2018/http://edutechwiki.
unige.
ch/en/CSS_for_print_tutorialDesign principleshttps://material.
io/If you have any CSS tips and tricks of your own, feel free to share them in the comments!.