September 29, 2016

8 Clever Tricks with CSS Functions!

CSS is capable of much more than many web developers realise.

The stylesheet language continues to get more and more powerful with every passing year, bringing functionality to the browser that otherwise would be fulfilled by JavaScript. In this article, we’ll take a look at eight clever tricks with CSS functions that do not require JavaScript at all.

Source on Sitepoint.com

Pure CSS Tooltips

A lot of websites still use JavaScript to create tooltips but it is actually much easier with CSS. The simplest solution is to provide the tooltip text in a data attribute in your HTML code, e.g. data-tooltip="…". With that in your markup, you can then place the following into your CSS to display the tooltip text inside the attr() function:

.tooltip::after {
  content: attr(data-tooltip);
}

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 attr() Function

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"/>
</a>

Now you can use the attr() function to display the title and description:

.caption::after {
  content: attr(data-title);
    ...
}

Here’s a working example of a thumbnail with animated captions that show on hover:

Note: Generated content could be problematic in terms of accessibility. This article on accessibility support for CSS generated content is a useful read on that very topic.

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 (<ol>), counters are great for things like pagination or displaying numbers underneath items in a gallery. You can also count the number of checked items which is quite impressing given how little code you need (and no JavaScript):

See the Pen Selection CSS Counter by Will Boyd (@lonekorean) on CodePen.

CSS counters are also great for dynamically changing numbers in a list of items which can be reordered by dragging and dropping:

See the Pen CSS Counters drag-and-drop demonstration by SitePoint (@SitePoint) on CodePen.

Just as with the last example, remember — generated content could be problematic in terms of accessibility.

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.

Back