An overview of CSS3 Rules and Properties for the web designers

css3 Rules
There are several important milestones that have shaped the direction of the web designer. Multiple tools have been helping them to create flexible and accessible websites. One such important tool amongst all is the CSS3 (Cascading Style Sheets). CSS3 offers enhanced flexibility in the presentation of website content. In a nutshell, it makes everything in a website appear good. It helps the designer and the developer to publish content in different presentation formats based on the internet devices or browsers.

CSS is the basic tool for every web designer. The best part is they can make any changes to a global CSS style sheet and also automatically modify style elements on other web pages. It enables the designer to maintain their web pages efficiently. Besides, it’s a clean coding technique which works well for improved ranking by any search engines.

Not only this, when CSS segregate the website’s content from its own designing language, it drastically lessens the file transfer size. For the web designer therefore, this significant tool becomes an essential in their everyday activities. With CSS3 it becomes easier for them transform any design and expose it to several possibilities which were difficult with the traditional techniques.

Primary CSS3 Rules for Web-Designers:

@Font Face Rule:

This property of CSS3 is perfect for transformation and every designer and developer should know it thoroughly. Although there had been some licensing issues with Face Font initially but now it can be easily formed with the basic @ Font Face code. Moreover, it can be used every type of fonts that are available.


The greatest advantage of clearfix is that it helps designer to work individually with each and very HTML element. Besides, the most convenient way to manage floats is through clearfix declaration.

@KeyFrame Rule:

This rule is ideal if the designers intend to create animation. While creating animations they can modify a set of CSS3 styles multiple times. The modifications can be quantified with keywords or percent from 0% to 100%. Usually when the animation starts it is 0% and when the animation finishes it is 100%.

However, you must define both the 0% and 100% selectors in order to get the best browser support.

Colour: RGBA ():

This is one of the new rules for setting colors. The web designer can get their work done smoothly as they have the option of specifying the denseness of a Colour. This rule functions well with safari 3 and with all the latest version of Firefox.

@Media Rule:

This rule works for creating responsive and adaptive web design. The best part about @Media property is that designers can point out styling for any web page they want to make eespecially when the page is being printed. It also helps them to adjust any design according to the user’s view port size through the use of media properties called min-width.


A well designed page can get spoiled if there is a dotted line across the web page while clicking on any link element. The best way to prevent this is to use the outline CSS3 rule. However, while using this rule it is important to add focus states to all the element links.

Gradient Fill:

With gradient Fill, designers can get wonderful effects on their design. Although this property does not support some of the major browsers but soon it will start supporting. The best that the designer can do with Gradient Fill is to make menu design.

Common CSS3 properties:

Multiple background images:

CSS3 enables the designer to add multiple background images on any element link. The browsers that it supports are Chrome 2+, Opera 10.5, Safari 1.3, Firefox 3.6 and IE9 Beta.


This property helps to show how much opaque an element can be. To understand the level of opaque, there is a value of 0 which means it is completely transparent and the value of 1 which means the element is completely opaque. This property is supported in Chrome1, Opera 9, safari 1.2, Firefox 1.5 and IE9 Beta.


Text-shadow adds a shadow to a hypertext, with the option of colour of the shadow, direction and the amount of blur. Text-shadow is supported in Chrome 2, Opera 9.5, Safari 1.1 and Firefox 3.1.


Box shadow helps to put shadows in an element. It is quite similar to text shadow. It supports Chrome3+, Opera 10.5, Safari 3, Firefox 3.5 and IE9Beta.


It is introduced as a new colour model in CSS3. This property helps to specify the level of opacity along with colour value. RGBA is supported in Chrome 3+, Opera 10, Safari 3.2, Firefox 3+ as well IE9 Beta.

Apart from these properties, there are many more which are on the process of development. With such wide range of functionality, CSS3 is a wise choice for every web designer and developer. If you are web designer reading this blog post, you should definitely start working with CSS3 to make your website look better, load faster and rank higher. How many of you are taking advantage of CSS3 in your Web-design??

This is a guest post by William from Big Eye Deers. If you would like to write for ShoutMeLoud, check guest submission guidelines.

Subscribe on Youtube

Article By
William Johnson belongs to the most creative field of digital media – Web Design. Currently he is obsessed with the latest trend in ecommerce site design and development, online marketing, Magento ecommerce and lots more. William also runs free consultation programs on web designing tips, Internet marketing trends and more for his set of readers.