Cómo - Chips de contacto
Aprenda a crear chips de contacto con CSS.
Fichas de contacto
Juan Pérez
jane fila
×
Crear fichas de contacto
Paso 1) Agregar HTML:
Ejemplo
<div class="chip">
<img src="img_avatar.jpg" alt="Person"
width="96" height="96">
John Doe
</div>
Paso 2) Agregar CSS:
Ejemplo
.chip {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1;
}
.chip img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}
Chips de contacto que se pueden cerrar
Para cerrar/ocultar el chip de contacto, agregue un elemento con un atributo de evento onclick que diga "cuando haga clic en mí, oculte mi elemento principal", que es el contenedor div (clase="chip").
Ejemplo
<div class="chip">
<img src="img_avatar.jpg" alt="Person"
width="96" height="96">
John Doe
<span class="closebtn"
onclick="this.parentElement.style.display='none'">×</span>
</div>
Sugerencia: use la entidad HTML " ×
" para crear la letra "x".
A continuación, aplique estilo al botón de cerrar:
Ejemplo
.closebtn {
padding-left: 10px;
color: #888;
font-weight: bold;
float: right;
font-size: 20px;
cursor: pointer;
}
.closebtn:hover
{
color: #000;
}