Visualizzazione Cards
Giovanni
Architetto e ingegnere
| Classe | definisce |
|---|---|
| w3-card | Contenitore per qualsiasi contenuto HTML (con bordi) |
| w3-card-2 | Contenitore per qualsiasi contenuto HTML (2px ombra Delimitata) |
| w3-card-4 | Contenitore per qualsiasi contenuto HTML (4px ombra Delimitata) |
| w3-card-8 | Contenitore per qualsiasi contenuto HTML (8px ombra Delimitata) |
| w3-card-12 | Contenitore per qualsiasi contenuto HTML (12px delimitato ombra) |
| w3-card-16 | Contenitore per qualsiasi contenuto HTML (16px delimitato ombra) |
| w3-card-24 | Contenitore per qualsiasi contenuto HTML (24px delimitato ombra) |
Carte colorate
Creare schede di carta-come con le classi w3-carte, e utilizzare una classe w3 a colori per aggiungere un colore:
w3-card-2
w3-card-4
w3-card-8
Photo Card
La lingua del Troll di Hardanger, Norvegia
Esempio
<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> Prova tu stesso " Scheda contenuto
Intestazione
Alcuni testi .. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.
Esempio
<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> Prova tu stesso " effetto hover
La classe w3-hover-ombra aggiunge un effetto ombra al passaggio del mouse - questo renderà ogni elemento apparire come una carta al passaggio del mouse (stesso stile di w3-card-4).
Passa il mouse sopra di me!
Esempio
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> Prova tu stesso " Altri esempi
Richiesta di amicizia
John Doe
Esempio
<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> Prova tu stesso " John Doe
1 nuova richiesta di amicizia
CEO di Mighty scuole. Marketing e pubblicità. Alla ricerca di un nuovo lavoro e nuove opportunità.
Esempio
<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> Prova tu stesso "