Crear cuenta<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Como crear una viñeta o bocadillo con css</title>
<style>
ul { margin:0px; padding:0px;list-style:none;
} li { clear:both; overflow:hidden;margin-bottom:20px;
width:100%;
}.user {
float:left; width:100px; margin:0; }.user figcaption {
text-align:center;
}.description {
position:relative; /*
Esta separación a la izquierda, es el ancho de la imagen del usuario mas
el espacio que utilizaremos para la fecha con css
*/ margin:0 0 0 130px; padding:10px;border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
min-height:30px;
background-color:#ccc;
} /*
Aqui definimos la clase arrowLeft, que contendra la flecha en la
izquierda.
De esta manera, podemos crear la clase arrowDerecha, arrowTop y arrowLeft
para utilizar donde nos convenga
*/.arrowLeft::after {
position:absolute;left:-20px;
top:15px;content:"\00a0";
display:block; width:0px; height:0px;border-width:10px 20px 10px 0px;
border-style:solid;
border-color:transparent #ccc transparent transparent;
}.description p {
padding:0px; margin:0px; }</style>
</head>
<body>
<h1>Como crear una viñeta o bocadillo con css</h1>
<ul>
<li class="wrapper">
<!--imagen del usuario del usuario--><figure class="user">
<img src="" width="100" height="100">
<figcaption>usuario1</figcaption>
</figure>
<blockquote class="description arrowLeft">
<!--informacion del usuario--><p>Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción Aqui va la descripción</p>
</blockquote>
</li>
<li class="wrapper">
<figure class="user">
<img src="" width="100" height="100">
<figcaption>usuario2</figcaption>
</figure>
<blockquote class="description arrowLeft">
<p>Aqui va la descripción</p>
</blockquote>
</li>
</ul>
</body>
</html>
No hay comentarios