CSS Box Shadow - Membuat Efek Bayangan pada Area

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:

CSS Bayangan Outset:

div {
  -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:10px 10px 7px #222;    /* Firefox */
  box-shadow:10px 10px 7px #222;         /* W3C */
}

CSS Bayangan Inset:

div {
  -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */
  -moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
  box-shadow:inset 10px 10px 7px #222;         /* W3C */
}

10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

Top-Down	Inline
#kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kotak1'>OBJEK</div>	<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'> OBJEK </div>

Dan ini adalah contoh-contoh penerapan yang lebih detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas bagian mana yang harus menjadi perhatian:

-webkit-box-shadow: 10px 5px 7px #222;
-moz-box-shadow: 10px 5px 7px #222;
box-shadow: 10px 5px 7px #222;

-webkit-box-shadow: 0 10px 7px #222;
 -moz-box-shadow: 0 10px 7px #222;
box-shadow: 0 10px 7px #222;

-webkit-box-shadow: 10px 0 7px #222;
-moz-box-shadow: 10px 0 7px #222;
box-shadow: 10px 0 7px #222;

-webkit-box-shadow: 0 0 7px #222;
-moz-box-shadow: 0 0 7px #222;
box-shadow: 0 0 7px #222;

-webkit-box-shadow: 0 0 20px #222;
-moz-box-shadow: 0 0 20px #222;
box-shadow: 0 0 20px #222;

-webkit-box-shadow: 0 0 20px #f10c0c;
-moz-box-shadow: 0 0 20px #f10c0c;
box-shadow: 0 0 20px #f10c0c;

-webkit-box-shadow: 10px 5px 0 #222;
-moz-box-shadow: 10px 5px 0 #222;
box-shadow: 10px 5px 0 #222;

-webkit-box-shadow: -10px -5px 0 #222;
-moz-box-shadow: -10px -5px 0 #222;
box-shadow: -10px -5px 0 #222;

-webkit-box-shadow: inset 10px 5px 7px #222;
-moz-box-shadow: inset 10px 5px 7px #222;
box-shadow: inset 10px 5px 7px #222;

-webkit-box-shadow: inset 0 10px 7px #222;
-moz-box-shadow: inset 0 10px 7px #222;
box-shadow: inset 0 10px 7px #222;

-webkit-box-shadow: inset 10px 0 7px #222;
-moz-box-shadow: inset 10px 0 7px #222;
box-shadow: inset 10px 0 7px #222;

-webkit-box-shadow: inset 0 0 7px #222;
-moz-box-shadow: inset 0 0 7px #222;
box-shadow: inset 0 0 7px #222;

-webkit-box-shadow: inset 0 0 20px #222;
-moz-box-shadow: inset 0 0 20px #222;
box-shadow: inset 0 0 20px #222;

-webkit-box-shadow: inset 0 0 20px #f10c0c;
-moz-box-shadow: inset 0 0 20px #f10c0c;
box-shadow: inset 0 0 20px #f10c0c;

-webkit-box-shadow: inset 10px 5px 0 #222;
-moz-box-shadow: inset 10px 5px 0 #222;
box-shadow: inset 10px 5px 0 #222;

-webkit-box-shadow: inset -10px -5px 0 #222;
-moz-box-shadow: inset -10px -5px 0 #222;
box-shadow: inset -10px -5px 0 #222;

READ MORE - CSS Box Shadow - Membuat Efek Bayangan pada Area

CSS Input Text dan Textarea

textarea dengan css

textarea biasa

Dan ini adalah CSS untuk mengubah tampilannya:

blockquote.collapsed {
  margin:15px 30px;
  font:italic 14px Georgia,Serif;
  height:0px;
  padding:0px 0px;
  background-color:#FFE046;
  border:10px solid #FDD404;
  border-left-color:#D7362E;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
}

blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#47AD47;
  border:5px solid #156715;
  height:350px;
}

Letakkan kode tersebut di atas </style> atau ]]></b:skin>
Dari penampilan kode ini Saya rasa kalian sudah mengerti maksudnya.

input[type="text"] { ... }

textarea { ... }

Nah, untuk kode yang terakhir itu digunakan untuk membuat tampilan warna textarea dan input text menjadi berubah ketika kursor sedang aktif di dalamnya.

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

 


READ MORE - CSS Input Text dan Textarea

Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Seseorang bertanya tentang bagaimana cara membuat quote tertutup yang bisa membuka saat pointer berada di atasnya. Caranya sangat sederhana, yaitu dengan menggunakan CSS Pseudo Classes dan CSS Transisi:

Salin kode di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

blockquote.collapsed {
  margin:15px 30px;
  font:italic 14px Georgia,Serif;
  height:0px;
  padding:0px 0px;
  background-color:#FFE046;
  border:10px solid #FDD404;
  border-left-color:#D7362E;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
}

blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#47AD47;
  border:5px solid #156715;
  height:350px;
}

Proses aktivasi bisa dilakukan dengan cara menambahkan class="collapsed" pada elemen <blockquote> yang Anda inginkan:

<blockquote class="collapsed">
    Konten di sini...
</blockquote>

READ MORE - Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Membuat Sidebar Akordion dengan JQuery

jquery Accordion

Langkah-Langkah Membuat Sidebar Akordion.- Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode ini:

</head>

Salin kode di bawah ini dan letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');

    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut.

Sekarang coba simpan template Anda dan lihat apa yang terjadi pada sidebar blog Anda...

Tidak berhasil?

Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:

<div id='sidebar-wrapper-2'>
   <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
      <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
      <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
      <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
      <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
   </b:section>
</div>

Atau Anda juga bisa melihat ID sidebar secara langsung dari halaman blog Anda melalui Add-on Firebug atau aplikasi web developer sejenis lainnya (Click right mouse=> inspect Element:

firebug/Inspect Elemen

Nah, Anda bisa mengganti kode #sidebar-wrapper dengan ID yang Saya beri garis bawah untuk menciptakan efek akordion pada sidebar tersebut.

Satu tambahan lagi: Saat Anda mencoba menyentuh judul widget biasanya akan terasa sesuatu yang sedikit mengganjal. Ya, kursornya masih berupa kursor teks. Itu akan membuat elemen pemicu akordion tersebut menjadi tampak sebagai sesuatu yang tidak penting/tidak memiliki sesuatu yang penting (alah!). Kita harus mengubah pointer teksnya menjadi pointer jari telunjuk seperti halnya pointer standar yang selalu muncul pada semua link.

Ada dua cara untuk mengubah pointer teks pada elemen <h2> menjadi pointer telunjuk. Pertama, dengan cara menuliskannya secara langsung pada kode CSS seperti ini:

#sidebar-wrapper h2 {
  cursor:pointer;
}

Atau cukup sisipkan fungsi JQuery .css() di depan selektor yang mengarah kepada elemen h2 seperti ini:

$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Mengenai fungsi .addClass('active'), .removeClass('active') dan .toggleClass('active') itu semua hanya untuk menandai panel akordion yang sedang aktif/terbuka. Katakanlah kita ingin membuat elemen <h2> yang sedang aktif berubah warna menjadi merah, maka dalam kode CSS Anda tinggal menambahkan selektor #sidebar-wrapper h2.active dan memberinya warna merah seperti ini:

#sidebar-wrapper h2.active {color:red;}

Gambar Sidebar Akordion

Lihat DEMO

READ MORE - Membuat Sidebar Akordion dengan JQuery