MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Creating and Using CSS Image Sprites

Course Summary

Learn how to create Image Sprites, using GIMP, and how to exchange Text Menus for Image Sprites. Includes: WordPress.

  • +

    Course Syllabus

    • Introduction and Setup
      • Introduction
      • Lab Preparing the Environment
      • Gathering the tools needed for this course
      • Installing WordPress and creating the DEMOSITE
    • Scaling Images using GIMP
      • Download Images Used in this Course
      • Scaling Images, Preparing the environment
      • Scaling the remaining images down to 300 px
      • Lab Scaling Images
      • Creating Thumbnail images; Scaling Images to 150px
      • Lab Creating Thumbnail Images
      • Creating Icon Images: Scaling Images down to 88px
      • Lab Scaling Images to ICON size
      • Download Image inventory control
      • Implementing an Image Version Control Strategy
    • Creating Menu Sprites with GIMP
      • GIMP: Preparing the Environment for Creating Sprites
      • Lab Changing GIMP Default Settings
      • Creating the Canvas: Determining the Canvas size
      • Lab Determining the Size of the Canvas
      • Creating the Image Sprite Canvas
      • Lab Creating the Canvas
      • Opening Images as Layers
      • Determining where to position Images on a Sprite Canvas
      • More Images. Finishing adding Images to the Sprite Canvas
      • Lab Adding Image Layers
      • Applying a Selected State with Opacity
      • Lab Fading Images with Opacity
      • Readjusting the Canvas Size
      • Lab Readjusting the Canvas Size
      • Lab Exporting the Sprite to a PNG file
      • How to Prove the Image Sprite is Transparent
      • Lab Sprite Proof
      • Lab Solution
    • Simple Site – A Webpage with CSS Image Sprites
      • Creating Simple_site. Html and Sprite.Css files
      • Updating the Simple_Site.Html Header
      • Adding the Menu and Body Text
      • Adding Hyperlinks to the Menu
      • Lab Defining the Simple Site page
      • CSS Defining each Menu ID skeleton
      • CSS Dropping Menu Bullets
      • CSS Adding Sprite Styling for Unselected Images
      • CSS Creating a Gap between Menu Sprite Images
      • CSS Adding SPRITE SELECTED State Styling
      • Lab Defining SPRITE.CSS
      • Lab Solution
    • Menu Sprites in WordPress
      • Lab Preparing the WordPress DEMOSITE Environment
      • Starting the DEMOSITE and Establishing the Home Page
      • Assigning a Static Front Page
      • Lab Establishing a Static Home Page
      • Adding a New Menu Sidebar
      • Lab Creating the Menu
      • Firebug: Uncovering Menu IDs
      • Lab Uncovering Menu Ids
      • Lab A Shortcut to Defining CSS Menu Sprite Styles
      • Lab Defining the CSS Menu Sprite Styles from scratch
      • Adding a custom menu widget to the sidebar
      • Lab Adding a Custom Menu Widget
      • Creating WordPress Pages linked to the Sprite Menu
      • Lab Creating Dummy Pages linked to the Sprite Menu
      • Replacing the Top Menu
      • Creating a Top Menu or horizontal menu
      • Adjusting the Background Menu Bar Height
      • Hybrid Site: A mix of internal pages and external links
      • Lab Converting a Vertical Menu to Horizontal
      • Lab Proof Sheet
    • Conclusion
      • Course Completion

Course Fee:
USD 49

Course Type:


Course Status:



1 - 4 hours / week

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top