Download - Advanced CSS: Layout
![Page 1: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/1.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar© 2017 Pearson
http://www.funwebdev.com
Advanced CSS: Layout
Chapter 7
![Page 2: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/2.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 3: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/3.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 4: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/4.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Normal Flow
To understand CSS positioning and layout, it is essential that we understand this distinction as well as the idea of normal flow:
how the browser will normally display block-level elements and inline elements from left to right and from top to bottom
![Page 5: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/5.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Normal Flow
• Block-level elements such as <p>, <div>, <h2>, <ul>, and <table> are each contained on their own line.
• Inline elements do not form their own blocks but instead are displayed within lines.
![Page 6: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/6.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Normal FlowBlock-Level Elements
![Page 7: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/7.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Normal FlowInline Elements
![Page 8: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/8.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Normal FlowBlock and Inline Elements
![Page 9: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/9.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 10: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/10.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Positioning Elements
• absolute The element is removed from normal flow and positioned in relation to its nearest positioned ancestor.
• fixed The element is fixed in a specific position in the window even when the document is scrolled.
• relative The element is moved relative to where it would be in the normal flow.
• static The element is positioned according to the normal flow. This is the default.
![Page 11: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/11.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Positioning ElementsRelative Positioning
![Page 12: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/12.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Positioning ElementsAbsolute Positioning
![Page 13: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/13.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Positioning ElementsAbsolute Positioning is relative to nearest positioned ancestor
![Page 14: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/14.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Positioning ElementsZ-Index
![Page 15: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/15.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Positioning ElementsZ-Index
![Page 16: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/16.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Positioning ElementsFixed Position
![Page 17: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/17.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 18: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/18.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating ElementsFloating within a Container
![Page 19: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/19.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating Elements
It is possible to displace an element out of its position in the normal flow via the CSS float property
• An element can be floated to the left or floated to the right .
• it is moved all the way to the far left or far right of its containing block and the rest of the content is “reflowed” around the floated element
![Page 20: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/20.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating Elements
![Page 21: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/21.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating ElementsFloating within a Container
![Page 22: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/22.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating ElementsFloating Multiple Items Side by Side
![Page 23: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/23.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating ElementsFloating Multiple Items Side by Side
Thankfully, you can stop elements from flowing around a floated element by using the clear property
![Page 24: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/24.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating Elements
• left The left-hand edge of the element cannot be adjacent to another element.
• right The right-hand edge of the element cannot be adjacent to another element.
• both Both the left-hand and right-hand edges of the element cannot be adjacent to another element.
• none The element can be adjacent to other elements.
Clear property
![Page 25: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/25.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating Elements
Another problem that can occur with floats is when an element is floated within a containing block that contains only floated content. In such a case, the containing block essentially disappears
Containing Floats
![Page 26: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/26.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating Elements
One of the more common design tasks with CSS is to place two elements on top of each other, or to selectively hide and display elements
In such a case, relative positioning is used to create the positioning context for a subsequent absolute positioning move.
Overlaying and Hiding Element
![Page 27: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/27.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating ElementsOverlaying and Hiding Element
![Page 28: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/28.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating ElementsUsing display
![Page 29: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/29.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating ElementsComparing visibility with display
![Page 30: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/30.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Floating ElementsUsing Hover with display
![Page 31: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/31.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 32: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/32.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutUsing Floats to Create Columns
![Page 33: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/33.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutUsing Floats to Create Columns
![Page 34: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/34.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutUsing Floats to Create Columns
![Page 35: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/35.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn Layout3 column example
![Page 36: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/36.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn Layout3 column example with nested floats
![Page 37: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/37.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutUsing Positioning to Create Columns
![Page 38: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/38.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutProblems with Absolute positioning
![Page 39: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/39.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutSolution to footer problem
![Page 40: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/40.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutUsing Flexbox to Create Columns
![Page 41: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/41.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutThe flexbox parent (container) properties
![Page 42: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/42.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Constructing Multicolumn LayoutThe flexbox child (item) properties
![Page 43: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/43.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 44: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/44.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Approaches to CSS Layout
In a fixed layout , the basic width of the design is set by the designer, typically corresponding to an “ideal” width based on a “typical” monitor resolution.
The advantage of a fixed layout is that it is easier to produce and generally has a predictable visual result.
Fixed Layout
![Page 45: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/45.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Approaches to CSS LayoutFixed Layout
![Page 46: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/46.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Approaches to CSS LayoutProblem with Fixed Layout
![Page 47: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/47.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Approaches to CSS Layout
liquid layout (also called a fluid layout) widths are not specified using pixels, but percentage values
advantage of a liquid layout is that it adapts to different browser sizes
creating a usable liquid layout is generally more difficult than creating a fixed layout
Liquid Layout
![Page 48: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/48.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Approaches to CSS LayoutLiquid Layout
![Page 49: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/49.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 50: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/50.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive DesignResponsive Layouts
![Page 51: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/51.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive Design4 elements
1. Liquid layouts
2. Setting viewports via the <meta> tag
3. Customizing the CSS for different viewports using media queries
4. Scaling images to the viewport size
![Page 52: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/52.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive DesignSetting Viewports
![Page 53: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/53.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive DesignSetting Viewports
![Page 54: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/54.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive Design
A media query is a way to apply style rules based on the medium that is displaying the file
Media Queries
![Page 55: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/55.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive Design
• width Width of the viewport
• height Height of the viewport
• device-width Width of the device
• device-height Height of the device
• orientation Whether the device is portrait or landscape
• color The number of bits per color
Media Queries
![Page 56: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/56.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive DesignMedia Queries
![Page 57: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/57.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive DesignResponsive Design Patterns
![Page 58: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/58.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive DesignResponsive Design Patterns
![Page 59: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/59.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive DesignResponsive Design Patterns
![Page 60: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/60.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive Design
• img {max-width: 100%;
}
• <picture>
Scaling Images
![Page 61: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/61.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Responsive DesignScaling Images
![Page 62: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/62.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 63: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/63.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Filters, Transitions, and AnimationsFilters
![Page 64: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/64.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Filters, Transitions, and AnimationsFilters
#someImage {filter: grayscale(100%);/* At time of writing, Chrome and Opera
needs prefix */-webkit-filter: grayscale(100%);
}
#anotherImage {/* multiple filters are space separated */filter: blur(5px) hue-rotate(60deg) saturate(2);-webkit-filter: blur(5px) hue-rotate(60deg)
saturate(2);}
![Page 65: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/65.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Filters, Transitions, and AnimationsTransitions
![Page 66: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/66.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Filters, Transitions, and AnimationsTransitions
![Page 67: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/67.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Filters, Transitions, and AnimationsTransitions vs animations
![Page 68: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/68.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Filters, Transitions, and AnimationsAnimations
![Page 69: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/69.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 70: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/70.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
CSS Frameworks and PreprocessorsCSS Frameworks
![Page 71: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/71.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
CSS Frameworks and PreprocessorsGrid in print design
![Page 72: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/72.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
CSS Frameworks and PreprocessorsUsing Bootstrap
<head><link href="bootstrap.css” rel="stylesheet">
</head><body>
<div class="container"><div class="row">
<div class="col-md-2">left column
</div><div class="col-md-7">
main content</div><div class="col-md-3">
right column</div>
</div></div>
</body>
![Page 73: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/73.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
CSS Frameworks and PreprocessorsCSS Preprocessors
![Page 74: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/74.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7
1 2
3 4
5 6
Normal Flow Positioning Elements
Floating Elements
Constructing Multicolumn Layouts
Approaches to CSS Layouts
Responsive Design
7Filters, Transitions, and Animations
8 CSS Frameworks and Preprocessors
![Page 75: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/75.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Chapter 7 cont.
9 Summary
![Page 76: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/76.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Summary
• absolute positioning
• animations
• BEM
• block
• block-element-modifier
• block-level elements
• clear property
• containing block
• CSS framework
• CSS media queries
• CSS preprocessors
• elements
• filters
• fixed layout
• fixed positioning
• flexbox layout
• float property
• fluid layout
• image placeholder services
• inline elements
• keyframes
• liquid layout
• modifiers
• nonreplaced inline
elements
• normal flow
• positioning context
• progressive enhancement
• relative positioning
• replaced inline elements
• responsive design
• style guides
• transforms
• transitions
• viewport
• z-index
Key Terms
![Page 77: Advanced CSS: Layout](https://reader031.vdocuments.mx/reader031/viewer/2022012518/6192626071d0a4709f44694c/html5/thumbnails/77.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Questions