Pro HTML5 and CSS3 Design Patterns
CHAPTER 14 ■ IMAGES Fade-Out Problem You want to create a gradient background behind an element. You want the gradient to work w ...
CHAPTER 14 ■ IMAGES Semi-transparent HTML <h1>Semi-transparent</h1> <div id="nw"> <img src="nw.gif" alt="No ...
CHAPTER 14 ■ IMAGES Semi-transparent Alias Translucent Problem You want an element to have a partially transparent background so ...
CHAPTER 14 ■ IMAGES Replaced Text HTML <h1>Replaced Text</h1> <h2 id="h2">Heading 2<span></span>&l ...
CHAPTER 14 ■ IMAGES Replaced Text Problem You want to replace text with an image. You also want the text to be read by a screenr ...
CHAPTER 14 ■ IMAGES Content over Image HTML <h1>Content over Image</h1> <div class="figure"> <h3 class="cap ...
CHAPTER 14 ■ IMAGES Content over Image Problem You want to place text on top of an image. You want to position the text relative ...
CHAPTER 14 ■ IMAGES Content over Background Image HTML <h1>Content over Background Image</h1> <div id="crater-lak ...
CHAPTER 14 ■ IMAGES Content over Background Image Problem Like the Content over Image design pattern, you want to place text and ...
CHAPTER 14 ■ IMAGES CSS Sprite HTML <h1>CSS Sprite</h1> <div id="nw"> <img src="nw.gif" width="290" height= ...
CHAPTER 14 ■ IMAGES CSS Sprite Problem You want to use many images on a page, but you do not want the performance penalty caused ...
CHAPTER 14 ■ IMAGES CSS Sprite cont. Offsets for 1616 sprites as used in bt.gif Example I use two CSS sprite files in the examp ...
CHAPTER 14 ■ IMAGES CSS Sprite cont. Advantages By reducing the number of files that are downloaded, you can dramatically speed ...
CHAPTER 14 ■ IMAGES Basic Shadowed Image HTML <h1>Basic Shadowed Image</h1> <img class="shadowed" src="crater-lak ...
CHAPTER 14 ■ IMAGES Basic Shadowed Image Problem You want to place a shadow behind an image without having to modify the origina ...
CHAPTER 14 ■ IMAGES Shadowed Image shadow.jpg shadow-rt.jpg and shadow-lb.jpg are created by extracting them from shadow.jpg. sh ...
CHAPTER 14 ■ IMAGES Shadowed Image Problem You want to place a shadow behind an image without having to modify the original imag ...
CHAPTER 14 ■ IMAGES Shadowed Image cont. Composite view of the shadowed image ...
CHAPTER 14 ■ IMAGES Shadowed Image cont. Solution cont. Apply styles to your chosen class or ID as follows: You can use backgrou ...
CHAPTER 14 ■ IMAGES Shadowed Image cont. HTML <h1>Shadowed Image</h1> <div class="shrinkwrapped"> <div clas ...
«
11
12
13
14
15
16
17
18
19
20
»
Free download pdf