Desde que se inició el blog hemos podido ver las grandes posibilidades que tiene CSS3, como por ejemplo crear letras capitales, ribbons, usar variables php en css...Desde la llegada de CSS3 han aumentado drásticamente las posibilidades que nos ofrece CSS, muchas cosas que antes se hacían con imágenes, ocupando espacio y aumentando el tiempo de carga del sitio web, ahora se hacen de forma más rápida y ligera con CSS.

En este artículo aprenderemos a crear un corazón animado con CSS3, aprovechando la propiedad font-face, aunque también podemos hacerlo con SVG. Allá vamos:

Símbolos HTML & ASCII

Podemos crearlo con símbolos ASCII, de esta forma:

.heart { content: '&#9829'; }

See the Pen I Heart You – ASCII by CSS-Tricks (@css-tricks) on CodePen.

Capas CSS

También se puede crear este corazón con capas (dos círculos y un cuadrado girado):

Podemos crearlo con capas, usando los pseudoelementos ::before y ::after:

.heart {
background-color: red;
display: inline-block;
height: 30px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
width: 30px;
}

.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 30px;
position: absolute;
width: 30px;
}

.heart:before {
top: -15px;
left: 0;
}

.heart:after {
left: 15px;
top: 0;
}

Fuente de iconos

Se puede crear el corazón usando tipografías, gracias a la propiedad font-face de CSS3 y al icono generado en base a la tipografía de We Love Icon Fonts.

 

 

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
color: red;
}

See the Pen I Heart You – Icon Font by CSS-Tricks (@css-tricks) on CodePen.

SVG en línea

Esto no es exactamente CSS pero es otra forma de crear este corazón:

I

 

You

Podemos añadir la animación pulse de CSS3 para darle un toque dinámico:

.heart {
fill: red;
position: relative;
top: 5px;
width: 50px;
animation: pulse 1s ease infinite,
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}

See the Pen I Heart You – SVG by CSS-Tricks (@css-tricks) on CodePen.

Vía | CSS Tricks