Some days ago no one imagined a shadow effect or a curved element design without a graphics software but now you easily get these effects by using CSS3 property. CSS3 has some core properties that give an eye catching design.
The border-radius property:
The border-radius property is a W3C standard property of CSS3. aThis property gives a curve radius of a border. You can apply it on any element of HTML which has a border property like <div>, <button>, <img> and any other block element of HTML. It receives pixel (px) as a value.
Syntax:
border-radius: 19px; /* 19px for all corner of border */
border-radius: 19px 20px 21px 22px; /* left top=19px right top=20px
bottom left=21px bottom right=22px */
border-top-left-radius: 19px; /* 19px for top left corner */
border-top-right-radius: 19px; /* 19px for top right corner */
border-bottom-left-radius: 19px; /* 19px for bottom left corner */
border-bottom-right-radius: 19px; /* 19px for bottom right corner */
Example:
Here is an example that shows a rounded button and a curved div element with the help of the border-radius property.
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style>
#btn{
padding: 15px;
background: rgba(13,255,19,.6);
border-radius: 21px 31px 41px 51px;
}
#dv{
height: 200px;
width: 400px;
background: rgba(20,30,200,.4);
border-radius: 41px 0px 101px 0px;
text-align: center;
}
</style>
</head>
<body>
<input type="button" value="rounded" id="btn"/>
<br/> <br/>
<div id="dv">Curved</div>
</body>
</html>
Output:
Discussion:
Even the border-radius is a W3C standard property; you should use a browser prefix.
-webkit-border-radius: 19px; /* for safari & chrome */
-moz-border-radius: 19px; /* for mozilla firefox */
-ms-border-radius: 19px; /* for internet explorer */
-0-border-radius: 19px; /* for opera */
border-radius: 19px; /* fall back */Hover:
The :hover selector is a very important in CSS3. It gives the hovering effect on an element like scripting languages do. You already familiar with :hover as a pseudo class in CSS2.The :hover selector is a great feature that makes a web page more interactive.
Syntax:
Element-name:hover{…..}
Example:
Here is an example that shows the hovering effect on the previous code.
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style>
#btn{
padding: 15px;
background: rgba(13,255,19,.6);
border-radius: 21px 31px 41px 51px;
}
#dv{
height: 200px;
width: 400px;
background: rgba(20,30,200,.4);
border-radius: 41px 0px 101px 0px;
text-align: center;
}
#btn:hover{
background: rgba(13,255,19,1);
border-radius: 51px 41px 31px 21px;
}
#dv:hover{
background: rgba(20,30,200,.7);
border-radius: 0px 101px 0px 41px;
}
</style>
</head>
<body>
<input type="button" value="rounded" id="btn"/>
<br/> <br/>
<div id="dv">Curved</div>
</body>
</html>Output:
Fig: mouse hover on the button and then there is a change of shape and color.
The text-shadow property:
Sometime ago, designers used an image to show the text shadow with the help of graphics software. Now CSS3 makes it in the HTML code.
The text-shadow property gives a shadow of the text. It receives three values of x-axis, y-axis and the spread of pixels. It can receive a negative value then the shadow works into the inner side of the text. The lowest value of spread ensures the sharpness of shadow of the text. The highest value of spread blurs the color.
Syntax:
text-shadow: 2px 4px 1px rgba(213,127,207,.7);Example:
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style>
#txt{
font-style: italic;
font-size: 3em;
font-weight: bold;
color: rgb(255,101,133);
text-shadow: 6px 6px 2px rgba(255,101,133,.7);
}
</style>
</head>
<body>
<p id="txt"> Hello how are you?</p>
</body>
</html>
Output:
Here is an example which shows the shadow on opposing sides. It is just a game of pixel manipulation. You should aware about the pixel declaration of offset values and get the fun of text shadow.
<pre><code><!DOCTYPE html>
<html>
<head>
<title>css</title>
<style>
#txt{
margin-left: 2em;
position: absolute;
background: blue;
font-style: italic;
font-size: 5em;
font-weight: bold;
color: rgb(255,101,133);
text-shadow: -11px 3px 0px #000, -14px 7px 0px #FFF;
}
</style>
</head>
<body>
<p id="txt"> Hello how are you?</p>
</body>
</html></code></pre>
Output:
The box-shadow property:
The box-shadow property is a W3C standard property so it doesn’t need any browser prefix. It gives a shadow effect on any html block element. It receives five values and the values are:
X offset: It can receive negative or positive value. Negative value gives shadow in right side and positive gives shadow in left side.
Y offset: It also can receive negative or positive value. Negative value gives shadow above of element and positive gives shadow bellow of the element.
Blur radius: Blur radius specifies the sharpness of the shadow. It does not support negative value. The lowest value indicates the sharper the shadow.
Spread length: The spread length specifies the length of all directions where color spreads.
Color: This is the color value.
Syntax:
box-shadow: 3px 3px 2px 11px rgba(123,234,213,.7);
box-shadow: 3px 3px 11px rgba(123,234,213,.7); /* without blur radius */
Example:
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style>
#dv{
width: 400px; height: 400px;
border-style: solid;
border-color: rgba(231,39,49,.2);
border-right-width: 11px;
border-bottom-width: 11px;
border-left-width: 0px;
border-top-width: 0px;
border-radius: 17px;
background-color: rgba(231,39,49,.3);
box-shadow: 11px 11px 7px rgba(231,39,49,.3);
}
</style>
</head>
<body>
<div id="dv"></div>
</body>
</html>
The post CSS 3 box model appeared first on Tech-info24.com | Popular Newsletter on Information Technology News.