Sabtu, 25 Maret 2017

W3.Css Images

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan membahas mengenai sebuah style yang ada pada W3.Css yaitu w3.css images style ini di gunakan untuk mengatur tampilan pada gambar misalnya untuk memberi border,bentuk gambar dan lain sebagainya mari kita bahas satu persatu.

  • Rounded Image.
Style ini berguna untuk  membuat sudut pada gambar menjadi melengkung

<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
    <h1>Contoh Rounded Image</h1>
    <img src="1.jpg" class="w3-round" alt="gambar">
</div>
</body>
</html>
Dan hasilnya seperti di bawah


  • Circle Image
Seperti namanya style ini di gunakan untuk memberi efek circle pada gambar
<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
    <h1>Contoh Circle Image</h1>
    <img src="1.jpg" class="w3-circle" alt="gambar">
</div>
</body>
</html>
 Dan hasilnya seperti berikut ini


  • Bordered Image
Style ini di gunakan untuk memberikan border pada sudut gambar.
<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
    <h1>Contoh Bordered Image</h1>
    <img src="1.jpg" class="w3-border" alt="gambar" style="padding: 4px;width: 50%">
</div>
</body>
</html>
Dan inilah hasilnya


  • Image As Card 
Tampilan gambar dengan style ini hampir mirip dengan border hanya saja memiliki tambahan efek shadow / bayangan.
<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
    <h1>Image As Card</h1>
    <img src="1.jpg" class="w3-card" alt="gambar" style="padding: 4px;width: 50%">
</div>
</body>
</html>
Dan inilah hasilnya


Ya itu tadi pembahasan mengenai style image pada w3.css semoga bermanfaat sampai jumpa di postingan selanjutnya.


Wassalamualaikum Wr.Wb
Share:

0 komentar:

Posting Komentar