Join this site

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.

Posting Komentar - Back to Content

[D-S] COMMENTS RULE :

-DONT SPAM
-DONT FLOOD
-BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
-BILA ANDA INGIN MENDAPATAKAN INFO DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN
-FOLLOW THIS BLOG I WILL FOLLOWBACK !!

 
Thanks For Visiting Gunakanlah Google Chrome Untuk Tampilan Sempurna