Penggunaan CSS Sprite

Assalamu alaikum, halo para Monster.. setelah Moder ngepost sebelumnya tentang Membuat grafitity Seendiri . nah kali ini Moder ngepost lagi tentang Penggunaan CSS Sprite. Apa itu CSS Sprite? CSS sprite adalah suatu gambar yang di dalamnya terdiri atas beberapa gambar dengan menggunakan css sebagai kode pemanggilnya. Dari Awal memmbuat css sprite ini memang sulit eh tetapi belajar dari beberapa mastah dan situs belajar web seperti w3schools, DTE :], dan sebagainya sekarang udah bisa kreasikan dengan imajinasi sendiri. CSS sprite terbagi atas 2 yaitu css sprite manual dan auto,... sebelum itu ... Okey, bacalah ini sejenak. Sedikit Pencerahan... pertama-tama bersihkan pikiran anda dari pikiran negative. Lalu pikirkan imajinasi dari dirimu sendiri jangan ngontek, dan yang terakhir harus bisa menggunakan Kreatifitas, Logika, Matematika dan Bahasa Inggris.wek.. kok matematika sama bahasa inggris??? Yah percaya saja, dalam mengedit template pasti ada Angka, Perkalian, Pengurangan, Pertambahan margin atau apalah...!! dan satu lagi yaitu pengukuran.. nah pengukran di layar itu berbeda dengan yang asli, di layar pake pixel dan untuk mengukur biasa yang sering digunakan untuk mengukur seperti penggaris atau mistar itu gak pake pixel jadi agar lebih mudah gue pake LightShot..
 wah kok LightShot? bukannya itu dipake buat ngambil ScreenShot, yah emang itu fungsi utamanya tapi ada fungsi lain yaitu alat pengukur hehehehh kan? Di Light Shot itu ada pixelnya tuh.!! Berarti gak susah lagi ngukur-ngukur dan orientasi jaraknya sangat tepat.. :v . lalu kenapa bahasa inggris? Anak SD aja tau kalau kode CSS ada bahasa inggrisnya dan semua kodenya di awali bahasa inggris seperti width,margin,position,...atau apalah..! . baiklah ini adalah screen shot contoh CSS sprite buatan w... :v

HIDAN BLACK

VIBRATION TITLE

GUEST BOOK BACKGROUND MOVING UP

JOIN THIS SITE BACKGROUND MOVING LEFT

Awalnya gambarnya terpisah satu-satu file.png jadi bikin blog berat banget tapi dengan menyatukan beberapa gambar itu menjadi satu seperti diatas maka membuat blog lebih ringan. kemudian ini adalah kode CSS sprite yang ada di header Monster-Shared v.III ini...

Untuk kode css ini letakkan diatas ]]></b:skin>

HIDAN BLACK

.MOD-hidan1{opacity:0.5;margin-top:107px; margin-left:400px; width:0px; height:0px; float:left;background-color:transparent; width:310px; height:360px; background:url(https://monster-shared.googlecode.com/files/mod-hid1Copy3.png) center; position:absolute; top:-70px;}

VIBRATION TITLE

.MOD-judul1{ margin-top:140px; margin-left:260px; width:8px; height:8px; float:left;background-color:transparent; width:468px; height:139px; margin:0 auto;background:url(https://monster-shared.googlecode.com/files/MOD-tongkat.png) center; position:relative; top:-70px;}.MOD-judul1:hover {animation-name: MOD-getar;-moz-animation-name:  MOD-getar ;-webkit-animation-name:  MOD-getar;animation-duration: 0.8s;-moz-animation-duration: 0.8s;-webkit-animation-duration: 0.8s;transform-origin:50% 50%;-moz-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;animation-timing-function: linear;-moz-animation-timing-function: linear;-webkit-animation-timing-function: linear;}@-webkit-keyframes MOD-getar{0% { transform: translate(2px, 1px) rotate(0deg); }10% { transform: translate(-1px, -2px) rotate(-1deg); }20% { transform: translate(-3px, 0px) rotate(1deg); }30% { transform: translate(0px, 2px) rotate(0deg); }40% { transform: translate(1px, -1px) rotate(1deg); }50% { transform: translate(-1px, 2px) rotate(-1deg); }60% { transform: translate(-3px, 1px) rotate(0deg); }70% { transform: translate(2px, 1px) rotate(-1deg); }80% { transform: translate(-1px, -1px) rotate(1deg); }90% { transform: translate(2px, 2px) rotate(0deg); }100% { transform: translate(1px, -2px) rotate(-1deg); }}@-moz-keyframes MOD-getar{0% { transform: translate(2px, 1px) rotate(0deg); }10% { transform: translate(-1px, -2px) rotate(-1deg); }20% { transform: translate(-3px, 0px) rotate(1deg); }30% { transform: translate(0px, 2px) rotate(0deg); }40% { transform: translate(1px, -1px) rotate(1deg); }50% { transform: translate(-1px, 2px) rotate(-1deg); }60% { transform: translate(-3px, 1px) rotate(0deg); }70% { transform: translate(2px, 1px) rotate(-1deg); }80% { transform: translate(-1px, -1px) rotate(1deg); }90% { transform: translate(2px, 2px) rotate(0deg); }100% { transform: translate(1px, -2px) rotate(-1deg); }}

GUEST BOOK BACKGROUND MOVING UP

#MOD-Chat{box-shadow: 0 0 10px black;width:115px;height:42px;background: url("http://i.imgur.com/0fWZZus.png") no-repeat -2px -30px scroll rgb(201,153,153);border:5px solid #555;margin-left:30px;margin-bottom:3px;margin-top:-3px;border-radius:0px; -webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}#MOD-Chat a{margin-left:5px;margin-top:5px;font-size:21px;color:black;font-family:Passero One;text-shadow: 0 0 5px darkred;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}#MOD-Chat:hover{background: url("http://i.imgur.com/0fWZZus.png") no-repeat -2px -2px scroll #999}

JOIN THIS SITE BACKGROUND MOVING LEFT

#MOD-join{box-shadow: 0 0 10px black;width:115px;height:42px;position:relative;background: url("http://i.imgur.com/0fWZZus.png") no-repeat -2px -60px scroll rgb(201,153,153);border:5px solid #555;margin-left:150px;margin-bottom:3px;margin-top:-45px;border-radius:0px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}#MOD-join a{margin-left:3px;margin-bottom:5px;font-size:17px;color:black;font-family:Passero One;text-shadow: 0 0 5px darkred;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}#MOD-join:hover{background: url("http://i.imgur.com/0fWZZus.png") no-repeat -42px -40px scroll #999}

NB :

-          Atur jarak,lebar,tinggi,posisi,warna,gambar sesuai selera

-          Kreasikan dengan positive thinking

-          Sy harap sobat bisa melakukan experiment dan menemukan penemuan baru ... :v

Untuk kode HTMLnya, sobat bisa edit sesuka hati dan bisa diletakkan dimana saja seperti di dalam<div id='header-wrapper'> atau apalah gitu yang penting tidak error:

HIDAN BLACK

<div class='MOD-hidan1'/>

VIBRATION TITLE

<div class='MOD-judul1'/>

GUEST BOOK BACKGROUND MOVING UP

<div id='MOD-Chat'><a href='URL TUJUAN' title='Click here to open Guest Book'> Guest Book</a></div>

JOIN THIS SITE BACKGROUND MOVING LEFT

<div id='MOD-join'><a href='http://www.Blogger.com/follow-blog.g?blogID=2038011248359714008' onclick='window.open(this.href, &apos;dmfollow&apos;, &apos;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&apos;);return false;' style='text-align:center;font-weight:bold;text-decoration:none;' title='Join This Site / Follow This Site'>Join This Site</a></div>

okeW , Selamat Berkreasi dan jangan lupa beribadah :v
okeX, kalau ada yang belum dimengerti atau ada yang belum dinyatakn langsung saja koment dibawah postingan okeY....