5 Sexy CSS Tips You Need In Your Life #2

Here we go again…

Tips and tricks, freshly squeezed from the minds of our developers, to help you solve a few problems or simply give you that little bit of inspiration for your latest project.

Replace text with an image

Great for SEO, replace text with an image so search engines will see and read the text but your visitors will see a beautiful background image. Useful for when only a background image will do and you’re unable to provide alt tags.

.my-class {
 text-indent: -9999px;
 background: url('image.jpg') no-repeat;
 width: 500px;
 height: 100px;
}

Cross browser opacity

Make sure any opaque elements display at the right opacity on all browsers down to IE8.

.opacity-class {
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

Vertical center with line-height

If you’re using a fixed height, this is an easy way to vertically center the text contained in that element. Simply set the line height of the container to match its actual height.

.vertical-center {
 height: 40px;
 line-height: 40px;
}

Add delimiters between navigation items with CSS :before

Save adding extra list items in menus made by lists by simply prepending your delimiters as CSS :before content.

.menu li:before {
 content: "//";
 position: relative;
 left: -1px;
}

Create tooltips with HTML5 and a CSS pseudo element

Did you know that you can turn data attributes into styled elements using just CSS? A really simple way to create interactive tooltips.

This is a cool text with a custom <a data-tooltip="my tooltip">tooltip.</a>

a {
 position: relative;
 text-decoration: none;
}

a:after{
 content: attr(data-tooltip);
 position: absolute;
 bottom: 130%;
 left: 20%;
 background: #ffcb66;
 padding: 5px 15px;
 color: black;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 white-space: nowrap;
 opacity: 0;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4 ease;
 transition: all 0.4 ease;
}

a:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #ffcb66;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 transition: all 0.4s ease;
 opacity: 0;
 left: 30%;
 bottom: 30%;
}

a:hover:after{
 bottom: 100%;
 }

a:hover:before{
 bottom:70%;
}

a:hover:after, a:hover:before {
 opacity: 1;
}