angezeigte Karten
John
Architekt und Ingenieur
| Klasse | Definiert |
|---|---|
| w3-Karte | Container für alle HTML-Inhalte (mit Rahmen) |
| w3-card-2 | Container für alle HTML-Inhalte (2px umrandeten Schatten) |
| w3-Card-4 | Container für alle HTML-Inhalte (4px umrandeten Schatten) |
| w3-Card-8 | Container für alle HTML-Inhalte (8px umrandeten Schatten) |
| w3-Card-12 | Container für alle HTML-Inhalte (12px grenzte Schatten) |
| w3-Card-16 | Container für alle HTML-Inhalte (16px grenzte Schatten) |
| w3-Card-24 | Container für alle HTML-Inhalte (24px grenzte Schatten) |
Farbige Karten
Erstellen papierartige Karten mit den w3-Card - Klassen, und verwenden Sie eine w3-Farbklasse eine Farbe hinzuzufügen:
w3-card-2
w3-Card-4
w3-Card-8
Foto-Karte
Die Trollzunge in Hardanger, Norwegen
Beispiel
<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> Versuch es selber " Karten-Inhalt
Kopfzeile
Einige Text .. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Beispiel
<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> Versuch es selber " Hover-Effekt
Die w3-Hover-Schatten - Klasse fügt einen Schatteneffekt auf schweben - das wird jedes Element , wie eine Karte auf Mouseover ( die gleiche Art wie w3-Card-4) zu suchen.
Bewegen Sie die Maus über mich!
Beispiel
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> Versuch es selber " Mehr Beispiele
Frage von einem Freund
John Doe
Beispiel
<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> Versuch es selber " John Doe
1 neue Freundschaftsanfrage
CEO von Mighty Schulen. Vermarktung und Werbung. Ich suche einen neuen Job und neue Chancen.
Beispiel
<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> Versuch es selber "