10 Awesome CSS3 Tricks

This article will introduce you to 10 CSS3 tricks that will enhance your website.

When CSS was developed around 1995, you could not do much with it other than basic styling of text. Even with CSS2, things did not get better immediately. It was not until early 2010 that CSS2 was fully supported by major browsers. With CSS3, the stylesheet language became much more powerful and now we are able to develop rich interactions with CSS, and not just style text. To give you an overview and some inspiration, here are ten awesome CSS3 tricks.

1. CSS Counters

Few people know CSS counters, and you might ask, “What browser supports them anyway?” However, CSS counters are supported back to Internet Explorer 8. Counters are, as you might guess, for counting elements like how many pictures there are in a gallery. With counters, you can display numbers underneath the items. That does not sound very interesting yet, but did you know that CSS counters can actually replace JavaScript in some situations?

In this blog post, Fun Times with CSS Counters, Will shows off some pretty crazy tricks with counters, e.g. a pagination, a counter for items with checkboxes and even a little mathematics game.

2. Smart Quotes

With more sophisticated CSS you can greatly enhance your website’s typography, an aspect that lots of people overlook. For instance, did you know that the quotation marks you are writing in your code are actually “primes” which are used for measurements and coordinates? When using “q” tags in HTML for quotations, you can automatically insert proper quotation marks (so-called smart quotes) before and after the quotation.

q {
    quotes: "“" "”";
}

This is especially useful for multilingual websites where you have to deal with several sorts of quotation marks, e.g. in German, quotes look like this: „some quote“. To automatically insert quotation marks for a specific language, you have to set the lang attribute in your HTML code, for example lang="de" (mostly on the html tag itself). In your CSS code, you can specify the quotation marks for each language:

q:lang(de) {
    quotes: "„" "“";
}

Here is some more information about smart quotes.

3. CSS Hover Effects

Surely some of you have a portfolio where you show off your projects in some kind of grid or gallery. For grids, most people use pretty heavy JavaScript libraries which aren’t necessary anymore since we have Flexbox. With Flexbox, you can create grids that work in every modern browser and do not require JavaScript. Here is a cool example which also features nice hover effects:

Flexbox Grid with Pure CSS Hover Effects

4. File Format Icons

Next up there is a trick which uses no special features but a clever combination of selectors: Just with CSS you can display a little file format icon next to download links.

[href$=".pdf"]::after{
    content: " " url("pdficon.png");
}

This snippet works in over 96% of all browsers.

5. CSS Arrow

Another similar CSS snippet lets you display an arrow next to external links:

a[href ^= 'http']:not([href *= 'yourdomain.']) {
    background: transparent url(arrow.svg) no-repeat center right;
    padding-right: 16px;
}

Pretty useful, isn’t it?

6. CSS Circular Menu

Designing navigation menus that work well on mobile devices is pretty hard, and hamburger menus are not the best choice. Another type is the circular menu. There is a great example by Sara Soueidan on CodePen:

Simple Circular Menu

This example uses nothing more than CSS, requires no JS, and the animation displays smoothly also on mobile devices. It’s probably not the best solution for normal content websites since it’s limited to only a few items, but for web apps it is a great alternative to tabbed navigation and hamburger menus.

7. Gooey Menu

Speaking of circular menus, there is a similar one on CodePen with a “gooey” effect done with pure CSS and SVG filters, and it looks awesome:

Gooey Menu

It is also a good example for the possibilities we have with modern CSS3 and SVG.

8. CSS Modals

Besides menus, there are other interface elements you can create using only CSS, e.g. modals. These CSS modals do not require JavaScript, and are compatible back to Internet Explorer 8. They adapt to the screen size and look great on mobile devices unlike most “lightbox” or modal plugins you find out there.

9. Pure CSS Parallax

One of the web design trends of 2015 was the parallax scrolling effect. It looks great, but is a bit sluggish sometimes, especially on mobile devices. Instead of relying on a JavaScript library, you can make a parallax effect with pure CSS:

Pure CSS Parallax Scrolling

10. CSS 3D Model

All the tricks mentioned here show how powerful CSS has become, but the last example is by far the most mind-blowing: an interactive 3D model of the solar system!

CSS 3D Solar System

It uses (almost) only CSS and displays absolutely smoothly. Although this is an awesome example of the possibilities we have with CSS, this is nothing you want to do in reality. For such complex visualisations, there are better technologies like Canvas and WebGL.

Final Words

As you can see, you can do a lot with pure CSS and surprisingly, also lesser known features are well supported. Using CSS instead of JavaScript, whenever possible, has some huge advantages: Unlike JavaScript, CSS cannot be turned off, thus providing a better user experience for people who decided to do so for whatever reason. CSS animations, transitions and transforms are hardware-accelerated by default and with modern CSS you can leave out heavy JavaScript libraries.

I hope this article was helpful and you found some inspiration.

Author Bio

Anselm Urban is a web designer and developer from Görlitz, Germany. Since 2009 he has been designing websites. It is his passion to create not only websites that look good but are beautiful by functionality. He works on several projects, some of his own, some for clients.