Shadows are implemented in CSS3 with two different properties sharing similar syntaxes,
box-shadow
and
text-shadow
. Let's create another example to showcase how they work:
<!doctype html> <html> <head> <meta charset="utf8"> <title>Explore Shadows!</title> <style> .box{ width: 400px; height: 80px; border: 3px solid rgb(60,60,60); margin: 30px auto; border-radius: 5px; line-height: 80px; text-align: center; } #outset{ box-shadow: 10px 10px 3px rgb(0,0,0); } #inset{ box-shadow: 10px 10px 3px rgb(0,0,0) inset; } #offset{ box-shadow: 0px 0px 0px 10px rgb(0,0,0); } #text{ text-shadow: 10px 10px 3px rgb(0,0,0); } </style> <script src="js/prefixfree.js"></script> </head> <body> <section> <div id="outset" class="box"></div> <div id="inset" class="box"></div>...