Pro HTML5 and CSS3 Design Patterns
CHAPTER 18 ■ DROP CAPS Marginal Graphical Drop Cap HTML <h1>Marginal Graphical Drop Cap</h1> <p class="indent"> ...
CHAPTER 18 ■ DROP CAPS Marginal Graphical Drop Cap Problem You want to display the first letter of a paragraph as an image in a ...
CHAPTER 18 ■ DROP CAPS What the Marginal Graphical Drop Cap example looks like when the browser cannot load or display the image ...
CHAPTER 18 ■ DROP CAPS Marginal Graphical Drop Cap cont. Disadvantages Like all marginal design patterns, a border around the te ...
C H A P T E R 19 (^) Callouts and Quotes This chapter discusses design patterns that create callouts and quotes. A callout is a ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Left Floating Callout HTML <h1>Left Floating Callout</h1> <p>A callout makes ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Left Floating Callout Problem You want to remove content from the flow and display it prominent ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Right Floating Callout HTML <h1>Right Floating Callout</h1> <p>The main featu ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Right Floating Callout Problem You want to remove content from the flow and display it prominen ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Center Callout HTML <h1>Center Callout</h1> <p><code>display:block</ ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Center Callout Problem You want to remove content from the flow and display it prominently to t ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Left Marginal Callout HTML <h1>Left Marginal Callout</h1> <p class="left-margina ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Left Marginal Callout Problem You want to excerpt text out of the normal flow and move it into ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Right Marginal Callout HTML <h1>Right Marginal Callout</h1> <p class="right-marg ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Right Marginal Callout Problem You want to excerpt text out of the normal flow and move it into ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Block Quote HTML <h1>Block Quote</h1> <blockquote><div> <p>A bloc ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Block Quote Problem You want to create a block quote. You want to set a quote apart from the re ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Inline Block Quote HTML <h1>Inline Block Quote</h1> <p>This quote is embedded ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Inline Block Quote Problem You want to create a block quote inside a paragraph. You cannot use ...
CHAPTER 19 ■ CALLOUTS AND QUOTES Inline Quote HTML <h1>Inline Quote</h1> <p><span class="quote"> "A quot ...
«
17
18
19
20
21
22
23
24
25
26
»
Free download pdf