Please note, that this is an old archived version of this site. Check out the new version at andunix.net!

Differences

This shows you the differences between two versions of the page.

--- info:webdesign:css:shadow [2013-07-11 06:36]
andunix created
+++ info:webdesign:css:shadow [2013-07-11 06:39] (current)
andunix
@@ Line 1: / Line 1: @@
 ====== Shadows ======
+===== Box Shadow =====
+==== Normal Shadow ====
+Only the shadow:
+  box-shadow: 1px 4px 8px #888888;
+<html><div style="box-shadow: 1px 4px 8px #888888; height: 50px; width: 100px;"></div></html>
+Looks even better with a tiny grey border:
+  border: 1px solid #DDDDDD;
+  box-shadow: 1px 4px 8px #888888;
+<html><div style="border: 1px solid #DDDDDD; box-shadow: 1px 4px 8px #888888; height: 50px; width: 100px;"></div></html>
+==== Inset Shadow ====
+The shadow inside the box:
+  box-shadow: 1px 4px 8px #888888 inset;
+<html><div style="box-shadow: 1px 4px 8px #888888 inset; height: 50px; width: 100px;"></div></html>
+===== Text Shadow =====
+==== Alien Glow ====
+  text-shadow: 0pt 0pt 6px rgb(0, 255, 255)
+<html><span style="background-color: black; color: rgb(0, 255, 255); font-size: 14pt; padding: 6pt; text-shadow: 0pt 0pt 6px rgb(0, 255, 255);">Alien Glow</span></html>
+{{tag>webdesign web design css}}

andunix.net