Useful CSS Snippets and Techniques

The great thing about CSS is that it has simplified the way that websites can be designed. What is even better is that you can take a step further and find ways that you can simplify the way that you can use CSS. There are plenty of CSS snippets available that you can get from various sources, which you can use in order to get your project started.

CSS Techniques That You Can Use

There are many CSS techniques that you can use right away. You don’t have to be a professional web developer in order to use them. What’s even better is the fact that there are plenty of places where you can get the CSS snippets that you can use. There are many websites that offer them. To help you out here are some useful CSS techniques that you might want to try on your own.

The Transform Property

By using the transform property you can apply some changes for element on a page with using a 2D or even a 3D effect. Here is a sample code that you can use for this property:

/* make something larger */
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);

    /* make something rotate */
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);

Like other properties in CSS, you might encounter issues when it comes to browser support for this property. IE8 and below will not support but most modern browsers will.

Varying Colors Based List Position

One great effect that you can have when you are using CSS is to have the items on a list to have different colors. The colors would be based on their position on the list. This would go well with a menu. Here is a sample code for a static website:

.home a { border-color: #636393; } 
.tutorials a { border-color: #B5222D; } 
.news a { border-color: #D4953C; } 
.about a { border-color: #609591; } 
.contact a { border-color: #87A258; }

This would not work with a WordPress website which is very dynamic. You would need a different code for that.

li:nth-child(1) a { border-color: #636393; }
li:nth-child(2) a { border-color: #B5222D; }
li:nth-child(3) a { border-color: #D4953C; }
li:nth-child(4) a { border-color: #609591; }
li:nth-child(5) a { border-color: #87A258; }

Technically what the code is saying is that the text on a specific position would be of a specified color. The biggest issue with this is again, the problem of support and compatibility. Not all browsers would support especially IE* and below. For some designers, that is not an issue since the enhancements that CSS can bring is non-essential to the function and purpose of the site. There are cases, however, when it really is needed.

Here is a code with a solution with the problem of compatibility with IE8:

li a { border-color: #636393; }
li+li a { border-color: #B5222D; }
li+li+li a { border-color: #D4953C; }
li+li+li+li a { border-color: #609591; }
li+li+li+li+li a{ border-color: #87A258; }