UTTA VIFER'S

Sekarang kita akam mempelajari efek blogger yang berguna untuk Menampilkan Gambar Transparan, Mouseover Effect. Apakah sahabat blogger mengetahui efek tersebut.


Cara kerja efek gambar transparan di bawah ini tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja.

1. Contoh mouseover effect dari redup ke lebih terang (diset langsung dalam gambar)


2. Contoh mouseover effect dari terang ke redup (diset langsung dalam gambar)


Mungkin agak ribet juga ya jika setiap image harus diset satu-persatu nilainya propertinya, nah agar setiap postingan rekan langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS ini:

Berikut langkah - langkah project latihan kita kali ini.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Lalu Masukkan Salah satu Kode CSS dibawah ini, tepat diatas kode ]]></b:skin>


1. Contoh mouseover effect dari redup ke lebih terang

.post img{opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6}
.post img:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1}

2. Contoh mouseover effect dari terang ke redup

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

6. Save, lihat hasilnya,..

NB: Setahu saya Firefox biasanya menggunakan property opacity:x untuk melakukan tranparancy, berbeda dengan IE yang menggunakan filter:alpha(opacity=x).  Pada Firefox opacity:x nilai pada x dapat diisi dengan value antar 0.0 -1.0 sedangkan pada IE filter:alpha(opacity=x) nilai x antara 0-100.

Sekaranglah saatnya kita bermain script jquery yang di padukan dengan CSS3. Di sini fungsi CSS3 hanya untuk memodifikasi gambar yang akan kita buat berjalan.Tutorial ini saya dapatkan di http://jquery.com/ namun di sini sedikit di kembangkan. Tutorial kali ini kita akan membahas bagaimana membuat gambar berjalan dengan bantuan jquery, CSS3 dan gambar tersebut akan kembali lagi dengan gambar yang berbeda, di sini sobat juga bisa menghentikan gambar untuk melihat animasi berikutnya, bisa menambahkan fungsi hover dengan scale, skew, blur, atau yang lainnya itu semua tergantung kreasi dari sobat. Untuk melihat animasi yang tercipta antara jquery dan css3 sobat bisa melihat contoh di bawah dengan mengklik tombolnya. Silahkan di coba terlebih dahulu sebelum kita membahasnya, siapa tau sobat tertarik ingin membuatnya.




Apabila sobat tertarik ingin membuatnya silahkan masukan kode di bawah ini di dalam postingan, di edit html bukan di compose. Setelah itu di preview terlebih dahulu untuk melihat hasilnya karena siapa tau sobat ingin berkreasi yang lain.

<style type="text/css">

#amdhas { margin:3px; width:320px; height:230px;position:relative; left:0px; top:10px;background:url(http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc4/149553_104798816255710_100001767766955_30261_1151485_n.jpg);display:none;-moz-border-radius: 10px;-webkit-border-radius: 10px;}#amdhas.potobaru {background:url(http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash2/72788_104800449588880_100001767766955_30285_1317169_n.jpg); -webkit-box-shadow: 0px 0px 60px red;-moz-box-shadow: 0px 0px 60px red;-moz-border-radius:10px;-webkit-border-radius:10px;}#mulai {cursor:pointer;text-shadow:2px 2px 6px #333;color:red;font-size:15px;background:#eee;margin-bottom:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;padding:8px;width:20%; -webkit-box-shadow: 0px 0px 60px #333;-moz-box-shadow: 2px 2px 4px #333;}#stop {cursor:pointer;text-shadow:2px 2px 6px #333;color:red;font-size:15px;background:#eee;-moz-border-radius: 10px;-webkit-border-radius: 10px;padding:8px;width:20%; -webkit-box-shadow: 0px 0px 60px #333;-moz-box-shadow: 2px 2px 4px #333;}

</style><script src="http://code.jquery.com/jquery-latest.min.js">

</script>
<div id="mulai">
Jalankan !</div>
<div id="stop">
Berhenti !</div>
<div id="amdhas">
</div>
<script>

$("#mulai").click(function () {$("#amdhas").show("slow");$("#amdhas").animate({left:'+=900'},5000);$("#amdhas").queue(function (){$(this).addClass("potobaru");$(this).dequeue();});$("#amdhas").animate({left:'-=900'},1500);$("#amdhas").queue(function (){$(this).removeClass("potobaru");$(this).dequeue();});$("#amdhas").slideUp();
});$("#stop").click(function () {$("#amdhas").clearQueue();$("#amdhas").stop();
});
</script>

Keterangan :
Seperti contoh di atas apabila sobat mengklik Jalankan! maka gambar akan berjalan ke kanan, Nah.. di situ sobat bisa berkreasi seberapa jauh gambar itu berjalan dan kembali lagi. Silahkan amati kode dibawah:

.animate({left:'+=900'},5000);

Kode tersebut sobat bisa ganti valuenya di +=900 apabila semakin besar maka gambar akan bergerak semakin jauh.
Dan teks yang berwarna merah anda bisa ganti dengan alamat URL image sobat.
Untuk css3nya sobat bisa berkreasi sendiri.

Box-shadow yang berarti bayangan box ini adalah properti baru dalam css3 (Cascading Style Sheets) level 3. Pada artikel ini saya akan menjelaskan sedikit tentang box-shadow dan juga propertinya yang mudah-mudahan dapat di cerna oleh sahabat blogger semua. Di dalam pembuatan box-shadow kita bisa menerapkan rgba untuk warna atau hanya warna css dasar saja di sini saya akan menjelaskan yang simple saja tanpa rgba,itu di pembahasan selanjutnya nah..berikut adalah sintaks dan properti yang ada di box-shadow:


h-offset CSS3 box-shadow

h-offset: yang di mana value pertama contoh: box-shadow: 10px 0 0 #000;  10px yang berwarna merah adalah dapat memberikan bayangan ke kiri dan ke kanan, apabila kita memberikan nilai positif maka bayangan akan ke kanan tetapi sebaliknya apabila kita memberikan nilai negatif maka bayangan akan ke kiri lihat perbedaan dua contoh di bawah:









v-offset CSS3 box-shadow

V-offset ini sebelumnya pernah di jelaskan di artikel cara membuat text-shadow namun tak ada salahnya kita mengulang, v-offset dalam box-shadow berfungsi untuk memberi bayangan ke atas dan ke bawah, apabila nilai value semakin rendah maka bayangan akan ke atas dan apabila semakin besar maka bayangan akan ke bawah nilai value yang mau di berikan ada di tengah setelah h-offset, perhatikan contoh gambar di bawah:











BLUR CSS3 box-shadow

Kalau yang ini tidak ada nilai minus karena ini value terakhir yang akan memberikan bayangan blur di sini saya akan memberikan contoh warna yang berbeda agar terlihat blurnya silahkan di perhatikan






INSET css3 BOX-shadow

Yang di maksud dengan fungsi inset dalam box-shadow css3 adalah memberikan bayangan di dalam, kalu yang tadi kita bahas adalah bagaimana memberikan bayangan di luar kotak, nah.. dengan menambahkan perintah inset kita bisa memberikannya di dalam kotak, untuk lebih jelasnya silahkan lihat kotak di bawah yang sudah di berikan inset:






BISAKAH GAMBAR DI BERIKAN box-shadow?


Ini yang menjadi pertannyaan karena box-shadow hanya terlihat bayangan kotak tapi tenang saya akan memberikan sebuah soal agar sobat bisa berkreasi saya hanya memasukan background url jadi tidak perlu memasukannya dalam div html tetapi cukup di css contoh:


<style type="text/css">

#box-bayangan{background:url(DI SINI ADALAH URL GAMBAR YANG INGIN SOBAT BERIKAN);margin:0 auto;padding:10px;width:280px;height:200px; -moz-box-shadow: 0 0 100px  #000 ;
-webkit-box-shadow: 0 0 100px  #000;


 box-shadow: 0 0 100px #000;

-moz-border-radius:0px;-webkit-border-radius:0px;}

</style>

<div id="box-bayangan">

</div>


nah.. kode di atas sobat bisa masukan langsung ke dalam postingan sobat, dan jangan lupa tentukan gambarnya, di sana saya tidak memberikan nilai valuenya hanya di blur yaitu 100px untuk value yang lain sobat tinggal menentukannya dan untuk hover.Kalau sobat mencoba cara membuat box-shadow saya yakin pasti ketagihan dan semakin penasaran dengan CSS3,,oke.. untuk sekedar latihan, atau sobat bisa berkreasi sendiri?? ITU LEBIH BAIK...

CONTOH GAMBAR YANG DI BERIKAN BOX-SHADOW






CONTOH box-shadow DENGAN fungsi HOVER









CONTOH GAMBAR DENGAN INSET

CONTOH GAMBAR DENGAN FUNGSI HOVER

CONTOH GAMBAR DENGAN INSET DAN HOVER
Siip!!! pake telor sama sambel saus, akhirnya beres untuk hasil dan penilaian tergantung dari sang pembaca,, mohon saran dan kritiknya apabila ada kesalahan dalam artikel box-shadow css3 ini, akhir kata selamat mencoba, semoga berguna, semoga bermanfaat, kreasikan ilmu yang ada dan salam tiga jari!!!!

Sebelumnya saya pernah membahas tutorial membuat garis lengkung pada kolomr. Mungkin kurang lengkap dan masih banyak yang menanyakan hal ini kepada saya. Sayangnya kode border-radius ini tidak support dengan internet explorer. Jika sobat suka menggunakan ie sebagai browser utama, sobat tidak akan bisa merasakan hebatnya css untuk garis lengkung ini.

-Moz-Border-Radius (Untuk Mozilla)

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px;  border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

-Webkit-Border-Radius (Untuk Safari)

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Border-Radius (Support Opera 10.5)

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Jika ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang berwarna orange diatas kedalam css sidebar blog sobat.

Kembali lagi dengan pelajaran seputar css, dan kali ini saya akan berikan tutorial singkat tentang css box shadow. Box shadow ini dapat sobat gunakan pada kotak postingan, sidebar atau dapat juga sobat gunakan sebagai pemanis dalam artikel blog sobat. Seperti contoh dibawah ini :
 


kode css untuk contoh diatas adalah : 

#contoh {
-moz-box-shadow: 10px 10px 5px #222;
-webkit-box-shadow: 10px 10px 5px #222;
box-shadow: 10px 10px 5px #222;
}

Adapun 4 bagian yang terdapat dalam box shadow adalah :

• Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
• Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
• Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
• Warna dari bayangan. 

Berikut 6 contoh css box shadow yang bisa sobat pelajari dan gunakan :

A	B	C
D	E	F

Kode css untuk ke-6 contoh box shadow diatas adalah :

#Contoh_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}

#Contoh_B {
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}

#Contoh_C {
-moz-box-shadow: -5px -5px 0 5px #222;
-webkit-box-shadow: -5px -5px 0 5px #222;
box-shadow: -5px -5px 0 5px #222;
}

#Contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #222;
-webkit-box-shadow: -5px -5px 5px 5px #222;
box-shadow: -5px -5px 5px 5px #222;
}

#Contoh_E {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

#Contoh_F {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

Jika sobat ingin menambahkan box shadow pada kotak postingan sobat, maka cari saja kode seperti di templates sobat :

.Post {…………………………dst
}

kemudian tambahkan salah satu kode diatas sehingga hasilnya kurang lebih akan seperti ini :

.post {……………………;
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222; }

Bagaimana jika bayangan berada didalam kotak (inner shadow), yang harus sobat tambahkan hanya kode inset pada setiap bagian, contoh :

F

dan kodenya adalah :

#Contoh_F {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

Css box shadow bekerja sempurna pada browser mozilla firefox, untuk browser lain hanya beberapa saja yang dapat berfungsi dengan sempurna. Semoga bermanfaat .. tetap belajar ya biar tambah pintar