box shadow example(s)

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

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 287 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
There is no way to happiness. Happiness is the way.
Unknown