17 Jun 2011 1 Comment
You Can Use Border Radius and Box Shadow in CSS3 Today
CSS 3 still become a recommendation in but today you can use some its features that run in almost modern browser today. These features including round corner or border radius and also box shadow
Border Radius
Border radius will allow you to create a rounded corner of your rectangle. Before this supported in CSS, if we want to make a round corner, we have to use couple of images and do some tweak here and there. To create a round rectangle in CSS, all you need to do is to put number of pixel in the border radius. The bigger the number, the bigger round you will get. Here’s the sample of the code
.roundBox{
background-color:#8D38C9;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height:200px;
width:200px;
}
And this is the result of that code
This feature now works on Firefox, Safari, Google Chrome and IE9. I have tried in IE 7 and 8 but it doesn’t work. So if you still using IE before IE9, I recommend you to update your browser.
Box Shadows
Box Shadows will allow you to create a shadow underneath an element. Before this feature supported in CSS3, if we want to create such shadows, we have to use couple of images and combine it. To create such shadow, you can use this code.
The property of box-shadow takes 4 properties, the first one is the x and Y offset and the third is the blur radius of the shadow. The higher the number, the fuzzier the shadow you will get. The last property is the color, this properti will allow you to change the shadow color, The shadow color is not always black, that’s why you can insert your color to the property.
Here is the code
.roundBox{
background-color:#8D38C9;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height:200px;
width:200px;
/* this is the shadow part*/
-webkit-box-shadow: 5px 5px 5px #7A5DC7;
-moz-box-shadow: 5px 5px 5px #7A5DC7;
box-shadow: 5px 5px 5px #7A5DC7;
}
And this is the result
Go and try it, let see if these feature already supported by your browser.
Jun 28, 2011 @ 09:14:41
I was curious if you ever considered changing the structure of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or two pictures. Maybe you could space it out better?