Book Image

Responsive Web Design with HTML5 and CSS - Third Edition

By : Ben Frain
Book Image

Responsive Web Design with HTML5 and CSS - Third Edition

By: Ben Frain

Overview of this book

Responsive Web Design with HTML5 and CSS, Third Edition is a renewed and extended version of one of the most comprehensive and bestselling books on the latest HTML5 and CSS tools and techniques for responsive web design. Written in the author's signature friendly and informal style, this edition covers all the newest developments and improvements in responsive web design including better user accessibility, variable fonts and font loading, CSS Scroll Snap, and much, much more. With a new chapter dedicated to CSS Grid, you will understand how it differs from the Flexbox layout mechanism and when you should use one over the other. Furthermore, you will acquire practical knowledge of SVG, writing accessible HTML markup, creating stunning aesthetics and effects with CSS, applying transitions, transformations, and animations, integrating media queries, and more. The book concludes by exploring some exclusive tips and approaches for front-end development from the author. By the end of this book, you will not only have a comprehensive understanding of responsive web design and what is possible with the latest HTML5 and CSS, but also the knowledge of how to best implement each technique.

Related Content you might be interested in

Current Title:

Small book image
Responsive Web Design with HTML5 and CSS - Third Edition
Ben Frain
Apr, 2020 | 408 pages
No titles found
Table of Contents (14 chapters)
Preface
Preface
Who this book is for
What this book covers
Get the most out of this book
Get in touch
1
The Essentials of Responsive Web Design
The Essentials of Responsive Web Design
The browser and device landscape
Defining responsive web design
Our first responsive example
Summary
Free Chapter
2
Writing HTML Markup
Writing HTML Markup
Getting the start of HTML pages right
The forgiving nature of HTML5 markup
New semantic elements in HTML5
HTML text-level semantics
Obsolete HTML features
Putting HTML elements to use
WCAG accessibility conformance and WAI-ARIA for more accessible web applications
Embedding media in HTML5
Summary
3
Media Queries – Supporting Differing Viewports
Media Queries – Supporting Differing Viewports
The viewport meta tag
Why media queries are needed for a responsive web design
Media query syntax
Using media queries to alter a design
Advanced media query considerations
Combine media queries or write them where it suits?
Media Queries Level 4
Summary
4
Fluid Layout, Flexbox, and Responsive Images
Fluid Layout, Flexbox, and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Introducing Flexbox
Different Flexbox layouts with media queries
Responsive images
Summary
5
Layout with CSS Grid
Layout with CSS Grid
What CSS Grid is and the problems it solves
Setting up a grid
Placing and sizing grid items
Named grid lines
Applying what you have learned so far
Shorthand syntax
Summary
6
CSS Selectors, Typography, Color Modes, and More
CSS Selectors, Typography, Color Modes, and More
Selectors, units, and capabilities
Web typography
CSS color formats and alpha transparency
Summary
7
Stunning Aesthetics with CSS
Stunning Aesthetics with CSS
Text shadows with CSS
Box shadows
Background gradients
Repeating gradients
Background gradient patterns
Multiple background images
CSS filters
A warning on CSS performance
CSS clip-path
mask-image
mix-blend-mode
Summary
8
Using SVGs for Resolution Independence
Using SVGs for Resolution Independence
A brief history of SVG
An image that is also a readable web document
Creating SVGs with popular image editing packages and services
Inserting SVGs into your web pages
Inserting an SVG inline
Reusing graphical objects from symbols
What you can do with each SVG insertion method (inline, object, background-image, and img)
Extra SVG capabilities and oddities
Animating SVG with JavaScript
Optimizing SVGs
Using SVGs as filters
A note on media queries inside SVGs
SVG implementation tips
Summary
Further resources
9
Transitions, Transformations, and Animations
Transitions, Transformations, and Animations
What CSS transitions are and how we can use them
Understanding timing functions
CSS 2D transforms
CSS 3D transformations
Animating with CSS
Exercises and training
Summary
10
Conquer Forms with HTML5 and CSS
Conquer Forms with HTML5 and CSS
HTML5 forms
HTML5 input types
Styling HTML5 forms with CSS
Summary
11
Bonus Techniques and Parting Advice
Bonus Techniques and Parting Advice
Breaking up long URLs
Truncating text
Creating horizontal scrolling panels
CSS Scroll Snap
Linking CSS breakpoints to JavaScript
Get designs in the browser as soon as possible
Test on real devices
Embrace progressive enhancement
Avoid CSS frameworks in production
Hiding, showing, and loading content across viewports
Validators and linting tools
Performance
The next big things
Summary
12
Other Books You May Enjoy
Other Books You May Enjoy
13
Index
Index

mask-image

You can also mask elements with images, from either an image source with transparency such as a PNG graphic, a linear-gradient, which we looked at earlier in this chapter, or an SVG mask element. You can read about all the possibilities afforded to us in the specification here: https://www.w3.org/TR/css-masking-1/.

In the meantime, we will just look at a fairly straightforward example so you can appreciate the kind of effect that is possible and how the syntax works to achieve it.

mask-image example

Suppose we have an image. I have one that NASA took of Mars. I'd get one I took myself but, you know, it's a bit of a jaunt.

Now, suppose we also have a PNG image that is transparent except for the word "MARS." We can use this PNG as a mask on top of our image element.

This is what we see in the browser:

Figure 7.26: A mask image applied

Here is our relevant HTML:

<img
  src="mars.jpg"
  alt="An image...
Previous Section
End of Section 11
Next Section