For Live Demo: Click here
Border Radius
- “border-radius: 15px;”
- For Mozilla Browser: “-moz-border-radius: 15px;”
- For Webkit Browser: “-webkit-border-radius: 15px;”
CSS Code:
.borderRadius
{
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
Pressed Text
- “text-shadow: 0 1px 0px #fff, 0px -1px 0px #000;”
CSS Code:
.pressedText
{
text-shadow: 0 1px 0px #fff, 0px -1px 0px #000;
font-size: 28px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Text Shadow
“text-shadow: 2px 2px 3px #999”
Text shadow has 4 values:
- x offset (2px)
- y offset (2px)
- Blur (3px)
- Color (#999)
CSS Code:
.textShadow
{
text-shadow: 2px 2px 3px #999;
}
Box Shadow
- “-webkit-box-shadow: 5px 5px 5px #333;”
- “-moz-box-shadow: 5px 5px 5px #333;”
CSS Code:
.boxShadow
{
-webkit-box-shadow: 5px 5px 5px #333;
-moz-box-shadow: 5px 5px 5px #333;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
RGBA
“rgba(255,0,0, 0.2);”
Text shadow has 4 values:
- Red Color (255)
- Green Color (0)
- Blue Color (0)
- Alpha [1 = Opaque and 0 = Transparent] (0.2)
CSS Code:
- For the browsers which do not support CSS3: “background: #ff0000;”
- for the browsers with CSS3 support: “background: rgba(255,0,0, 0.2);”
.rgba
{
background: #ff0000 !important;
background: rgba(255,0,0, 0.2) !important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}