Categories
CSS HTML Tutorials

Border-Radius, Text Shadow, Box Shadow, RGBA using CSS3

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;
}

For Live Demo: Click here

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.