Outstanding modern CSS techniques

In case you’re looking for an agency to create a modern, visually appealing website, check out https://ynd.co/.

Custom variables

CSS variables are a real timesaver when creating a website. Simply define your variables and use them as much as needed in your stylesheet. The code below should be self-explanatory for most of you, but if you need further information feel free to check this quick guide.

<p class="custom-variables">CSS is awesome!</p>

:root {
  /* Place variables within here to use the variables globally. */
}
.custom-variables {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}

Source: Codepen

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

Pure CSS donut spinner

These spinners are very popular when it comes to letting visitors know that the content is loading. You might be tempted to use an image, but in terms of website speed it is way better to do it using CSS. Nothing complicated here, just take a look at our HTML first:

<div class="donut"></div>

…and the corresponding CSS. Need some more info about CSS keyframes? Here you go!

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

Source: Codepen

Fully centered content using Flexbox

Centering content both vertically and horizontally is nowadays very easy using display:flex. Here is how you do it, using some HTML:

<div class="flexbox-centering">
  <div class="child">Centered content.</div>
</div>

…and the corresponding CSS:

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Source: Codepen

Responsive grid

display:grid makes it easy to create grids. Using the fr unit, the grids can be made responsive in order to fit any kind of display.

Here’s how our grid HTML looks like:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

And the CSS:

.grid {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em; 
}

.grid-item {
  background-color: orange;
}

Source: Smashing Magazine

Curve text around a floated image

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%);
}

Source: WebDesigner Depot

Unselectable text

If for some reason you don’t want visitors to be able to select a certain portion of the content, you can use CSS. Although your text will still be selectable if the user displays the page source, I’ve heard so many clients wanting such functions on their website that I’m sure this will be useful to some of you.

Here’s our HTML:

<p class="unselectable">You can't select me!</p>

And some quick and easy CSS:

.unselectable {
  user-select: none;
}

Source: Codepen