08 Mar Ejercicio css sobre la propiedad box-shadow (css3)
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:
- Publicación dónde se presenta la propiedad box-shadow (y otras para personalizar botones)
- Repasa la propiedad display:inline-block; y display-inline:block;
- Selectores de css (nunca viene mal un repaso).
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.
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 C 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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
¿Cómo afectaría a una página web un simple cambio como puede ser la propiedad font-size de un párrafo? Incluye solución.
Se muestran dos soluciones simples que usan exclusivamente CSS para el conocido reto de terminar un contenido con 3 puntos suspensivos. "..."
Numerar listas css es como con el Word es posible gracias a la propiedad counter(). Veamos un ejemplo de uso.
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
No hay comentarios