Follow us on

The best web 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 very useful.

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 correctly.

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 CSS3 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;
}

css3 Multiple Backgrounds

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.

Transitions

One of the biggest outcries with the decline of Flash is the lack of animation or transitional properties in CSS3. 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.

Continue…

jamesgeorge

Author

WOW

GO
Q