'SELAMAT DATANG' di blog ianhacks. Semoga apa yang saya berikan bisa membuat sobat semua lebih maju dan lebih kreatif dalam segala hal..
  • Web
  • ianhacks
  • Box dengan Efek Gelap Terang

    Salam takjup buat semuanya, saya mulai tampil kembali untuk melakukan posting agar pembaca semua tidak merasa bosan dan semoga rekan blogger dan juga lainnya tidak merasa jenuh dengan saya. OK langsung ke TKP.

    Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.

    .boxwidget {
    height: 250px;
    overflow: auto;
    margin: 20px 4px 10px;
    padding: 15px 8px;
    background: #111;
    color: #666;
    border: 2px solid #555;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    opacity: 0.4;
    filter:alpha(opacity=40);
    -o-transition: all ease-in 1.2s;
    -moz-transition: all ease-in 1.2s;
    -webkit-transition: all ease-in 1.2s;
    }
    .boxwidget:hover {
    background: #660000;
    color: #eee;
    opacity: 1.0;
    filter: alpha(opacity=100);
    }

    Untuk menggunakan box tersebut, Sobat blogger mania harus menggunakan kode xHTML seperti di bawah ini:

    <div class="boxwidget">
    Di sini widget atau Teks diletakkan!
    </div>

    • Simpan kode CSS di atas kode ]]></b:skin>
    • Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka dan tag penutup .

     Selamat Mencoba semoga berhaail, dan Selamat berkarya melalui blog....

    x_3bfae512

    Share this:

    Post a Comment

     
    Copyright © Sharing Ilmu Pengetahuan | Ianhacks. Designed by OddThemes & Best Wordpress Themes 2018