10 easy yet amazing CSS tips to embellish your website

Font Smoothing

A very simple, yet efficient way to make your font look smoother.

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Source: David Walsh

Fade in 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

Icon fonts embedding

Using icon webfonts is super easy. The first thing to do is to download a font. In this example I’m using the amazing MFG Labs font that you can download for free here. Feel free to browse the collection linked below if you prefer to use another font.

Once done, upload the files on your webserver and add the downloaded stylesheet to your website. For better performance, I recommend that you copy/paste the content of the stylesheet into your website’s main style.css file.

And finally, you simply have to drop the markup in your html file. Below is an example of creating two icons with links to my Twitter and Facebook profiles.

<a href="https://twitter.com/catswhocode"><i class="icon-twitter_circle icon2x"></i></a>
<a href="https://www.facebook.com/catswhocode"><i class="icon-facebook_cricle icon2x"></i></a>

Circular images

A super easy way to display any square image in a circular form.

The HTML

<img class="circular-square" src="woman.png" />

And the css:

.circular-square {
  border-radius: 50%;
}

Source: 6 Revisions

Glow text

This might be a bit “too much”, but it’s still quite interesting.

.glow{
        color: #fff;
        background-color: #474747;
        text-shadow: #fff 0 0 10px;

Source: CSS3 Gen

3D Text

A text in 3D, perfect for a site logo or a title.

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Source: Mark Dotto

Animated background image

A very simple trick to give life to any background image.

#cloud-scroll {
width: 200px;
height: 200px;
background: url(clouds-full.png) repeat-y;
-webkit-animation: backgroundScroll 20s linear infinite;
animation: backgroundScroll 20s linear infinite;
}
 
@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}
 
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}

Source: HTML5 and beyond

Text stroke effect

Using the .text-shadow property to create a stroke effect in no time. Who needs Photoshop anymore?

.stroke{
        font-size: 2em;
        font-family: 'Oswald', sans-serif;
        color: #fff;
        text-shadow: 1px 1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, -1px -1px 0 #333;

Source: HTML5 and beyond

Shake element

Shake any element using pure CSS. Useful if you need to catch the attention of a visitor on a specific action, such as an error in a form.

.face:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

Source: CSS Tricks

Rotate elements

Some extremely easy-to-do eye candy. Can look really cool when used on the :hover pseudo-class.

.rotate{
        transform: rotate(30deg);
}

Source: The art of web