Hola, que tal a todos!, les quiero compartir este sencillo y útil tutorial para los que se están iniciando en maquetación web, de cómo crear un globo estilo contador con CSS3. Esto nos será útil para poder personalizar los contadores sociales en nuestros sitios web, así como también los comentarios en nuestro blog.
Les dejo el código completo y la explicación en el videotutorial.
Código :
<!DOCTYPE HTML>
<html lang="es-NI">
<head>
<meta charset="UTF-8">
<title>Globos</title>
<style type="text/css">
.globo
{
background: #333;
border-radius: 15px;
color: white;
padding: 1em;
position: absolute;
text-align: center;
width: 250px;
}
.globo:after
{
bottom: -15px;
border-bottom: 8px solid transparent;
border-left:8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #333;
content: " ";
position: absolute;
}
</style>
</head>
<body>
<div class="globo">
<em>25K</em>
</div>
</body>
</html>
Por el 07 de Enero de 2013
Por krlosr_16 el 07 de Enero de 2013
Por lenincasco el 07 de Enero de 2013
-blog :
Efectivamente, se puede realizar asi, por eso al principio del video lo comento, pero quise al final mostrarlo con "after".
http://cssarrowplease.com/