RSS

Learn CSS3 syntax quickly and save typing

23 Feb

Those who have done some basic level of web development must know about CSS, well many websites starts to use CSS 3 for their content higher and higher even though browser support is somewhat in the phase of transition.

Consider following CSS 3 code which will give rounded border to the applied class.

.box_round 
{
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px;
}

As indicated above -webkit and -moz are called vendor prefixes they target specific browsers since at the moment browser support is somewhat different between webkit based browsers and mozilla based browsers. Some people wonder why we need,

border-radius: 12px;

actually we insert that because in future all the browsers will be standardized to that piece of code and -webkit , -moz versions will be deprecated. so we need to make sure it is inserted in our code releases.

However with CSS 3 you can do many more things but remembering the syntax is not quite trivial as we have used to in CSS 2 I found there is a great online resource that makes the job easy for you its http://css3please.com/ website which gives number of CSS 3 code snippets ready to use quickly in your CSS 3 code.

Advertisements
 
Leave a comment

Posted by on February 23, 2012 in CSS3

 

Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: