Al buscar FX para sitios web en CSS3, encontramos un par de buenos tutoriales para crear sombras en imágenes sin requerir nada mas que código,. lo que simplifica mucho el uso y aligera en mucho las paginas.
<style> .drop-shadow { position:relative; width:90%; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-1; } </style>
O usar este CSS aun mas simple, en ambos caso una sombra suave se creara en su imagen – marcada de manera correctamente – el segundo es usable aun cuando lo sumamos con otras hojas de estilo CSS…
<style> .imagedropshadow { margin-left:auto; margin-right:auto; padding: 5px; -moz-box-shadow: 1px 1px 7px #1F1F1F; -webkit-box-shadow: 1px 1px 7px #1F1F1F; box-shadow: 1px 1px 7px #1F1F1F; background: #ffffff; } a:hover img.imagedropshadow { border: solid 1px 1px 7px #CCC; -moz-box-shadow: 1px 1px 7px #1F1F1F; -webkit-box-shadow: 1px 1px 7px #1F1F1F; box-shadow: 1px 1px 7px #1F1F1F; }
</style>
Este es el ejemplo más básico de como crear una sombra en CSS, para implementarlo solo añadan el tag a su imagen.
<style><img src=”top2.jpg” width=”280″ height=”165″ class=”imagedropshadow imgr”>
</style>
Los pseudo-elementos necesitan posicionarse, vía dimensiones explícitas o implícitas en su código CSS
.drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; }
El siguiente paso es añadir una sombra box-shadow al CSS y aplicar transformaciones CSS3 a la sombra. Los valores de la drop-box se pueden producir variando los valores de las transformaciones – o usar una herramienta dedicada como el CSS edit de Mac- para previsualizar los resultados en tiempo real.
.drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
Los pseudo-elementos ahora necesitan posicionarse al otro lado del elemento y rotados en la dirección opuesta, Esto se consigue fácilmente solo modificando las propiedades que necesiten diferenciarse.
.drop-shadow:after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
El código final se muestra abajo, solo se añadió un tag extra –max-width – para prevenir que la sombra se extienda demasiado en elementos demasiado anchos.
.drop-shadow { position:relative; width:90%; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .drop-shadow:after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
Si su intención es usar técnicas mas avanzadas, pueden verificar este demo… donde se pueden ver varios ejemplos muy acabados de sombras CSS3, eso si solo para expertos de CSS si quieren modificarlos. Mas Efectos y un buen sampler después del corte…
<style>
/* Shared styles */ .drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; } .drop-shadow p { font-size:16px; font-weight:bold; } /* Lifted corners */ .lifted { -moz-border-radius:4px; border-radius:4px; } .lifted:before, .lifted:after { bottom:15px; left:10px; width:50%; height:20%; max-width:300px; max-height:100px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .lifted:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } /* Curled corners */ .curled { border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; } .curled:before, .curled:after { bottom:12px; left:10px; width:50%; height:55%; max-width:200px; max-height:100px; -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); -webkit-transform:skew(-8deg) rotate(-3deg); -moz-transform:skew(-8deg) rotate(-3deg); -ms-transform:skew(-8deg) rotate(-3deg); -o-transform:skew(-8deg) rotate(-3deg); transform:skew(-8deg) rotate(-3deg); } .curled:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); } /* Perspective */ .perspective:before { left:80px; bottom:5px; width:50%; height:35%; max-width:200px; max-height:50px; -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); -webkit-transform:skew(50deg); -moz-transform:skew(50deg); -ms-transform:skew(50deg); -o-transform:skew(50deg); transform:skew(50deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; } .perspective:after { display:none; } /* Raised shadow - no pseudo-elements needed */ .raised { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } /* Curved shadows */ .curved:before { top:10px; bottom:10px; left:0; right:50%; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; } .curved-vt-2:before { right:0; } .curved-hz-1:before { top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .curved-hz-2:before { top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } /* Rotated box */ .rotated { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .rotated > :first-child:before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
</style>
Solo es importante no olvidar añadir a la imagen el tag respectivo:
<div class=”drop-shadow curved curved-hz-1″>
<p>Single horizontal curve</p>
</div>
Algunos tags para probar pueden ser estos:
<body>
<div class=”container”>
<h1><a href=”/css-drop-shadows-without-images/”>CSS drop-shadows without images</a></h1><div class=”drop-shadow lifted”>
<p>Lifted corners</p>
</div><div class=”drop-shadow curled”>
<p>Curled corners</p>
</div><div class=”drop-shadow perspective”>
<p>Perspective</p>
</div><div class=”drop-shadow raised”>
<p>Raised box</p>
</div><div class=”drop-shadow curved curved-vt-1″>
<p>Single vertical curve</p>
</div><div class=”drop-shadow curved curved-vt-2″>
<p>Vertical curves</p>
</div><div class=”drop-shadow curved curved-hz-1″>
<p>Single horizontal curve</p>
</div><div class=”drop-shadow curved curved-hz-2″>
<p>Horizontal curves</p>
</div><div class=”drop-shadow lifted rotated”>
<p>Rotated box</p>
</div>
</div></body>
#css3 Código y Ejemplos de sombras en CSS3 para web, compatible con navegadores con soporte estándar HTML5 – es decir no IE – perfecto para estilizar imágenes sin gastar mas kbytes en el proceso…