From the course: Creating Web Media
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Create a sprite sheet for links - CSS Tutorial
From the course: Creating Web Media
Create a sprite sheet for links
{QTtext}{timescale:100}{font:Verdana}{size:20}{backColor:0,0,0} {textColor:65280,65280,65280}{width:960}{justify:center} {plain} - [Chris] Hi, this is Chris Converse, - [Chris] Hi, this is Chris Converse, and in this episode, we'll take a look and in this episode, we'll take a look at how to plan out a sprite sheet of graphics, at how to plan out a sprite sheet of graphics, to be used with hyperlinks in a webpage. to be used with hyperlinks in a webpage. So, if you'd like to follow along with me, So, if you'd like to follow along with me, download the exercise files, download the exercise files, and we'll begin by opening the HTML file in a text editor. and we'll begin by opening the HTML file in a text editor. So once you have the HTML file open, So once you have the HTML file open, you'll see up in the Head area, you'll see up in the Head area, we have a link to style.css. we have a link to style.css. We'll be working inside of this file in a moment, We'll be working…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
- Media_SVG_Symbols_Illustrator.zip
- Media_animating_SVG_with_CSS.zip
- Media_inline_gallery_CSS.zip
- Media_Photoshop_sprite_sheet_for_animation.zip
- Media_chapter_links_video.zip
- Media_Sketch_sprite_sheet_for_animation.zip
- Media_loading_animation_CSS.zip
- Media_css_looping_animation.zip
- Media_responsive_images_picture_element.zip
- Media_fullscreen_background_video.zip
- Media_svg_tile_sketch.zip
- Media_customizable_graphics_CSS.zip
- Media_svg_tile_illustrator.zip
- Media_responsive_iframe.zip
- Media_responsive_images_img_element.zip
- Media_Gulp_and_Sketch.zip
- Media_base64_encode_images.zip
- Media_photohop_generator.zip
- Media_mask_images_SVG.zip
- Media_zoom_to_point_of_interest.zip
- Media_trigger_content_from_video.zip
- Media_animating_HTML_canvas.zip
- Media_sprite_sheet_for_links.zip
- Media_inline_video_iOS.zip
- Media_metadata_PHP.zip
- Media_WordPress_custom_thumbnails.zip
- Media_SVG_from_Photoshop.zip
- Media_js_random_flicker.zip
- Media_animate_spritesheet_JS.zip
- Media_audio_element.zip
- Media_animate_spritesheet_CSS.zip
- Media_Video_Element.zip
- Media_indicating_file_types.zip
- Media_SVG_Colors_in_CSS.zip
- Media_hi_def_graphics_sketch.zip
- Media_twitter_timeline.zip
- Media_canvas_combine_images.zip
- Media_web_graphics_indesign.zip
- Media_calculating_resize.zip
- Media_responsive_SVG_logo.zip
- Media_zooming_hover_state.zip
- Media_customized_Google_Map_markers.zip
Contents
-
-
-
(Locked)
SVG symbols with Illustrator6m 34s
-
(Locked)
The video element9m 50s
-
(Locked)
Control colors in SVG with CSS8m 5s
-
(Locked)
High-definition graphics with Sketch5m 44s
-
Add a Twitter feed5m
-
(Locked)
Combine images with Canvas7m 50s
-
(Locked)
Generate assets in Photoshop in no time6m 33s
-
(Locked)
Web graphics from InDesign5m 27s
-
(Locked)
Keeping it in proportion5m 18s
-
(Locked)
Responsive iFrames5m 50s
-
(Locked)
Create a tiling SVG with Illustrator8m 51s
-
(Locked)
Create a tiling SVG with Sketch8m 19s
-
(Locked)
Loop a CSS animation7m 44s
-
(Locked)
The Audio element7m 31s
-
Randomized animation with JavaScript8m 49s
-
(Locked)
Get SVG from Photoshop7m 44s
-
(Locked)
Customize your thumbnails in WordPress3m 48s
-
(Locked)
Read JPG metadata with PHP12m 19s
-
(Locked)
Animate a sprite sheet with CSS7m 2s
-
(Locked)
Animate a sprite sheet with JavaScript9m 7s
-
(Locked)
Interactive inline photo gallery12m 14s
-
(Locked)
Create customizable graphics with CSS13m 1s
-
(Locked)
Fullscreen background video13m 30s
-
(Locked)
Load animation with HTML and CSS12m 40s
-
(Locked)
Video jump points with JavaScript9m 54s
-
(Locked)
Base64 encoding images4m 42s
-
Using GULP with Sketch files12m 12s
-
(Locked)
Responsive images and the image element6m 6s
-
(Locked)
Responsive images and the picture element6m 17s
-
(Locked)
Create a sprite sheet for links4m 46s
-
(Locked)
Indicate download file types3m 53s
-
(Locked)
Inline video for iOS2m 36s
-
(Locked)
Image zoom to point of interest6m 45s
-
(Locked)
Mask an image in SVG4m 40s
-
(Locked)
Animate an HTML canvas4m 47s
-
Trigger content from a video8m 53s
-
(Locked)
Responsive SVG Logo5m 5s
-
(Locked)
Zooming hover state3m 8s
-
(Locked)
Animate SVG with CSS4m 45s
-
(Locked)
Custom Google Maps markers7m 14s
-
(Locked)
Sprite sheet for animation with Photoshop6m 11s
-
(Locked)
Sprite sheet for animation with Sketch5m 33s
-
(Locked)