banner
hace 5 años
1483 Views

Sombras Css3 (box-shadow)

Autor:
banner

Hola amigos hoy voy a enseñaros una Propiedad Css3, con el cualpodremos realizar diseños mas profesionales. Esta Propiedad es“box-shadow” y con los nuevos Estándares Web, permiten desarrollar sombras muy realistas.

 

También cabe destacar que estos nuevos estándares, cada vez son mas compatibles con los navegadores mas modernos.

 

No obstante existen Herramientas Online con las que podemos ayudarnos, como los Generadores de Css3 ; que te ayudan a generar el Código Css, después de crear el diseño visualmente.

 
 
 

Podéis Comprobar la Compatibilidad de los Navegadores desde : Html5&Css3 Support 

 
 

Antes de insertar el Código Css que creara las sombras, tenemos que crear un contenedor <div>; en el Código Html.

 

Este <div> proporciona un espacio en la web, que sera diseñado desde el Código Css, mediante los atributos “id” o “class”.

sombra css

<div id="cuadro"></div>


color: #339966;

background-color:#F4F4F4;

height:100px;

width:150px;

margin:100px 50px;

float:left;

-moz-box-shadow:7px 6px 5px rgba(0, 0, 0, 0.4);

-webkit-box-shadow:7px 6px 5px rgba(0, 0, 0, 0.4);

box-shadow:7px 6px 5px rgba(0, 0, 0, 0.4);

sombra css II

<br />color: #339966;<br />background-color:#F4F4F4;<br />height:100px;<br />width:150px;<br />margin:100px 50px;<br />float:left; <br />-webkit-box-shadow:0px 10px 22px 3px rgba(0,0,0,0.75);<br />-moz-box-shadow:0px 10px 22px 3px rgba(0,0,0,0.75);<br />box-shadow:0px 10px 22px 3px rgba(0,0,0,0.75);<br />

sombras basica III

 <br />color: #339966;<br />background-color:#F4F4F4;<br />height:100px;<br />width:150px;<br />margin:100px 50px;<br />float:left; <br />-moz-box-shadow:inset 2px 7px 6px 8px #000000;<br />-webkit-box-shadow:inset 2px 7px 6px 8px #000000;<br />box-shadow:inset 2px 7px 6px 8px #000000;<br />

Hasta aquí el post de hoy, hemos explicado mediante ejemplos los tipos de sombras mas básicos de Css en forma de introducción a la Propiedad Css “box-shadow”.

 

En los siguientes artículos os enseñare Sombras Css 3 mas complejas que requieren de mas propiedades para configurar nuestra Sombra Css 3.

 

 
 

No obstante si conseguimos manejar bien esta Propiedad Css3, obtendremos un Recurso Gráfico muy valioso a la hora de dar un Estilo Profesional a una Aplicación Web

 
 

Bueno espero que os haya gustado y que tengáis presente esta propiedad Css para vuestros proyectos y así poder crear diseños mas profesionales

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Artículos Categorías:
Css3 · Desarrollo Web
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Web Sdc Studio