Pro HTML5 and CSS3 Design Patterns
C H A P T E R 6 (^) Box Model Properties This chapter shows how box model properties style the various types of boxes. These are ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Margin CSS *.before { margin:0; } *.after { margin-top:10px; margin-bottom:0; margin-left:30px ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Margin Problem You want to put a margin on one or more of the sides of an element. You want th ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Border CSS *.before { border:1px solid black; } *.after { border-top:10px solid dimgray; borde ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Border Problem You want to put a border on one or more of the sides of an element.^ Solution Y ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Border cont. Solution cont. The border can have either a predefined style (solid line, double ...
CHAPTER 6 ■ BOX MODELS PROPERTIES 117 Border cont. Pattern SELECTOR { border: WIDTH STYLE COLOR; border: none; border-left: WIDT ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Padding CSS *.before { padding:0; } *.after { padding-top:10px; padding-bottom:0; padding-left ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Padding Problem You want to use padding on one or more of the sides of an element.^ Solution U ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Background HTML <h1>Background</h1> <p><span class="no-bg"> & ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Background Problem You want to put a background color or image behind an element.^ Solution Ap ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Overflow HTML <div id="ex1"> <h1><code>overflow:visible</code></h1& ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Overflow Problem You want to control how a block handles the situation when its content overfl ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Visibility HTML <h1>Visibility</h1> <p>There is hidden content here: <spa ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Visibility Problem You want to hide an element and leave a blank spot where the element would ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Page Break HTML <div class="page-break-after">Page break after this element. </div> ...
CHAPTER 6 ■ BOX MODELS PROPERTIES Page Break Problem You want to insert a page break in the document for printing purposes.^ Sol ...
C H A P T E R 7 Positioning Models This is the first of three chapters on positioning. This chapter presents the CSS positioning ...
CHAPTER 7 ■ POSITIONING MODELS Positioning Models HTML <h1>Positioning Models</h1> <div class="section"><h2 ...
CHAPTER 7 ■ POSITIONING MODELS Positioning Models Introduction This isn’t a design pattern, but an introduction to positioning. ...
«
2
3
4
5
6
7
8
9
10
11
»
Free download pdf