If you are a web designer then you will know how difficult it is to memorize a lot of stuff related to the Web Design and Development work. When talking about CSS3 you need to know that it has various declarations which will help you completely transform your website design and expose it to more number of possibilities which are difficult to be taken care of during the use of conventional techniques. If you are an experienced web designer then for sure you might have memorized loads of hacks, code syntaxes and snippets but with CSS3 in particular there are loads of declarations which can control the style and layout of your WebPages but are difficult to memorize. Here is a list of few CSS3 rules which every Web Designer and Developer should know.
1) @KeyFrame Rule
If you want to create animations then this is the key CSS3 rule for you. You can create animations with CSS3 by slowly changing the set of CSS3 styles several times. The changes are specified in percent or with the keywords from and to that resemble 0% to 100%. 100% is when the animation finishes and 0% is when the animation starts. If you want to make sure that you get the best browser support then you should at all times define both 0% and 100% selectors. If you want to bind the animation to the selectors or want to have control over the appearance of the animation then you can make use of the relevant animation properties.
2) @ Media Rule
This rule is most commonly associated with creating adaptive and responsive web designs. With the help of the @Media property one can specify styling for the web page when it is being printed. You can as well adjust the design in accordance with the user’s viewport size by making use of the media properties such as min-width.
3) Adding Gradient Fill
This is an amazing effect that you can achieve with CSS3. As of now this is not having support for all browsers but soon it will. You cannot rely on this as of now for making any layout of web design because it is not supporting all the web browsers. You can as well stuff your menu designs with this stunning gradient fill effect.
4) @Font Face Rule
This property of CSS3 has proven to be of great use when it comes to transformations and it is a must know for all the web designers and developers. Initially because of the licensing issues with font it was not possible to make the best use of this property but now font styles can be easily formed with basic @font face code and can be used with all the fonts that are freely available.
5) Color :RGBA()
This is a new rule that has been added to CSS3 for color setting. Next to RGB nowadays it is as well possible to make use of RGBA. The A here abbreviates to Alpha in this rule. This CSS3 rule has eased the life of all the web developers as they now have the option of specifying the opacity for a color. Till date this rule had proven to work well with Safari 3 and all the latest versions of Firefox.
6) .Clearfix
If you are of the thought that Overflow: Hidden is not sufficient enough for managing the floats then a better and convenient way of managing this is the clearfix declaration. With the help of .clearfix declaration you can individually work with each HTML elements.
7) outline none
Your entire web design gets spoiled the moment you see a big dotted line that is spanning across the complete web page when you just click on any link element. So if you want to remove this then the a {outline: none ;} CSS3 rule can help you get rid of this. When using this CSS3 rule you need to make sure that you do not forget to add: focus states to the element links. If the dotted border is not a problem for you but you do not want it to span completely on the whole screen then you can simple add a {overflow: auto ;} to your CSS3 style sheet.