Iconos de verano en CSS
¡He creado algunos dibujos de cosas típicas del verano en CSS! Os enseño cómo lo he hecho en el siguiente post…
¡El verano ya ha llegado! Y a mi me han entrado ganas de crear algunas imágenes propias de esta época en CSS, con una pequeña animación de regalo. (La animación se hace visible al pasar el cursor por encima).
Para no alargarme mucho, solamente explicaré cómo he hecho uno de los dibujos: el polo de fresa, ya que es rápido de hacer y junto con la animación queda un resultado divertido. El resto de dibujos se pueden ver en el codepen que adjunto al final de la entrada.
Primero, he empezado por el cuerpo (lo que sería el polo en sí), indicando el tamaño y añadiendo un degradado como color de fondo. Aquí es importante definir una posición relativa porque, aunque la tenga por defecto, será necesario más adelante para trabajar el posicionamiento de los pseudo-elementos after y before.
<div id="ice"></div>#ice {
position: relative;
width: 80px;
height: 160px;
display: inline-block;
background: linear-gradient(45deg, #e63439, #ff7c80);
}
Dar forma al cuerpo es muy sencillo, ya que sólo hay que usar la propiedad border-radius y aplicarla individualmente a cada uno de los bordes. Se puede hacer en una sola línea: border-radius: 50px 50px 10px 10px; y es equivalente a escribir una línea para cada uno de los bordes.
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;Finalmente y para darle un poco de volumen, se puede utilizar la propiedad box-shadow, desplazando la sombra sólo sobre el eje X y sin añadir efecto de desenfoque.
box-shadow: -5px 0px 0px #c56366;
El siguiente paso es construir el palo y para ello he usado el pseudo-elemento before. Primero se tiene que crear un rectángulo con sus proporciones y color de fondo.
#ice:before {
content: '';
position: relative;
display: block;
height: 80%;
width: 25%;
background: #e8cfa7;
}Y para posicionar el palo respecto al cuerpo, lo que he hecho es utilizar un porcentaje del 70% respecto al border superior, así como para alinearlo al centro se puede hacer de varias formas, por ejemplo utilizando el “truco” margin: 0 auto;
top: 70%;
margin: 0 auto;
Para acabar, se añade un border-radius que hará redondear los bordes, un box-shadow que dará volumen y un z-index negativo para esconder el cuerpo por debajo.
z-index: -1;
border-radius: 10px;
box-shadow: -2px 0px 0px #c5ad86;
Y aunque parezca que ya está terminado… ¡aún queda un efecto por crear! (que será visible cuando pasemos el cursor por encima).
Cómo os he explicado en el ejemplo, decidí añadirle una marca de dientes, así parece que alguien lo ha mordido. Esta parte se puede hacer fácilmente utilizando 3 divs, uno por cada cliente, y rellenarlos del mismo color que el fondo de la web (en este caso blanco). Una manera podría ser esta:
<div id="ice">
<div id="tooth1"></div>
<div id="tooth2"></div>
<div id="tooth3"></div>
</div>#tooth1,
#tooth2,
#tooth3{
width: 20px;
height: 20px;
border-radius: 100%;
position: absolute;
background: white;
}#tooth1{
top:0;
right:0;
}#tooth2{
top:12px;
right:0px;
}#tooth3{
top:20px;
right:-10px;
}
Pero, inspirándome en este genial proyecto de Lynn Fisher, decidí probar a hacerlo todo usando un solo elemento div, y después de batallar un poco conseguí hacerlo.
Para ello, utilicé el pseudo-elemento after y pinté los 3 círculos como gradientes radiales en el background.
height: 50px;
width: 50px;
background: radial-gradient(white, white 10px, transparent 10px),
radial-gradient(white, white 10px, transparent 10px),
radial-gradient(white, white 10px, transparent 10px);
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: 1px -19px, 9px -8px, 23px -1px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
¡Y ahora sí! Sólo queda esconder este efecto y mostrarlo al pasar el cursor por encima.
#ice:after {
display: none;
}#ice:hover:after {
display: block;
}
Este es el código completo en CSS:
#ice {
position: relative;
width: 80px;
height: 160px;
display: inline-block;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background: linear-gradient(45deg, #e63439, #ff7c80);
box-shadow: -5px 0px 0px #c56366;
}#ice:before {
content: ‘’;
height: 80%;
width: 25%;
background: #e8cfa7;
position: absolute;
left: 50%;
transform: translatex(-50%);
top: 70%;
z-index: -1;
border-radius: 10px;
box-shadow: -2px 0px 0px #c5ad86;
}#ice:after {
display: none;
content: ‘’;
height: 50px;
width: 50px;
background: radial-gradient(white, white 10px, transparent 10px),
radial-gradient(white, white 10px, transparent 10px),
radial-gradient(white, white 10px, transparent 10px);
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: 1px -19px, 9px -8px, 23px -1px;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}#ice:hover:after {
display: block;
}
Aquí tenéis el resultado final: cómo se ve por defecto y al pasar el cursor por encima.
También dejo el resto de dibujos. Están todos animados al pasar el cursor por encima y se puede ver el código tanto en HTML como en CSS.
El CSS está escrito en LESS, pero se puede ver compilado haciendo click en la pestaña LESS y pulsando el botón que aparece en la parte inferior “VIEW COMPILED”. Nótese que al verlo compilado también aparecen los prefijos de algunas propiedades para que se vean en todos los navegadores.
