Comunidad de diseño web y desarrollo en internet

Crear un globo estilo contador con CSS3

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>

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate