Ejercicio css sobre la propiedad box-shadow (css3)

Ejercicio css sobre la propiedad box-shadow (css3)

Print Friendly, PDF & Email
Ejercicio css sobre la propiedad box-shadow (css3)
Valora esta entrada

La propiedad box-shadow sirve para dar efecto sombra a las cajas.

Personalmente es un recurso del que no me gusta abusar pero que en ocasiones puede dar muy buen resultado.

Antes de resolver el ejercicio que se plantea son recomendables las siguientes lecturas:

Entremos en materia.

Enunciado

Crea 12 cajas repartidas en dos contenedores en forma de filas de 3 botones cada una.

Escribe las propiedades css necesarias para conseguir el mismo resultado que en la imagen.

El color usado para el background de las cajas es el #ccc.

El color usado para las sombras es el #000.

Ejemplo de uso de la propiedad box-shadow

Solución del ejercicio

La propiedad box-shadow consta de 4 valores.

  • El primer valor indica el desplazamiento horizontal. Es positivo para la derecha y negativo para la izquierda.
  • El segundo valor indica el desplazamiento vertical. Es positivo para abajo y negativo para arriba.
  • El tercer valor indica el difuminado de la sombra.
  • El cuarto valor sirve para dar grueso a la sombra.
box-shadow: desplazamiento-x desplazamiento-y blur gruesoAdicional;

Como dato curioso y útil para entender la resolución fijaros que por ejemplo en el botón el efecto se consigue desplazando la sombra pero dando un grueso adicional a la sombra que hace que parezca que empieza en el extremo de la caja. Pero es un efecto visual.

¿Como queda el documento html?

<!DOCTYPE html>
<html>
<head>
	<title>Ejercicio con box-shadow</title>
	<meta charset="utf-8"/>
	<meta name="author" content="francesc ricart"/>
	<style>
		/*Instrucciones css*/
	</style>

</head>
<body>

	<div class="contenedor-1">
		<div class="caja-1">A</div>
		<div class="caja-2">B</div>
		<div class="caja-3">C</div>
		<div class="caja-4">D</div>
		<div class="caja-5">E</div>
		<div class="caja-6">F</div>
	</div>
	<div class="contenedor-2">
		<div class="caja-1">G</div>
		<div class="caja-2">H</div>
		<div class="caja-3">I</div>
		<div class="caja-4">J</div>
		<div class="caja-5">K</div>
		<div class="caja-6">L</div>
	</div>
</body>
</html>

¿Como queda el documento css?

*{box-sizing:border-box;}
		.contenedor-1,.contenedor-2{
			width:400px;
			margin:50px;
		}
		div[class*="caja-"]{
			width:100px;
			height:45px;
			padding:10px;
			border:1px solid #000;
			/*border-radius:10px;*/
			background-color:#ccc;
			margin:10px;

			text-align:center;

			display:inline-block;
		}

		.contenedor-1 .caja-1{box-shadow:-2px -2px #000;}
		.contenedor-1 .caja-2{box-shadow:-2px -2px 5px #000 ;}
		.contenedor-1 .caja-3{box-shadow:-2px -2px 0 2px #000;}
		.contenedor-1 .caja-4{box-shadow:-2px -2px 5px 2px #000;}
		.contenedor-1 .caja-5{box-shadow:0px 0px 5px 0px #000;}
		.contenedor-1 .caja-6{box-shadow:0px 0px 1px 1px #000;}

		.contenedor-2 .caja-1{box-shadow:2px 2px #000;}
		.contenedor-2 .caja-2{box-shadow:2px 2px 5px #000 ;}
		.contenedor-2 .caja-3{box-shadow:2px 2px 0 2px #000;}
		.contenedor-2 .caja-4{box-shadow:2px 2px 5px 2px #000;}
		.contenedor-2 .caja-5{box-shadow:0px 0px 5px 0px #000;}
		.contenedor-2 .caja-6{box-shadow:0px 0px 1px 1px #000;}

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

Con este ejercicio hemos practicado la propiedad box-shadow.

Ahora sería interesante que la contrastases con la propiedad text-shadow.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio sobre como ocultar cajas con css mediante visibility y/o display
- 39
Observa de forma práctica la diferencia entre el uso de la propiedad display:none y visibility:hidden. Incluye solución.
Unidades de medida absolutas y relativas en CSS
- 418
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Dimensiones reales de una caja en CSS
- 247
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Ejemplo de menú vertical con submenú desplegable vertical (CSS)
- 593
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.
Diferencia entre visibility:hidden; y display:none;
- 261
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Ejercicio nivel básico sobre selectores CSS
- 42
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Ejercicio css. Separar el css de un html
- 27
Ejercicio CSS en el que a partir de una hoja html dada se pide separar al máximo html y css en hojas separadas. Incluye solución.
Guía rápida para crear botones personalizados con CSS
- 194
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 271
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Escribe los selectores css adecuados en cada caso
- 44
Ejercicio css del curso web ifcd0110 para practicar con los selectores más adecuados a poner en un fragmento de html. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.