PENGGUNAAN CSS SPRITE

 

 Selamat Siang Sahabat DS kali ini admin akan share "PENGGUNAAN CSS SPRITE " trick ini dapat dari hasil blogwalking ke blog"monster-shared"..

langsung saja ke TKP : 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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>

Gimana Sahabat DS tunggu apa lagi langsung aja di coba mumpung masih anget..
dan jangan lupa untuk tinggalkan komentar..

Sumber : monster-shared.

Backlinks Please Thanks

URL

Code For Forum

HTML Code <a href='http://dedisinaga123.blogspot.com/2013/06/penggunaan-css-sprite.html' target='_blank'> PENGGUNAAN CSS SPRITE </a>

Anda Sekarang Sedang Baca Artikel Tentang PENGGUNAAN CSS SPRITE , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel PENGGUNAAN CSS SPRITE ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link PENGGUNAAN CSS SPRITE Sumbernya. Thank's