Cara Memasukkan Gambar di W3.CSS

Tuhan punya rencana dibalik jatuhnya dirimu dalam kegagalan. Bangun! Ada hal indah dibalik kegagalanmu itu. Pada kesempatan kali ini saya akan berbagi ilmu kembali kepada teman-teman sekalian tentang bagaimana Cara Memasukkan Gambar di W3.CSS.

Sesuai judul kali ini kita akan membahas Cara Memasukkan Gambar di W3.CSS.
Untuk memasukkan gambar pada HTML kita pada umumnya sudah pada banyak yang tahu dengan memakai tag <img src=””>. Nah di W3.CSS juga seperti itu teman-teman. Pada W3.CSS juga sudah disediakan Class untuk membuat variasi gambar contohnya:

* Rouded : Membuat lengkungan/memperhalus sisi-sisi gambar.
* Circle : Membuat gambar menjadi bentuk bulat/lingkaran.
* Bordered : Membuat garis/border di bagian luar gambar.
* Text : Membuat text dalam gambar.

Penampakan nya seperti ini teman-teman:

* Rounded Image

* Circle Image

* Bordered Image

* Text Image

Oke langsung saja, berikut Cara Memasukkan Gambar di W3.CSS.

Pertama-tama, silahkan terlebih dahulu file index.html nya.

Kemudian, isi di bagian <head> link untuk menghubungkan HTML kita dengan library W3.CSS.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Setelah itu, isi di bagian <body> tag-tag di bawah.

<body class="w3-container">

<p>w3-round:</p>
<img src="img_lights.jpg" class="w3-round" alt="Norway" style="width:30%">

<p>w3-circle:</p>
<img src="img_fjords.jpg" class="w3-circle" alt="Norway" style="width:50%">

<p>w3-border:</p>
<img src="img_fjords.jpg" class="w3-border w3-padding-4 w3-padding-tiny" alt="Norway" style="width:50%">

<div class="w3-display-container w3-text-white">
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <div class="w3-display-topleft w3-container"><p>Top Left</p></div>
  <div class="w3-display-topright w3-container"><p>Top Right</p></div>
  <div class="w3-display-bottomleft w3-container"><p>Bottom Left</p></div>
  <div class="w3-display-bottomright w3-container"><p>Bottom Right</p></div>
  <div class="w3-display-middle w3-large">Middle</div>
</div>

</body>

Bagaimana teman-teman? cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Memasukkan Gambar di W3.CSS.

Semoga bermanfaat, terima kasih

Kategori