Creating and Using CSS Image Sprites | Robert Kohler | Skillshare

Creating and Using CSS Image Sprites

Robert Kohler, Technical Business Analyst - Trainer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
44 Videos (4h 5m)
    • Foreword

      3:58
    • Section 1: Introduction and Setup

      2:09
    • Introduction

      2:55
    • Gathering the tools needed for this course

      5:58
    • Section 2: Scaling Images Using Gimp

      1:11
    • Scaling Images, Preparing the environment

      4:19
    • Scaling the remaining images down to 300 px

      10:32
    • Creating Thumbnail images; Scaling Images to 150px

      5:29
    • Creating Icon Images: Scaling Images down to 88px

      3:38
    • Implementing an Image Version Control Strategy

      4:19
    • Section 3: Creating Menu Sprites with GIMP

      0:53
    • GIMP: Preparing the Environment for Creating Sprites

      4:59
    • Creating the Canvas: Determining the Canvas size

      3:38
    • Creating the Image Sprite Canvas

      3:51
    • Opening Images as Layers

      10:28
    • Determining where to position Images on a Sprite Canvas

      4:38
    • More Images. Finishing adding Images to the Sprite Canvas

      6:44
    • Applying a Selected State with Opacity

      6:17
    • Readjusting the Canvas Size

      7:54
    • How to Prove the Image Sprite is Transparent

      8:09
    • Section 4: Simple Site Webpage with CSS Image Sprites

      1:37
    • Creating Simple_site. Html and Sprite.Css files

      4:30
    • Updating the Simple_Site.Html Header

      4:10
    • Adding the Menu and Body Text

      12:52
    • Adding Hyperlinks to the Menu

      12:49
    • CSS Defining each Menu ID skeleton

      9:23
    • CSS Dropping Menu Bullets

      3:39
    • CSS Adding Sprite Styling for Unselected Images

      11:23
    • CSS Creating a Gap between Menu Sprite Images gap between Sprite Menu images

      5:00
    • CSS Adding SPRITE SELECTED State Styling

      4:38
    • Section 5: Menu Sprites in WordPress

      1:32
    • Starting the DEMOSITE and Establishing the Home Page

      6:32
    • Adding a New Menu Sidebar

      5:49
    • Inspector: Uncovering Menu IDs

      9:09
    • Converting the Sidebar Menu

      9:22
    • Backing Up Key Files

      4:25
    • Adding a custom menu widget to the sideba

      4:57
    • :Creating WordPress Pages linked to the Sprite Menu

      6:32
    • Replacing the Top Menu

      1:16
    • :Creating a Top Menu or horizontal menu

      1:59
    • Adjusting the Background Menu Bar Height

      8:48
    • Hybrid Site: A mix of internal pages and external links

      5:51
    • Responsive Web Design

      3:15
    • Conclusion

      3:23

About This Class

Have you ever developed a site where the Menu got lost in the Side Bar?

Do you want to make your site more attractive?Well, now you can!

By the time that you have completed this course, you will learn how to make your site come alive.

You will learn how to create image sprites using GIMP.

Apply your newly created sprite to a Webpage.

And as the capstone of this course, you will learn how to add Menu Sprites to a WordPress Site.

2

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Robert Kohler

Technical Business Analyst - Trainer

Robert Kohler is a Technical Business Analyst and Trainer with over 30 years of experience spanning Programming to technical Project Management. Experiences gained while working for Corporations, Non-Profits, small businesses and volunteering at SeniorNet Long Island.

Technically, Robert has developed client-server applications as well as cloud based solutions dependent on C, Visual Basic, VBA, WordPress, SQL and Php to name a few.

Robert has been providing training to businesse...

See full profile

Report class