data-tooltip="…". With that in your markup, you can then place the following into your CSS to display the tooltip text inside the
Quite self-explanatory, right? Of course, there is more code needed to actually style the tooltips but fear not, there is an awesome, pure CSS library for this exact purpose called Hint.css.
2. (Ab)using Custom Data Attributes and the
We already used
attr() for tooltips but there are some other use cases for it too. In combination with data attributes, you can build a thumbnail image with title and description using just one single line of HTML code:
<a class="caption" href="#" data-title="Vulture" data-description="...">
<img src="img.jpg" alt="Illustration"/>
Now you can use the
attr() function to display the title and description:
3. CSS Counters
What you can do with CSS counters seems like magic. It is not the most well-known feature and most people probably would guess that it is not so well supported but actually, every browser supports CSS counters:
While you should not use CSS counters for ordered lists (
4. Frosted Glass with CSS Filters
With iOS 7, Apple brought us the “frosted glass” effect — translucent, blurry elements that look like a frosted glass window. This effect is starting to appear in many of places, inspired by Apple’s implementation. Recreating this effect is a bit tricky — before there were CSS filters, you had to create the frosted glass effect with blurred images. Now that CSS filters are fully supported by almost all major browsers, it is much easier to recreate this effect.
In the future, we could create similar effects using backdrop filters and the filter() function which are both currently only supported by Safari.
5. Using HTML Elements as Background Images
Normally, you would specify a JPEG or PNG file as background image or maybe a gradient. But did you know that with the
element() function, you can also use a
<div> as a background image? Currently, the
element() function is only supported by Firefox:
6. Smarter Grids with
Fluid grids are a great thing but there are some serious problems. For instance, it is impossible to have a gutter on the top and bottom that is the same size as a gutter on the left and right. Also, the markup is really messed up, depending on which grid system you use. Even flexbox alone is not the ultimate solution but with the
calc()function which can be used as a value in CSS, grids can become much better. In this tutorial here at SitePoint, George Martsoukos shows some practical examples, such as a gallery grid with perfect spacing. Using CSS preprocessors such as Sass, putting together a creative grid system can be incredibly simple and easy to maintain. With browser support also being nearly perfect,
calc() is a handy feature you should definitely use.
position:fixed Elements with CSS
Another use case for the
calc() function is aligning elements with a fixed position. For example, if you have a content wrapper with fluid spacing to the left and right, and you want to precisely align a fixed element inside of that wrapper — you’re going to have a hard time figuring out which value to choose for the “right” or “left” property. With
calc(), you can combine relative and absolute values to perfectly align the element:
margin: 0 auto;
right: calc(50% - 530px); /* 50% - half your wrapper width */
8. Animations with
To make the UI of a website or app more attractive, you can use animations but the standard easing options are pretty limited. For example,
"ease-in-out". Things like bouncy animations aren’t even possible with the standard options. With the
cubic-bezier() function, you can animate elements exactly the way you want.
There are two ways to use
cubic-bezier() — understanding the mathematics behind it and building it yourself, or using a cubic-bezier generator.
Honestly, I’d go with the latter.