Jalokim
Box border radius Border radius is a special features that comes with CSS3. What it does is render completely fluid corner images for your div boxes. This means that you no longer need to use a large quantity of corner images to get a web 2,0 rounded edges effect. | Preview: The code is really simple. and for mozilla all you need is 1 line of text. For the first example with all the borders the same radius all you need is to add this code to your CSS id or class.
the code used to work joined, just like the mozilla example in beta css3 versions. But the current live version only supports separated corners In the second image example we can see the different borders even though its on 1 single div. This is achievable by add different radii classes for each corner
that is the whole magic behind rounded corners is CSS3. Internet Explorer does not support these changes. If you are using IE (and especially IE6) I recommend converting to firefox , Safari, Chrome or Opera. Text-Shadow Effect Another big thing that CSS3 brings to us is Text-Shadow effect. With this feature, we can create Photoshop like effects without using images! Well, here is an example... Now, lets have a look at the codes... HTML :
Pretty simple, isn't it? We have paragraph named 'example-text' having a small sentence in it. Lets see how the CSS looks...
Here, we just apply 'text-shadow' property and we are done! The values 3px and 3px are representating the horizontal and vertical offset respectively and the 2px shows the sharpness of the shadow. Its pretty similar to box-shadow Here is some more interesting stuff with text-shadow. Its multi-text-shadow Here is a preview... and here is the CSS for it...
In above example, I've just repeated the values of text-shadow property separated by a comma. Box Shadow A big thing that CSS3 brings this time is box-shadow effect. CSS coders know that giving shadow effect was not possible without using background images that took hours to make perfect excluding the time they spend after making IE fixes But, now, with CSS3 box-shadow we can apply shadow effect to any element with just a line of code. Here is a preview ...and here is how the code looks HTML :
and the CSS code looks like this...
Here, we have a container called 'example-box' having 8px of margin and padding just to make it look neater We have fixed the width at 450px and applied a solid dark-gray border of 1px. Now, coming to the point, -moz-box-shadow is for applying shadow effect for mozilla and -webkit-box-shadow for other browsers like Opera, Safari, Netscape etc. As you notice, the property takes 3 lengths and a color as it’s attributes, the lengths are: 1) The horizontal offset of the shadow, positive value shows the shadow on the right of the box and negative value shows the shadow on the left of the box. 2) The vertical offset, a positive value puts the shadow below the box while a negative value puts the shadow on the top of the box. 3) The blur radius, it defines the sharpness of the box-shadow. If set to 0, the shadow effect looks the sharpest. More the value is set, less sharp the shadow effect shows Now lets have some more fun with this code We'll try to make a glowing edge effect. Here is the CSS for that...
Here, I've changed the border color to red and the shadow color to orange. In addition, I've set both horizontal and vertical offset to 0 and blur radius to 10px. This will make a Photoshop like effect on the box. The border will have a glowing edge effect. Here is the preview... @fontface - the new font-family @font-face isn't really CSS3 ... it uses CSS2 @improt settings to retrieve any font files located at your host. Font-face has been perfected with css3. Did you know that even though this trick is CSS2 IE6 still can't render it? But lets get to business: here is a preview: Now @font-face is a very intelligent system. This is its CSS markup:
Obviously (for forumotion members) a host will be required, like webs.com to fully use the system. As you can see the code merely imports your font file either directly from your PC:
Or if you don't have the font installed on your PC it imports it from your host:
to activate the font you need to mark the div that you wish to format as you would normally do... using a simple font-family script:
And thats how simple it is. I bet you all noticed that there is an IE hack for font-face... true. Since its basically CSS2 IE will support the font... but look again. IE has no clue what TTF(TrueType Font) is. It needs a special EOT font format. Unfortunately most major font sites don't provide fonts in EOT? now what? Luckily , there is a new site dedicated to web fonts www.fontsquirrel.com On that site you can obtain full font-face kits with CSS and upload files... nothing simpler. Thank you for reading this tutorial. Special credits to Ankillien who willingly helped in this article typing out half of it. Stay tooned for more CSS3 tips and tricks as well as recent news. Guest posting activated |