Contoh Kreasi CSS3

Bookmark and Share

Text Dengan CSS3

Coba anda simak baik-baik tulisan diatas tersebut, jangan beranggapan kalau tulisan diatas tersebut adalah gambar. Seperti itulah keajaiban dari CSS3 sekarang ini. 
Bagi yang senang mengutak atik template atau yang senang dengan mendesain halaman blog, bagi mereka contoh seperti ini tidak asing lagi. Tetapi saya mau mencoba share saja untuk anda yang baru mengenal kode seperti ini. 


Perhatikan kode berikut ini; 
<div id="b2b">
<div id="api">Tulisan/Text Anda Disini</div> 
</div>   
Buatlah kode seperti diatas di halaman posting anda, lalu buatlah lagi kode seperti dibawah ini di element HTML anda, taruh sebelum kode  ]]></b:skin>

#b2b {     width: 500px;     margin: 25px auto; }  
#b2b div {    margin: 0 0 20px 0;}
#api {    /* text-shadow: 0px 0px 10px #666; */    text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;    color: black;        font-size: 40px;     margin: 0 0 15px 0; }

Jika sudah, coba anda kembali di postingan anda tadi. Coba lihat hasilnya apakah anda berhasil membuatnya atau belum. Jika belum bisa, anda koreksi sekali lagi. Tapi jika belum bisa juga, tanyakan langsung kepada saya letak kesulitannya. 

Berikutnya saya akan berikan contoh yang lainnya, bisa anda lihat sebagai berikut; 

Shadow Box yang nampak seperti background berbayang bisa membuat template kita menjadi elegan. Kita juga bisa menaruh atau menempatkan sesuai keinginan kita. Memang agak jarang orang ngeblog mengetahui hal seperti ini, tetapi dengan kemudahan css3 ini kita bisa lebih banyak berkreasi dengan template kita. 

Baik, sekarang kita langsung praktekkan saja. Disini saya menggunakan panggilan kode
<div id="b2b">
<div id="ShadowBox">Tulisan/Text Anda Disini</div> 
</div>
Kode diatas adalah dimana anda akan menempatkan background shadow. Bisa di letakkan di postingan maupun sidebar.

Lalu langkah selanjutnya membuat kode Css3 yang ditempatkan pada halaman HTML anda. 
#b2b {     width: 500px;     margin: 25px auto; }  
#b2b div {    margin: 0 0 20px 0;}

#ShadowBox { box-shadow: 5px 5px 5px #888;  -webkit-box-shadow: 5px 5px 5px #888;  -moz-box-shadow: 5px 5px 5px #888;  /* Top Offset, Right Offset, Size, Color */   padding: 20px 20px 1px 20px;  background: #eee;}  
Sekarang coba anda lihat hasilnya, dan kode diatas yang kode warna maupun ukuran bisa anda ubah menurut selera kalian.

Animasi yang satu ini entah namaya apa, tetapi cukup lumayan juga untuk berkreasi dengan template anda. Animasi seperti ini juga masih menggunakan kode berbasis CSS3. 
Sekarang coba anda simak keterangan berikut ini.
Untuk yang satu ini saya memakai panggilan (#fader). Jadi contohnya menjadi begini    
<div id="b2b"><div id="fader">Tulisan/Text Anda Disini</div> </div> ini untuk kode dimana tulisan anda akan mengeluarkan background seperti ini.

Sekarang kita tinggal membuat kode css3nya. Contohnya bisa anda lihat seperti ini. 
#b2b {     width: 500px;     margin: 25px auto; }  
#b2b div {    margin: 0 0 20px 0;}
#fader {    opacity: 0.5;    -webkit-transition: opacity 0.3s linear;        background: #900;    color: white;    padding: 10px;}#fader:hover {    opacity: 1.0;}

Kesimpulannya dari kode diatas tersebut sebagai berikut;
*Kode #b2b  adalah untuk layout dari keseluruhan animasi diatas, jadi tulisan b2b bisa anda ganti terserah dengan tulisan anda sendiri. Tetapi nantinya disaat pemanggilan dengan kode <div> anda juga harus memakai kata baru yang anda ganti tadi.
*Kode #api, #ShadowBox, dan #fader adalah untuk membuat background maupun teks menjadi seperti animasi tersebut. Kata api, ShadowBox dan fader juga bisa anda ganti dengan tulisan anda sendiri, tapi nantinya saat pemanggilan dengan kode <div> itu berarti anda juga harus merubah kata yang anda buat sendiri.


Mungkin sedikit contoh diatas bisa membantu kita yang senang dengan mengutak atik template. Coba anda praktekan, bila masih menemui kesulitan tanya langsung di kotak komentar. Disitu kita bisa share bersama. 
Selamat berkreasi.



{ 0 komentar... Views All / Send Comment! }

Posting Komentar

Jangan Lupa berikan komentar yah, agar budaya saling menghargai selalu ada.