Teoría
Teoría

Sombra semitransparente

El desenfoque hace que los bordes de una sombra se vean semitransparentes. En este ejercicio haremos semitransparentes las sombras de los botones sin agregar desenfoque.

Para lograrlo, podemos usar el formato de color rgba. Por ejemplo:

color: red;
color: #ff0000;
color: rgba(255, 0, 0, 0.5);

Todos los valores del ejemplo representan el rojo, pero el último tiene un 50% de opacidad.

En rgba, los tres primeros valores indican los componentes rojo, verde y azul. Son números enteros de 0 a 255. El último valor indica la opacidad y admite decimales: va de 0 (totalmente transparente) a 1 (totalmente opaco).

También puedes usar rgba en otras propiedades que aceptan colores, como los bordes o el fondo.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sombra semitransparente</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn btn1" type="button">Dar de comer</button> <button class="btn btn2" type="button">Ahuyentar</button> </body> </html>

CSS

.btn1 { box-shadow: 0 0 0 15px #27ae60; } .btn2 { box-shadow: 0 0 0 15px #e74c3c; } body { padding-top: 200px; background: url("keks.jpg") no-repeat 40% 0; background-size: auto 700px; font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 50px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #2c3e50; color: white; text-align: center; text-transform: uppercase; font: inherit; }

ObjetivosRealizado

Cambia el color de la sombra del primer botón a rgba(39, 174, 96, 0.5).
Cambia el color de la sombra del segundo botón a rgba(231, 76, 60, 0.5).