Cómo lograr las largas sombras (tan de moda) en cajas e iconos sin necesidad de declarar kilométricos box-shadows. Con gradientes y transforms.

Iconos flat y long shadows sin box-shadow. Sencillos y fáciles de hacer

flat long shadow iconUna aproximación para realizar los tan de moda, ahora, iconos con largas sombras. Este pequeño juego Css, a diferencia de otras realizaciones que he visto hasta la fecha, tiene de particular que no necesita de kilométricos valores en la propiedad box-shadow o text-shadow para obtener la sombra alargada y a la vez que vaya degradando hasta desaparecer.

Pero antes de meternos en harina y despiezar un poco la idea, pasa a ver la demo en codepen:

Ver la demo

El marcado Html

En este ejemplo, por simplificar, utilizo un div que conforma la caja exterior y su sombra el pseudoelemento :after.

Y al usar los iconos tipográficos de We love icon fonts (que emplea un pseudoelemento para visualizarlo) introduzco un span para crear la sombra del elemento interior (el icono)

<div class='elemento'> <span class='entypo-basket'></span> </div> <div class='elemento dos'> <span class='entypo-plus-squared'></span> </div> <div class='elemento tres'> <span class='entypo-box'></span> </div>

La segundas clases de los div´s son para modificar el color de fondo de cada uno de ellos.

El Css asociado

El primer elemento a estas alturas no tiene mayor secreto. Marcada su altura y anchura redondeamos con border-radius: 50%;, alineamos el texto al centro y para el centrado en la vertical del icono declaramos el valor de line-height igual a su altura:

.elemento { width: 15rem; height: 15rem; line-height: 15rem; background: #E74C3C; border-radius: 50%; text-align: center; color: #fff; position: relative; display: inline-block; margin: 3% 5rem 3% 0; }

La larga sombra sin box-shadow

Como comentaba en la intro, hasta ahora las realizaciones se basan en la propiedad box-shadow para lograr la sombras.

Esto trae consigo un código excesivamente extenso, nada fácil de modificar u adoptar a otras situaciones, y una sobre carga del navegador para manejarlas.

Así que en vez de esa propiedad, empleo background: linear-gradient mucho más sencillo de trabajar con él:

.elemento:before { content:''; background-image: linear-gradient(to right, rgba(0,0,0,.05) 60%, rgba(0,0,0,0)); width: 150%; height: 100%; position: absolute; transform: rotate(45deg); transform-origin: 0 50% 0; top: 0; left: 7.5rem; z-index: -1; }

flat long shadow iconUn vistazo rápido a las declaraciones más significativas:

  • La sombra se controla en dos aspectos del gradiente: el valor del canal alfa de primer color marca su dureza y el % la longitud y degrado de ella.
  • EL valor en su anchura define la longitud "total" (hasta dónde se prolonga) incluido el espacio ocupado por el "transparent".
  • El ángulo (y si es hacia la izquierda o derecha) con la rotación.
  • Con en punto donde realizamos la transnformación (transform-origin) y el desplazamiento (left: 7.5rem) nos aseguramos que la sombra no sobresalga del círculo que la genera.
  • Y con el valor negativo de z-index la situamos por debajo del div.

El icono interior

Sencillo. Y excepto las dos últimas declaraciones necesarias para manejar su sombra y que no se superponga al icono, las primeras al gusto:

span { font-size: 5rem; line-height: 15rem; color: #fff; position: relative; z-index: 1; }

La sombra de los iconos

Como cada icono es diferente en forma y relación alto/ancho hay que actuar sobre cada uno de ellos individualmente para lograr un efecto aceptable y al pixel de la sombra que genera. Es el punto débil o más trabajoso de la demo:

span { font-size: 5rem; color: #fff; position: relative; z-index: 1; } span:after { content:''; background-image: linear-gradient(to right, rgba(0,0,0,.1) 50%, rgba(0,0,0,0)); width: 140%; height: 90%; position: absolute; left: 1rem; top: -0rem; transform: rotate(44deg); transform-origin: bottom left 0; z-index: -1; } .dos span:after { transform: rotate(44deg); left: 0rem; top: -6%; height: 88%; width: 160%; }

Quizás este aspecto se pueda hacer más sencillo al utilizar el segundo seudoelemento del div para posicianarlo justo debajo del icono (eje z) lograr algún efecto añadido con él y que sea este elemento el que genere la sombra del icono (la contenida en el círculo).

Bueno. Como decía al inicio, no es más que una aproximación y un juego. En base a él, si lo ves interesante siempre puedes mejorarlo. Que se puede y debe. Así que trabaja un poco esta idea y compártela con todos nosotros en un comentario. Será agradable ver tu trabajo.

Adenda

flat long shadow iconUna pastillita para el ego, que a todos nos gusta ver reconocido, aunque sea de forma tan banal, nuestro trabajo, esta captura de pantalla del pen con un ♥ un tanto significativo.

Publicado el 8 de julio de 2013 y Archivado en

Y para terminar, como agradecimiento a tu visita, déjame que te haga estas sugerencias:

Suscríbete a los artículos.

Nada de spam. Sólo avisos de nuevos posts.

Comparte y sorprende.

votar

También puedes ir a alguno de estos artículos que tienen relación con el que acabas de ver:

Ecos G+

2 comentarios :

  1. Qué ingenioso: pseudoelementos + gradientes + transformaciones, genial.

    Y además te ha (corazoneado?) el pen Chris Coyier xD

    Felicidades, y genial como siempre

    ResponderEliminar