Cargando

Ir a contenido

X

 


HTML5 – Box Shadow

En este tutorial veremos cómo podemos utilizarlo y generaremos algunos ejemplos interesantes que puedan servir de modelo de prácticas.



Escrito por jul 10 2014 11:24


Esta es una de las características más esperadas del nuevo estándar de CSS3 y que en conjunción con HTML5 logra atraer muchas miradas, nos referimos al Box Shadow quien nos permite colocar sombras a las cajas en nuestro documento HTML, generando así un efecto como de que está flotando sobre la página.

Creando un elemento Box Shadow


El elemento Box Shadow debe constituirse de la siguiente manera:
box-shadow: hoffset voffset blur spread color inset

Donde cada uno de sus atributos hace una función, veamos cada una de estas a detalle:
  • Hoffset: Es el desplazamiento horizontal, el cual es un valor de longitud. Un valor positivo desplaza al Box Shadow a la derecha, en cambio, un valor negativo desplaza al Box Shadow a la izquierda.
  • Voffset: Es el desplazamiento vertical, el cual es un valor de longitud. Un valor positivo desplaza al Box Shadow debajo de la caja del elemento, y un valor negativo desplaza al Box Shadow por encima de la caja del elemento.
  • Blur: (Opcional) Especifica el radio de la definición de la sombra, el cual es un valor de longitud. Mientras más alto el valor más borroso se ve el borde de la sobra de la caja del elemento. Para el valor por defecto, 0, el borde de la sombra de la caja se ve totalmente definido.
  • Spread: (Opcional) Especifica el radio de difusión de la sombra, es una medida de longitud. Un valor positivo hace que la sombra se expanda en todas direcciones de la caja del elemento que la contiene y un valor negativo hace que la sombra del elemento que la contiene se contraiga.
  • Color: (Opcional) Es el color de la sombra. Si es omitido el navegador decidirá el color.
  • Inset: (Opcional) Hace que la sombra se genere dentro de la caja del elemento al cual se le aplica.

Una vez que conocemos los atributos pasemos rápidamente a un ejemplo en código para poner en práctica lo que aprendimos.

<!DOCTYPE HTML>
<html>
    <head>
	    <title>Example</title>
	    <style type="text/css">
		    p {
			    border: 10px double black;			   
			    box-shadow: 5px 4px 10px 2px gray;
		    }
	    </style>
    </head>
    <body>
    <p>
	    There are lots of different kinds of fruit - there are over 500 varieties
	    of banana alone. By the time we add the countless types of apples, oranges,
	    and other well-known fruit, we are faced with thousands of choices. 
    </p>
    </body>
</html>

Como vemos podemos aplicar el Box Shadow en el CSS dentro de la etiqueta style, este código nos genera el siguiente resultado:

box-shadow.jpg


Otro aspecto interesante es que en una misma declaración de un Box Shadow podemos especificar varias sombras por ejemplo, en el siguiente código vamos a incluir una sombra adicional en el inset, veamos:

<!DOCTYPE HTML>
<html>
    <head>
	    <title>Example</title>
	    <style type="text/css">
		    p {
			    border: 10px double black;			   
			    box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;
		    }
	    </style>
    </head>
    <body>
    <p>
	    There are lots of different kinds of fruit - there are over 500 varieties
	    of banana alone. By the time we add the countless types of apples, oranges,
	    and other well-known fruit, we are faced with thousands of choices. 
    </p>
    </body>
</html>

Ahora veamos como ambas sombras se muestran en nuestro elemento:

box-shadow2.jpg



AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 10 2014 11:24
  •   Visitas 857
  •   Nivel
    Profesional