tutorial pengembangan web terbaru
 

W3.CSS Kartu-kartu


menampilkan Kartu

Avatar

John

Arsitek dan insinyur


Header

Beberapa teks .. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Footer

Kelas mendefinisikan
w3-card Wadah untuk setiap konten HTML (Dengan perbatasan)
w3-card-2 Wadah untuk setiap konten HTML (2px shadow border)
w3-card-4 Wadah untuk setiap konten HTML (4 piksel shadow border)
w3-card-8 Wadah untuk setiap konten HTML (8px shadow border)
w3-card-12 Wadah untuk setiap konten HTML (12px berbatasan shadow)
w3-card-16 Wadah untuk setiap konten HTML (16px berbatasan shadow)
w3-card-24 Wadah untuk setiap konten HTML (24px berbatasan shadow)

Kartu berwarna

Membuat kartu seperti kertas dengan kelas w3-card, dan menggunakan kelas w3-warna untuk menambahkan warna:

w3-card-2

w3-card-4

w3-card-8

Contoh (Kartu Kuning)

<div class="w3-card w3-yellow">
  <p>w3-card</p>
</div>
Cobalah sendiri "

Contoh (Putih Kartu)

<div class="w3-card">
  <p>w3-card</p>
</div>
Cobalah sendiri "

Kartu foto

Trolltunga

Lidah Troll di Hardanger, Norwegia


Contoh

<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>
Cobalah sendiri "

Konten kartu

Header

Beberapa teks .. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Footer

Contoh

<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>
Cobalah sendiri "

Hover Effect

Kelas w3-hover shadow menambahkan efek bayangan di hover - ini akan membuat setiap elemen terlihat seperti kartu pada mouse-over (gaya yang sama seperti w3-card-4).

Arahkan kursor saya!

Contoh

<div class="w3-green w3-hover-shadow w3-center">
  <p>Hover over me!</p>
</div>
Cobalah sendiri "

Contoh lebih

Permintaan pertemanan

Avatar

John Doe




Contoh

<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>
Cobalah sendiri "

John Doe

1 permintaan teman baru


Avatar

CEO di Perkasa Sekolah. Pemasaran dan Periklanan. Mencari pekerjaan baru dan kesempatan baru.


Contoh

<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>
Cobalah sendiri "