Selasa, 21 Maret 2017

W3.Css Effects

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan membahas tentang w3css Effects yang di maksud di sini yaitu efek yang akan kita terapkan pada gambar,baiklah mari kita mulai.

  • Opacity Efect
Ada 4 macam opacity yaitu: Normal,Opacity Min,Opacity,Opacity Max

<!DOCTYPE html>
<html>
<head>
    <title>w3css Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container w3-row">
    <h2>Opacity Effect</h2>

    <p>Normal:</p>
    <img src="1.jpeg" style="width: 300px;">

    <P>Opacity Min:</P>
    <img src="1.jpeg" style="width: 300px;" class="w3-opacity-min">

    <p>Opacity:</p>
    <img src="1.jpeg" style="width: 300px;" class="w3-opacity">

    <p>Opacity Max:</p>
    <img src="1.jpeg" style="width: 300px;" class="w3-opacity-max">
</div><!--w3-container-->
</body>
</html>
Dan inilah hasilnya




  •  Grayscale
Untuk grayscale sama dengan opacity  yaitu ada 4.
 <!DOCTYPE html>
<html>
<head>
    <title>w3css Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container w3-row">
    <h2>Grayscale</h2>

    <p>Normal:</p>
    <img src="1.jpeg" alt="gambar1" style="width: 300px;">

    <P>Grayscle Min:</P>
    <img src="1.jpeg" alt="gambar2" style="width: 300px;" class="w3-grayscale-min">

    <p>Grayscale:</p>
    <img src="1.jpeg" alt="gambar3" style="width: 300px;" class="w3-grayscale">

    <p>Grayscale Max (black and white):</p>
    <img src="1.jpeg" alt="gambar4" style="width: 300px;" class="w3-grayscale-max">
</div><!--w3-container-->
</body>
</html>
Dan inilah hasilnya



  • Sepia
Ini juga ada 4 macam

<!DOCTYPE html>
<html>
<head>
    <title>w3css Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container w3-row">
    <h2>Sepia</h2>

    <p>Normal:</p>
    <img src="1.jpeg" alt="gambar1" style="width: 300px;">

    <P>Sepia Min:</P>
    <img src="1.jpeg" alt="gambar2" style="width: 300px;" class="w3-sepia-min">

    <p>Sepia:</p>
    <img src="1.jpeg" alt="gambar3" style="width: 300px;" class="w3-sepia">

    <p>Sepia Max:</p>
    <img src="1.jpeg" alt="gambar4" style="width: 300px;" class="w3-sepia-max">
</div><!--w3-container-->
</body>
</html>
Dan inilah hasilnya



  •  Hover Effect
Ini di gunakan untuk memberikan efek saat mouse hover ada 3 macam yaitu: Opacity,Grayscale dan Sepia.
<!DOCTYPE html>
<html>
<head>
    <title>w3css Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container w3-row">
    <h2>Hover Efect</h2>


    <P>Hover Opacity</P>
    <img src="1.jpeg" alt="gambar2" style="width: 300px;" class="w3-hover-opacity">

    <p>Grayscale</p>
    <img src="1.jpeg" alt="gambar3" style="width: 300px;" class="w3-hover-grayscale">

    <p>Sepia</p>
    <img src="1.jpeg" alt="gambar4" style="width: 300px;" class="w3-hover-sepia">
</div><!--w3-container-->
</body>
</html>
Dan inilah hasilnya

  • Hover Effect



  •  Hover Grayscale


  • Hover Sepia



Oke itu tadi mengenai postingan saya mengenai berbagai efek gambar dengan w3css semoga bermanfaat,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb






Share:

0 komentar:

Posting Komentar