Iconos flat y long shadows sin box-shadow. Sencillos y fáciles de hacer 8.7.13
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
Una 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 demoEl 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;
}
Un 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
Una 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.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Wao se ve bien
ResponderEliminarQué ingenioso: pseudoelementos + gradientes + transformaciones, genial.
ResponderEliminarY además te ha (corazoneado?) el pen Chris Coyier xD
Felicidades, y genial como siempre