webdevRefinery Forum: [WIP] CSS sprites - webdevRefinery Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

User is offline Koen 

  • Leroy Jenkins
  • Group: Members
  • Posts: 2503
  • Joined: 10-March 10
  • Locationthe Netherlands
  • Expertise:HTML,CSS,Javascript,Graphics

Posted 17 December 2010 - 10:28 AM (#1)

[WIP] CSS sprites


Work In Progress

Using CSS sprites can cut down on you bandwidth, a lot. It will reduce the amount of HTTP-requests needed for loading a page. CSS sprites are used for a bunch of things, but I'm going to talk about rollover buttons.

There are two ways of doing this: either add the text on your buttons in your graphics editor or add them via css. I prefer using the second one for menu's etc. The first way I use when creating Call to Action buttons or very complicated buttons with lots of layers.

First way:
1. Create a nice button in Photoshop (I'm going to refer to you gfx program as Photoshop from here):Posted Image

2. Select the vector mask (Ctrl/Cmd + Click the mask thumb), the click the background layer and press Ctrl/Cmd + C to copy the exact size of the button. Then click File -> New to create a new file. The correct sizes should already be filled in, BUT you'll need to add the size of the shadows/glows/strokes first. The shadow & glow are behind the stroke, so you don't need to count for the stroke if you shadow/glow is larger.

3. Create a new group called "Normal" and copy the layers of the button to that group. You'd probably need to set the Global Light to 90° as it's set to the default again.
Please click the + if I helped you!
Twitter: @KoenKlaren

<callumacrae> YOU DID A ROMNEY
0


User is offline JCJeff 

  • Group: Members
  • Posts: 55
  • Joined: 18-April 12
  • LocationCanada
  • Expertise:Python

Posted 21 May 2012 - 07:37 PM (#2)

It takes more than 2 years to write one single tutorial? I think you're crazy
0


User is offline arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 21 May 2012 - 07:50 PM (#3)

Ta-da http://webdevrefiner...n-your-website/
DO NOT OPEN THIS

Spoiler
0


User is offline JCJeff 

  • Group: Members
  • Posts: 55
  • Joined: 18-April 12
  • LocationCanada
  • Expertise:Python

Posted 21 May 2012 - 07:55 PM (#4)

View Postarronhunt, on 21 May 2012 - 07:50 PM, said:


Oh, thanks, this thread should be updated
0


User is offline NeilHanlon 

  • Group: Members
  • Posts: 884
  • Joined: 08-July 10
  • LocationRowley, Massachusetts
  • Expertise:HTML,CSS,PHP,Java,Graphics

Posted 21 May 2012 - 08:14 PM (#5)

Or... you could just not necro a two year old thread. Just sayin.
Thanks,
兄ニール

Website | Blog | @NeilHanlon | About.Me | Facebook | LinkedIn
0


User is offline JCJeff 

  • Group: Members
  • Posts: 55
  • Joined: 18-April 12
  • LocationCanada
  • Expertise:Python

Posted 21 May 2012 - 08:35 PM (#6)

Sorry for bumping
0


Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users


Enter your sign in name and password


Sign in options
  Or sign in with these services