Advanced CSS tricks and techniques

Warning: some techniques contained in this article are still considered as experimental. Make sure to check the browser compatibility before you implement them on a production site.

Using SVG for icons

SVG is supported by all modern browsers and scales well for all resolution types, so there’s no reason to continue using .jpg or .gif images for icons. Note the use of the background-size property to scale the background image on the on container size.

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

Source: CSS Tricks

Fixed table layouts

A widely supported but surprisingly little-known property which changes the way the tables are rendered and gives you a sturdier, more predictable layout.

table {
  table-layout: fixed;
}

Source: CSS Tricks

Curve text around a floated image

The shape-outside is a CSS property that allows geometric shapes to be set, in order to define an area for text to flow around.

.shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

Here’s the result of the .shape class applied to the image:

Source: WebDesigner Depot

Intrinsic Ratio Boxes

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;  
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Source: AllThingsSmitty

Color fade on hover

A very easy way to make your links (or any other element) look better.

a {
 color: #000;
 -webkit-transition: color 1s ease-in; /*safari and chrome */
 -moz-transition: color 1s ease-in; /* firefox */
 -o-transition: color 1s ease-in; /* opera */
}

a:hover { 
 color: #c00;
}

Source: Matt Lambert

Style broken images

Broken images never look good, but it happens every now and then that one or two images on your site are broken. Using some advanced CSS, it is possible to style broken images and provide custom error messages to your visitors.

img {  
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

Look what can be achieved with that technique: way better than browsers’ default, right?

Source: Bitsofco.de

Empty and not empty attribute selectors

CSS3 makes it easy to apply different styles to an element, depending on whether a data-* attribute is empty or not. Have a look at the HTML code below:

<div data-attr="">
</div>

<div data-attr="value">
</div>

And now, our CSS, with specific styling for any div element with an empty data-attr attribute:

div {
  border: 1px solid gray;
  height: 100px;
  margin: 10px;
  width: 100px;
}

/* Empty attribute selector */
div[data-attr=''] {
  background: red;
}

/* Not empty attribute selector */
div:not([data-attr='']) {
  background: green;
}

Source: Vacheslav Starikov

Comma-Separated Lists

A little snippet to display an unordered list as a comma-separated list. Note the use of :not(:last-child) to ensure that the last list element won’t be followed by a comma.

ul > li:not(:last-child)::after {
  content: ",";
}

Source: AllThingsSmitty