Get Started with CSS 3

Tagged:  

While CSS 3 does not yet have full browser support (currently Opera and Safari are leading the way with FireFox said to be adding support in version 3.1) you may want to look into CSS 3 now to get ready for it. Well, over at webmonkey.com they have put together a nice tutorial to get you started.

Below is an excerpt from the post.

Rounded Corners

The number one rule of Web 2.0: If it has rounded corners, it's modern.

Say what you will about the design aesthetics of rounded corners, at least with the new border-radius rules you won't have to resort to images and JavaScript to get that web 2.0 look.

Say you have some HTML that looks like this:

<p class="r-box">Try doing this without images</p>

Add this style definition to round off the element:

.r-box {
	background-color: #666; 
	color: #fff; 
	line-height: 20px; 
	width: 200px; 
	padding: 10px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

Here's a live demo for those of you with Firefox or Safari:

Try doing this without images

If you're using a different browser here's a screenshot of how Safari displays the above block:

Image:css3_shot1.jpg



So what did we do? Well the first five lines are your normal CSS 2 declarations to give things a bit of style. It's the last two lines we're interested in. The actual CSS 3 declaration is border-radius. Until the specs are finalized the various browser manufacturers have enabled the features via prefixes -- the -moz- prefix is what Firefox uses and the -webkit- prefix is for Safari.

The rule works like this (where TopLeft, TopRight, etc... is a numeric value in pixels):

border-radius: TopLeft TopRight BottomRight BottomLeft;
border-radius: TopLeft BottomLeft+TopRight BottomRight;
border-radius: TopLeft+BottomRight TopRight+BottomLeft;
border-radius: ALL;

So in our case we used the later rule, but if you want just two rounded corners, you would do this:

-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;

Note: as of this writing, the W3C is planning to move toward the syntax Mozilla uses, rather than that of Safari. Because the border-radius spec is not finalized, Opera chose not to support it in Opera 9.5.

The nice thing about border-radius is it degrades gracefully. If a browser doesn't understand it, it simply renders a square box.

You can read the full post here.

So, use this tutorial to get prepared for CSS 3 (if IE ever gets their act together) as it will really make your pages look very nice.

[...] - Get Started with CSS 3 saved by Rstyle442008-09-24 - Stalker update for 2008-09-09 saved by recallruch2008-09-21 - CSS [...]

[...] public links >> css3 CSS-3 özellikleri neler? First saved by Kairi13578 | 12 days ago Get Started with CSS 3 First saved by slinkysmall | 14 days ago IdeBagus First saved by mmonter | 16 days ago [...]

[...] box-shadow ? Transformations ???????? Saved by klaasvantveld on Wed 25-2-2009 Get Started with CSS 3 Saved by mrshl on Mon 23-2-2009 CSS3 selectors implemented in Firefox 3.1 Saved by itin on Thu [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.