Viendo Tarjetas
John
Arquitecto e ingeniero
| Clase | define |
|---|---|
| W3-tarjeta | Recipiente para cualquier contenido HTML (con la frontera) |
| w3-card-2 | Recipiente para cualquier contenido HTML (2px sombra confinado) |
| W3-card-4 | Recipiente para cualquier contenido HTML (4PX sombra confinado) |
| W3-card-8 | Recipiente para cualquier contenido HTML (8 píxeles sombra confinado) |
| W3-card-12 | Recipiente para cualquier contenido HTML (12px rodeada de sombras) |
| W3-card-16 | Recipiente para cualquier contenido HTML (16px rodeada de sombras) |
| W3-card-24 | Recipiente para cualquier contenido HTML (24px rodeada de sombras) |
Tarjetas de color
Crear tarjetas de papel-como con las clases de tarjetas de W3, y utilizar una clase W3-color para añadir un color:
w3-card-2
W3-card-4
W3-card-8
Tarjeta de la foto
La lengua del Troll en Hardanger, Noruega
Ejemplo
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> Inténtalo tú mismo " tarjeta de contenido
Encabezamiento
Algunos ipsum dolor de texto .. Lorem sienta el amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ejemplo
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> Inténtalo tú mismo " Efecto de la libración
La clase W3-asomar-sombra añade un efecto de sombra en vuelo estacionario - esto hará que cualquier elemento se parece a una tarjeta en el ratón por encima (mismo estilo que W3-card-4).
Pase el ratón sobre mí!
Ejemplo
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> Inténtalo tú mismo " Más ejemplos
Solicitud de amistad
John Doe
Ejemplo
<div class="w3-card-8 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> Inténtalo tú mismo " John Doe
1 nueva solicitud de amigo
CEO de Mighty Escuelas. Marketing y publicidad. Buscando un nuevo trabajo y nuevas oportunidades.
Ejemplo
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-btn-block
w3-dark-grey">+ Connect</button>
</div> Inténtalo tú mismo "