Como sabemos, el icono representativo del e-mail es el sobre de correo. Aunque muchas veces el arroba @ nos indica lo mismo. Hoy veremos cómo, utilizando solamente estilos CSS, crear un simple icono de sobre.
Como habrás notado, aprovechamos las pseudoclases :before y :after para no tener que usar tanto HTML y no tener inconvenientes con los position. Recuerda que si quieres cambiar el color de fondo o borde, tienes que cambiarlo en dos partes del código diferente, que encontrarás viendo las acotaciones.
Aquí ves el resultado.
Más colores...
Ahora que tenemos el icono podemos, fácilmente, usarlo en un botón de suscripción.
Terminamos con este post. Nos vemos!
HTML
<div class='icono-email'></div>
CSS
.icono-email {
background: white; /* Fondo del icnono */
box-sizing: border-box;
width: 40px; /* Alto del icono */
height: 30px; /* Ancho del icono */
border: 1px solid #777; /* Borde del icono */
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,.095); /* Sombra */
position: relative;
}
.icono-email:before, .icono-email:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.icono-email:before {
border: 19px solid transparent;
border-top: 20px solid #777; /* Color igual a color de borde */
}
.icono-email:after {
border: 18px solid transparent;
border-top: 19px solid white; /* Color igual a color de fondo */
left:1px;
}
background: white; /* Fondo del icnono */
box-sizing: border-box;
width: 40px; /* Alto del icono */
height: 30px; /* Ancho del icono */
border: 1px solid #777; /* Borde del icono */
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,.095); /* Sombra */
position: relative;
}
.icono-email:before, .icono-email:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.icono-email:before {
border: 19px solid transparent;
border-top: 20px solid #777; /* Color igual a color de borde */
}
.icono-email:after {
border: 18px solid transparent;
border-top: 19px solid white; /* Color igual a color de fondo */
left:1px;
}
Como habrás notado, aprovechamos las pseudoclases :before y :after para no tener que usar tanto HTML y no tener inconvenientes con los position. Recuerda que si quieres cambiar el color de fondo o borde, tienes que cambiarlo en dos partes del código diferente, que encontrarás viendo las acotaciones.
Aquí ves el resultado.
Más colores...
Ahora que tenemos el icono podemos, fácilmente, usarlo en un botón de suscripción.
HTML
<a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE-DE-FEED">
<div class='e-mail'>
<div class='icono'></div>
<span>E-mail</span>
</div>
</a>
<div class='e-mail'>
<div class='icono'></div>
<span>E-mail</span>
</div>
</a>
CSS
.e-mail {
background: #80C6FF; /* Fondo del botón */
box-sizing: border-box;
width: 160px; /* Ancho del botón */
height: 50px; /* Alto del botón */
border-radius:4px;
border:1px solid #7DC4FF; /* Borde del botón */
margin: 5px auto;
position: relative;
box-shadow: 0 0 #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
.e-mail:hover {
box-shadow: 0 5px #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
top:-5px;
}
.e-mail:active {
top:0;
box-shadow: 0 0 #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
}
.e-mail span {
line-height: 50px;
float: right;
display: inline-block;
width: 100px;
text-align: center;
color: #333; /* Color del texto */
text-shadow: 0 1px 2px rgba(255,255,255,.4); /* Sombra del texto */
font-size: 25px;
}
.e-mail .icono { /* Utiliza las mismas acotaciones que en el ejemplo del icono */
background: white;
box-sizing: border-box;
width: 40px;
height: 30px;
float: left;
margin: 9px 0 0 9px;
border: 1px solid #777;
position: relative;
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,.095)
}
.e-mail .icono:before, .e-mail .icono:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.e-mail .icono:before {
border: 19px solid transparent;
border-top: 20px solid #777;
}
.e-mail .icono:after {
border: 18px solid transparent;
border-top: 19px solid white;
left: 1px;
}
background: #80C6FF; /* Fondo del botón */
box-sizing: border-box;
width: 160px; /* Ancho del botón */
height: 50px; /* Alto del botón */
border-radius:4px;
border:1px solid #7DC4FF; /* Borde del botón */
margin: 5px auto;
position: relative;
box-shadow: 0 0 #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
.e-mail:hover {
box-shadow: 0 5px #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
top:-5px;
}
.e-mail:active {
top:0;
box-shadow: 0 0 #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
}
.e-mail span {
line-height: 50px;
float: right;
display: inline-block;
width: 100px;
text-align: center;
color: #333; /* Color del texto */
text-shadow: 0 1px 2px rgba(255,255,255,.4); /* Sombra del texto */
font-size: 25px;
}
.e-mail .icono { /* Utiliza las mismas acotaciones que en el ejemplo del icono */
background: white;
box-sizing: border-box;
width: 40px;
height: 30px;
float: left;
margin: 9px 0 0 9px;
border: 1px solid #777;
position: relative;
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,.095)
}
.e-mail .icono:before, .e-mail .icono:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.e-mail .icono:before {
border: 19px solid transparent;
border-top: 20px solid #777;
}
.e-mail .icono:after {
border: 18px solid transparent;
border-top: 19px solid white;
left: 1px;
}
E-mail
Terminamos con este post. Nos vemos!
Muchas gracias!! Es un gran aporte y estoy dispuesto a probarlo.
ResponderEliminar