Senin, 13 Maret 2017

CSS : Pseudo Class

   No comments

Assallamualikum
         kawan , disini saya akan sedikit berbagi post tentang pembuatan pseudo class dengan css.

1.PENGERTIAN 
        Pseudo Class dalam CSS digunakan untuk  menentukan keadaan khusus dari suatu unsur.

2.ALAT & BAHAN

  1. Pc /Laptop
  2. Sublime Text
  3. Browser
         Kali ini saya akan membuat file html yang akan membuat button hover dan tulisan yang apabila kursor di tempatkan pada tulisan itu maka akan muncul notifikasi di bawahnya.

 buat file html , dan masukan css di dalam tabel
!DOCTYPE html>
<html>
<head>
    <title>CSS Pseudo Kelas</title>
    <style type="text/css">
    h1 {
        font-family: raleway;
        color: red;
        text-align: center;
    }
    button {
        background-color: blue;
        text-align: center;
        font-family: raleway;
        font-size: 15px;
        padding: 20px 50px;
    }
    button:hover{
        background-color: green;
    }
    p {
        font-family: raleway;
        display: none;
        background-color: yellow;
        padding: 20px;
    }

    div:hover p {
        display: block;
    }
    </style>
</head>
<body>
<center>
<h1> Belajar CSS Pseudo </h1>
<br>
<br> <button class="button"> Arahkan Kursor ke sini </button>
<br>
<br>
<br>
<div> Arahkan kursor anda pada tulisan ini !
    <p> Jeng Jeng , Saya akan muncul ! </p>
</div>
</center>
</body>
</html>

Maka saat kita run di browser dan kursor kita arahkan pada button dan tulisan yang terjadi adalah akan seperti gambar di bawah ini :



3.KESIMPULAN :
        Pada penggunaan Pseudo Class biasanya digunakan unuk memberi notifikasi / keterangan  tentang tulisan yang yang kurang jelas. Dengan cara mengarahkan kursor ke tulisan tersebut.

wasalamualaikum

0 komentar:

Posting Komentar