Useful But Rarely-Used CSS3 Properties

If you aren’t already implementing these useful CSS3 properties on your websites, you should be. If you are not already using CSS3, know that CSS3 is not nearly as intimidating as you may think. These are easy to implement and bring tons of flexibility and features to designing your future website.

CSS3 tricks that shouldn't be ignored when building your website

Diligent designers stay up to date with the latest in web design and development. Staying on the cutting edge of the web can give you an advantage in your web design business and can even make your design work substantially easier and better. Most web designers know and use CSS to create beautiful websites that are browser-​​friendly and consistent across all platforms. Having said that, there are some CSS3 properties that aren’t used as often as you would expect. Despite their rarity, they are extremely useful.

CSS3: Multiple Backgrounds

Many designers don’t realize that you can implement multiple backgrounds into your website designs. This could have many creative and practical uses. Imagine using this with absolute positioning to align certain elements to different sides or corners. This could turn into an interesting design technique if used properly.

To implement multiple backgrounds, you need to define them in the body tag and separate them with commas. Specify the background selector and then point to the URL (usually in your images folder). I find that it is easier and less confusing to specify the orientation of each image if you do it directly after each image. Once you specify the repeat style, place a comma and then list the next URL. You can follow the same formula for the other images, and when you are done, end the statement with a semicolon just as you would for any other CSS style declaration.

body {
background:url(images/saver.png) left top no-repeat, url(images/anchor.png) right top no-repeat, url(images/dock.jpg) center top no-repeat;
background-size: auto, auto, cover;

The result is that the two images (the life preserver and the anchor) are placed in the top-​​right and the top-​​left of the browser. The last image in the sequence is placed on the bottom. I used the background-​​size property to show you how you can combine multiple backgrounds with other properties. You just have to remember to declare the size for each item. The anchor and life preserver are set to auto. The third image (the dock) is set to cover. With it being the last image, it will be on the bottom and fill the browser window. The other two images will stay the size they are intended to be and remain in the position that we specified.

CSS3: Transitions

One of the biggest outcries with the decline of Flash is the lack of animation or transitional properties in CSS. Well, this ends up changing in CSS3. Now, you can have smooth transitions between the different states of your elements. You can animate things such as box and text shadows, positioning, color changes, and more.

#main {
width: 300px;
padding: 5px ;
background-color: #F00;
border-radius: 7px;
-webkit-transition: background-color 5s;
-moz-transition: background-color 5s;
-o-transition: background-color 5s;
-ms-transition: background-color 5s;
transition: background-color 5s;

#main:hover {
background-color: #06C;

The result is that the background color starts out as red, which is what we specify as being the normal state of the main div. When we set the hover state to blue, we tell the background color to transition from red to blue over a period of 5 seconds. This creates a fade effect, and in the middle of the transition, the box will appear to be purple. CSS creates a surprisingly smooth transition from red to blue without any reliance on plugins or JavaScript. You can apply transitional effects to a lot of different properties, such as rotate, margin, and much more. This is essentially the foundation for cross-​​browser animation. The only thing to remember is that you set the transition in the original state, and not the hover state, which can be confusing to some people


RGBa is a way of defining the color of an object. Some prefer hex values, but the advantage of using the RGBa method is the ability to take advantage of the last element of the equation, which is the a, which stands for alpha transparency. This allows you to define transparent colors, which enables you to add an extra element to your design, creating a section that is partially transparent.

RGBa is easy to control. R, G, and B are the red green and blue values, just like any standard RGB color in Photoshop. To control the alpha, or transparency of the color, you can use a value anywhere from .1 for 10% to 1, which is 100%. The formatting for using RGBa in CSS is shown below:

background: rgba( 250,100,100, .5);
The box below is a mix of all three colors, which makes the result red/​pink, and the .5 value at the end sets the transparency to 50%. You can see that the box is transparent, because you can see the image bleeding through. This will create some interesting effects.

Read full article here: 5 Extremely Useful But Rarely-Used CSS3 Properties – DesignFestival.