Teoría
Teoría

Color de la sombra

El color de la sombra se puede indicar en cualquier formato de color de CSS. Si no se indica, se toma el color del texto del elemento. Por eso, en este ejercicio la sombra inicial es amarilla.

box-shadow:
[inset]  — interior
5px      — desplazamiento en x
10px     — desplazamiento en y
[2px]    — desenfoque
[3px]    — expansión
[red];  <— color

El color de las sombras es una herramienta muy útil para crear efectos llamativos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Color de la sombra</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="light"> <button class="btn btn1" type="button">Botón</button> </div> <div class="dark"> <button class="btn btn2" type="button">Botón</button> </div> </body> </html>

CSS

.btn1 { box-shadow: 0 0 5px 4px; } .btn2 { box-shadow: 0 0 5px 4px; } html, body { margin: 0; padding: 0; font-size: 18px; font-family: "Tahoma", sans-serif; } .light { padding: 50px 0; background-color: #2c3e50; } .dark { padding: 50px 0; } .btn { display: block; margin: 50px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #3498db; color: yellow; text-align: center; text-transform: uppercase; font: inherit; }

ObjetivosRealizado

Cambia el color de la sombra del primer botón a white.
Cambia el color de la sombra del segundo botón a #2c3e50.