I've got all the images in either psd, gif or jpg format. Now I need someone to create an image sprite from these images and send me the details on how to reference each image in the sprite in css. I've got about 25 small images. How much would you charge for that? PS: You will need to show me examples of your previous work btw.
If you don't understand image sprite (css sprite), you wouldn't be able to do the job. I need someone experienced to do this.
I am interested in completing this job. I have sent you pm with my offer. Example website where i have used image sprite technique http://bit.ly/c1ux8S
Hi eveyone! I would like to know, if any one can help me maximize my page-loading speed. I would like to use css sprite. My website is www.oknapol.com.br and I already put all images from main page to one jpg. Problem is with my Style.css I dont know which coments use to be all images loading the same time. Below I added my style.css *{margin:0;padding:0} body{padding-bottom:60px;font:12px/20px Arial, Helvetica, sans-serif;color:#D6D6D6;background:#191A1B url(images/bg.gif) repeat-x top} h1{padding-left:40px;font:normal 28px/46px "Trebuchet MS", Arial, Helvetica, sans-serif;letter-spacing:-1px;color:#FFF} h1 a{text-decoration:none;color:#FFF} h2{font:normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#86B226} p{text-align:justify;padding:10px 0} a{text-decoration:none;color:#F8821B} a:hover{text-decoration:underline} #main{width:900px;margin:0 auto} #header{height:46px;background:#515E6E url(images/lina1.png) no-repeat} #menu{height:46px;text-align:right;background:#637383 url(images/linia2.png) no-repeat} #menu ul{list-style:none;padding:0 60px 0 0} #menu ul li{display:inline;padding:0} #menu ul li a{font-size:14px;line-height:46px;text-transform:uppercase;color:#FFF;padding:0 0 0 50px} #middle{height:1%;background:#1C1E20 url(images/glowna.jpg) no-repeat;padding:328px 40px 89px} #sidebar{float:left;width:320px;background:#3D4752 url(images/bg2.gif) repeat-x top} #sidebar2{padding:10px 15px 0} #sidebar ul{list-style:none;padding:20px 5px 40px 10px} #sidebar ul li{background:url(images/arrow.gif) no-repeat;padding:0 0 0 18px} #sidebar ul li a{line-height:22px;padding:0} #right{float:right;width:480px;background:#3D4752 url(images/bg2.gif) repeat-x top} #right2{background-image:none;background-repeat:no-repeat;background-position:top;padding:10px 15px 0} .box{padding:10px 0 30px} #right ul{padding:10px 0 10px 35px} #right ul li{text-align:justify;padding:0} .clearing{clear:both;height:1px;overflow:hidden} #footer{clear:both;height:104px;background:url(images/footer.gif) repeat-x top} #footer p{line-height:40px;text-align:center} h1 a:hover,#menu ul li a:hover{text-decoration:none;color:#FAE7D5} Thank you for any help!