Teoría
Teoría

Desplazamiento horizontal de la sombra

Ya creamos una sombra sencilla. Ahora veamos la sintaxis de la propiedad:

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

La palabra clave inset, la expansión, el desenfoque y el color son opcionales. El orden de los valores numéricos es importante. El primero indica el desplazamiento horizontal.

Un valor positivo mueve la sombra a la derecha; uno negativo, a la izquierda.

index.html
style.css

HTML

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

CSS

.btn { box-shadow: 0 0 0 0 #34495e; } body { background-image: url("bg.jpg"); font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 100px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #3498db; color: white; text-align: center; text-transform: uppercase; font: inherit; }

ObjetivosRealizado

Mueve la sombra inicial (que al principio no se ve) 5px a la izquierda. Usa un valor negativo.
Luego, asigna a la sombra un desplazamiento horizontal de 5px.