CSS Sprite

1
Click anywhere to start the presentation
2
CSS Sprite
By http//www.psd2htmlwordpress.com
3
What is Image Sprite

• The idea behind CSS sprite is to consolidate
  multiple images into one sprite and then
  selectively display portions of this sprite with
  positioning.
• It has its origin in Computer Graphics
• Sprites are the master image from which
  individual images can later be pulled for
  website design as needed by the code.
• Displayed as a static or dynamic background image

4
Advantages of CSS Sprite

• A web page with many images can take a long time
  to load and generates multiple server requests.
  Using image sprites will reduce the number of
  server requests and save bandwidth.
• CSS sprites reduce HTTP requests
• CSS sprites are commonly used, particularly for
  navigation (such as for hover effects), icons and
  buttons

5
Disadvantages of CSS Sprites

• Maintenance Changing the size of an icon in a
  sprite, also need to adjust the CSS to fix the
  positioning, padding, or dimensions of the
  element
• Accessibility While using background images we
  remove the image tag from the markup, which could
  reduce the meaningfulness of the content

6
Where are CSS Sprites Used

• CSS sprites are mainly used in a pixel based
  design.
• CSS sprites are used to keep the design
  maintainable and easy to update.

7
How to create a navigation list using the sprite
image

• The following code shows the creation of
  navigation list
• navlistpositionrelativenavlist
  limargin0padding0list-stylenonepositionabs
  olutetop0navlist li, navlist
  aheight44pxdisplayblockhomeleft0pxwidt
  h46pxhomebackgroundurl('img_navsprites.gif'
  ) 0 0prevleft63pxwidth43pxprevbackgr
  oundurl('img_navsprites.gif') -47px
  0nextleft129pxwidth43pxnextbackgroun
  durl('img_navsprites.gif') -91px 0

8
How to add hover effect using image sprites

• The following lines of code can be used to add
  hover effect
• home ahoverbackground url('img_navsprites_
  hover.gif') 0 -45pxprev ahoverbackground
  url('img_navsprites_hover.gif') -47px
  -45pxnext ahoverbackground
  url('img_navsprites_hover.gif') -91px -45px

9
Contact Info

• PSD to HTML Wordpress
• www.psd2htmlwordpress.com
• Y8,Block EP,Sec v
• Salt Lake, Kol 700091,India
• PH 913340200838
• Emailinfo_at_psd2htmlwordpress.com

10

• Thank You

11
(No Transcript)