The Revolution of CSS.

[Rawr]

As far as I know, CSS has improved greatly for the web design world. But not for all browsers... In web design each browser has different CSS; Mozilla Firefox being the far greatest of them all. In this lesson I'm going to show you a few cool things to try with your web pages.​

This only works for Mozilla Firefox and Safari.

Adding Shadow to your boxes -

This will give your page a much more 3D look than just having plain old boxes.​

Code to add:

box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px;

Adding Rounded Corners to your boxes -

Yet another feature for adding a 3D look to your webpage.​

Code to add:

-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
 border: 1px solid #000;

Or you can control certain corners instead of doing them all by adding...

• topleft
• topright
• bottomleft
• bottomright

To the end of your "-moz-border-radius" so for example it would look like "-moz-border-radius-topleft" to curve only the top left corner.

And for your "-webkit-border-radius" you would add...

• top-left-radius
• top-right-radius
• bottom-left-radius
• bottom-right-radius

So you would be replacing the radius part of "-webkit-border-radius" and adding one of the items above. Example: "-webkit-border-top-left-radius" would be adding a curve to to top left again.

Adding Text Shadow -

Kind of a stupid one if you ask me, but it could be useful for making important text stand out from others.​

Code to add:

text-shadow: 2px 2px 2px #000;

Adding speech to your text -

If you're sight impaired or just want to have it say it for you because you're that lazy this is the code for you. Adding this to your CSS will allow the page to read of the text in the div you place this code to you.​

Code to add:

#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; } #voice-balance { -xv-voice-balance: left; } #speech-cue { cue-after: url(ding.wav); } #voice-rate { -xv-voice-rate: x-slow; } #voice-family { voice-family: female; } #voice-pitch { -xv-voice-pitch: x-low; } #speech-speak { speak: spell-out; }

Adding Columns for your text -
Unique feature, can make a large piece of text look not as big. This method has 2 features; one being you have no border in-between the columns or two, having a border separating the columns.

Code to add:
(without a border)

-moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em;

(with a border)

-moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black;

These are just a few of the examples I found the most interesting, and theres many more to learn about. If you want to learn more go to http://www.css3.info/ . This is were I read about these last year and I thought I'd spread the knowledge. And, no I didn't rip their shit, I made a guide from what I learned from their site.​

 

[SuF]

Very good layout and look ect. But this is not really a guide per say... Its more of just information about a very specific topic... You also do not really explain what CSS is or how to use it... So this is more a tool for people that already know CSS, making it less of a useful guide. But it is still good of course. D:

 

[Krzysiek23]

(...) this is not really a guide per say... Its more of just information about a very specific topic (...) this is more a tool for people that already know CSS (...)

This, however I find it useful, especially the 'speech' part. I've never thought about it. :embar:

 

[Rawr]

Thanks for the comments.

Also, SuF... I based this guide of the fact that people already know what CSS means and does.