CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.
Here are five techniques snatched from the future that you can put into practice in your website designs today.
- Border Radius: Probably the most common CSS3 feature currently being used is border-radius. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.Border-radius can also be used to target individual corners, although the syntax for -moz- and -webkit- is slightly different.
- Border Image: Border-image, as the name suggests, allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object.
- Box Shadow and Text shadow: Drop shadows: don’t you just love them?! They can so easily make or break a design. Now, with CSS3, you don’t even need Photoshop! The usage we’ve seen so far has really added to the design. Also, the text-shadow attribute is available for use on textual content
- Easy Transparency with RGBA and Opacity: The use of PNG files in Web design has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS. Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule.
- Custom Web Fonts with @Font-Face: There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule allows fonts to be called from an online directory and used to display text in a whole new light. This does bring up issues of copyright, so there are only a handful of specific fonts that can be used for @font-face embedding.
If you want read in detail then click this link. Push Your Web Design Into The Future With CSS3
If you want to follow the development of CSS3 then click this link. CSS3.info
One thought on “Push Your Web Design Into The Future With CSS3”
Great post with very good tips and tricks. Creating and maintaining a website is a tough task yet important. 'Pushing the site into future' is a nice article, necessary to follow the tips. Is it possible for all old websites too? I think I should get mine changed asap. 🙂 Thanks for the help. 🙂