Skip to content Skip to sidebar Skip to footer

Tutorial CSS3 Box Shadow Hover

Tutorial CSS3 Box Shadow Hover



Tutorial CSS3 Box Shadow Hover 

Sudah lama aku tidak menuliskan tutorial CSS, atau totorial desain blog yang lain. Aku membuat tutorial ini adalah khusus untuk template blogger, buat blogger pemula. Sebelumbnya aku aku pernah juga menuliskan tentang border shadow keliling blog. Sama saja sebenarnya, dan tutorial CSS3 box shadow yang akan aku share disini lebih simple dan bisa diterapkan di bagian seperti di bawah ini:

1. Widget sedebar
    .sidebar .widget {

2. Post outer (kalau ada)
     .post-outer {

3. Main
     .main-outer {

4. Content outer
     .content-outer {

Ada 2 contoh kodenya di bawah ini, kode yang kedua kalau diterapkan hasilnya seperti yang terlihat pada gambar paling atas sendiri, dan kode yang pertama contohnya seperti di gambar di bawah ini:


Tutorial CSS3 Box Shadow Hover



Kode pertama:

  box-shadow:1px 1px 25px #120000;

Kode kedua:

  border-radius: 15px;
  box-shadow:1px 1px 25px #120000;

Warna merah adalah ukuran px, bisa diubah sesuai keinginan.
Warna pink adalah kode warna, juga bisa diubah sesuai keinginan.

Bedanya adalah kode yang pertama tidak ditaruh border-radius, o iya sampai lupa memberi cara meletakkan kodenya:

Dasbor Blogger > Template > edit HTML > kemudian cari kode di antara no 1-4 diatas untuk meletakkan kode di atas di bawahnya, terserah Anda mau meletakkan dimana. Contoh gambar yang aku sertakan disini adalah pada content outer. Jangan lupa tekan pratinjau dulu untuk mengetahui kodenya work atau tidak, kalau berhasil baru simpan template. Kalau ada pertanyaan silahkan untuk menuliskan di komen.

Post a Comment for "Tutorial CSS3 Box Shadow Hover "