Darksat IT Security Forums
June 25, 2017, 01:11:02 am
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Darksat IT Security Forum
From Firewall Support, AntiVirus Questions, Spyware problems, Linux and Windows Security, Black Hat SEO right down to Website Design and Multimedia
 
  Home Help Search Gallery Links Staff List Login Register  

Sprite CSS


Pages: [1]
  Print  
Author Topic: Sprite CSS  (Read 1920 times)
Defcon 5
Master
*****
Posts: 2410



View Profile WWW
« on: September 05, 2009, 08:18:01 am »

I'm getting fed up with peoples lack of thinking about how to code sprites.

Time and time again I've just seen messy CSS coding.
their calling the image every button so its like:
Code:
.button1{
    background:transparent url('sprite.png') -100 -50 no-repeat;
    height:30px;
    width:150px;
    overflow:hidden;
    position:relative; }
.button2{
    background:transparent url('sprite.png') -100 -80 no-repeat;
    height:30px;
    width:150px;
    overflow:hidden;
    position:relative; }

No no no no no no no no no no in my opinion that is shit coding.

This is how I would do it and how I see it being faster and lighter coding with easier methods of calling it.
Code:
.spriteBG{
    background:transparent url('sprite.png') no-repeat;
    overflow:hidden;
    position:relative; }
.button1{
    background-position: -100 -50;
    height:30px;
    width:150px; }
.button2{
    background-potition: -100 -80;
    height:30px;
    width:150px; }

That just their is cutting out a lot of work for you and the advantage of having spriteBG class is you can later on change your PNG to say a GIF easily in a IE6 css file.
Then your sprites are cross browser compatible.

Please correct me if I'm wrong but is the 1st example a example of plain shit coding not being thought through?
« Last Edit: September 05, 2009, 08:21:01 am by Defcon 5 » Report Spam   Logged

Social Buttons

Darksat
Administrator
Master
*******
Posts: 3303



View Profile WWW
« Reply #1 on: September 06, 2009, 10:37:16 am »

Your right the second method is much better but I would still just use Gifs for IE6 unless you really need alpha transparency in your sprites.
Report Spam   Logged
Defcon 5
Master
*****
Posts: 2410



View Profile WWW
« Reply #2 on: September 19, 2009, 02:32:23 pm »

But then you don't get the quality with a GIF, if its the most basic of buttons i could understand but the quality with a PNG is shit loads better.
Which is why I see it better having a IE6.css and just change the background image from a PNG to a GIF if need be.
Report Spam   Logged
Defcon 5
Master
*****
Posts: 2410



View Profile WWW
« Reply #3 on: September 27, 2009, 07:19:23 am »

Well I tried out using gif's and png sprites only issue i hit was the fact you had to set the positions of the sprite again in ie6.css
Report Spam   Logged

Pages: [1]
  Print  
 
Jump to:  

Powered by EzPortal
eXTReMe Tracker
Security Forum
Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum

Buy traffic for your forum/website
traffic-masters
Powered by SMF | SMF © 2016, Simple Machines
Page created in 0.094 seconds with 9 queries.