Márgenes redondos y sombra interna en capas con html5 y css3

Con estos nuevos atributos para hojas de estilo css vamos a conseguir redondear los márgenes de una capa, y ponerle una sombra interna del color y profundidad que queramos. Empecemos por redondear la capa:

Un ejemplo de una capa cualquiera con los bordes redondeados sería:

div.capa_redondeada {
    width:300px;
    height:150px;
    background:#FFFFFF;
    border:2px solid #ddd;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Como vemos, hemos creado una capa de 300×150 pixeles en tamaño. Le hemos dado un color de fondo y un borde de 2 pixels de ancho, para apreciar bien el redondeo de los bordes y la posterior sombra interna. Lo nuevo viene con el atributo border-radius. Tenemos varias opciones, o la que hemos utilizado nosotros en este caso, dándole un único valor que se tomaría para todos los ángulos, en este caso se redondearía 10 pixels cada ángulo. La otra opción sería:
border-radius: 10px 10px 10px 10px; en cuyo caso, se redondearía una cantidad de pixels cada ángulo. Superior izquierdo, superior derecho, inferior izquierdo e inferior derecho. En caso que que quisiésemos, por ejemplo, redondear solamente los superiores en 15 pixeles cada uno, bastaría con poner:

div.capa_redondeada {
    -webkit-border-radius: 15px 15px 0px 0px;
    -moz-border-radius: 15px 15px 0px 0px;
    border-radius: 15px 15px 0px 0px;
}

Lo siguiente que vamos a realizar es darle a esta misma capa que hemos creado una sombra interna. Para ello agregaremos un nuevo atributo a la capa: box-shadow. Entonces el código fuente del css quedaría así:

div.capa_redondeada_sombreada {
    width:300px;
    height:150px;
    background:#FFFFFF;
    border:2px solid #ddd;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
    -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
    box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
}

Este nuevo atributo es más complicado de entender. Lo primero que aparece es el inset, la sombra está en el interior de la capa. Luego tenemos tres distancias: las dos primeras son la longitud horizontal y vertical de separación de la sombra, y la tercera es el radio de desenfoque. El cuarto elemento es el color en RGBA, que a diferencia de los colores normales RGB, añade un canal alfa de transparencia con el que conseguiremos cambiar la opacidad de un color, en nuestro ejemplo un 50 por ciento.

Si quieres ver ejemplos de estos nuevos atributos para las hojas de estilo css, entra en
Efectos para capas en html5 y css3

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: