//CSS
/*
When trying to give effects to your site / web page the box-shadow property in CSS can be a huge help.
If used properly it gives the div a very attractive finish and it has quite a few attributes to play around with
Find the code for simple modulations.
*/
<html>
<head>
<style>
#NoEffect{
height:100px;
width:500px;
background-color:red;
}
#Effect{
height:100px;
width:500px;
background-color:blue;
}
</style>
</head>
<body>
<center>
Effects using box-shadow
box-shadow: none | horizontal-shadow vertical-shadow blur spread color | inset | initial | inherit;
<br/><br/>
<div id="NoEffect">
No Effect
</div>
<br/><br/><br/>
<div id="Effect" style="box-shadow: 5px 5px 5px black;">
With Effects(firm shadow)
</div>
<br/><br/><br/>
<div id="Effect" style="box-shadow: 5px 5px 20px black; ">
With Effects(distant shadow)
</div>
<br/><br/><br/>
<div id="Effect" style="box-shadow: 5px 5px 5px 2px black; ">
4th parameter added ->spread : (size of the shadow)<br>
</div>
<br/><br/><br/>
<div id="Effect" style="box-shadow: 5px 5px 5px 15px yellow inset;">
6th parameter added->inset : (sets the shadow to inner instead of outer) <br>
</div>
</center>
</body>
</html>
No comments:
Post a Comment