box shadow example(s) - drop shadow
I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it.
Related Pages:
https://kruxor.com/view/code/Zj3OV/transitions-and-the-easy-way-to-apply-them/
https://kruxor.com/view/code/kMRLz/using-transform-scale-in-css-to-zoom-on-hover-over/
HTML
<h3>A pretty boring (basic) box shadow</h3>
<div class='demo-box box-shadow-1'></div>
<h3>This one is a bit more exciting</h3>
<p>playing a bit more with the blur and the distance and opacity of the shadow it make it look more shadowy (is that a word?) if not ill make it one now. </p>
<div class='demo-box box-shadow-2'></div>
<h3>Lets make it 3D!</h3>
<p>Ok this one is much cooler (can a shadow be cool, i think yes...), as it is interacted with (mouse over) you can see it appears to pop out a bit by increasing the blur shadow distance and opacity. Boom! :P</p>
<div class='demo-box box-shadow-3'></div>
<h3>Add some transitions and zoom and its crazy!</h3>
<p>Ok calm down, its just a shadow and a box but now its animated and transitioned... yes i know im just talking to my self... shh! :P</p>
<div class='demo-box box-shadow-4'></div>
CSS
.demo-box {
margin:10px;
height:100px;
width:100px;
border-radius:3px;
}
/* A pretty boring (basic) box shadow */
.box-shadow-1 {
box-shadow: 0px 1px 2px #000;
}
/* This one is a bit more exciting */
.box-shadow-2 {
box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.box-shadow-3 {
box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.box-shadow-3:hover {
box-shadow: 0px 10px 20px rgba(0,0,0,0.8);
}
.box-shadow-4 {
box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
transition: all 0.3s;
}
.box-shadow-4:hover {
box-shadow: 0px 10px 20px rgba(0,0,0,0.8);
transition: all 0.3s;
transform: scale(1.1);
}
A pretty boring (basic) box shadow
This one is a bit more exciting
playing a bit more with the blur and the distance and opacity of the shadow it make it look more shadowy (is that a word?) if not ill make it one now.
Lets make it 3D!
Ok this one is much cooler (can a shadow be cool, i think yes...), as it is interacted with (mouse over) you can see it appears to pop out a bit by increasing the blur shadow distance and opacity. Boom! :P
Add some transitions and zoom and its crazy!
Ok calm down, its just a shadow and a box but now its animated and transitioned... yes i know im just talking to my self... shh! :P