Tiny CSS Projects

inside front cover
Tiny CSS Projects
Copyright
contents
front matter
preface
acknowledgments
about this book
Who should read this book?
How this book is organized: A roadmap
About the code
liveBook discussion forum
Other online resources
about the authors
about the cover illustration
1 CSS introduction
1.1 Overview of CSS
1.1.1 Separation of Concerns
1.1.2 What is CSS?
1.2 Getting started with CSS by creating an article layout
1.3 Adding CSS to our HTML
1.3.1 Inline CSS
1.3.2 Embedded CSS
1.3.3 External CSS
1.4 The cascade of CSS
1.4.1 User-agent stylesheets
1.4.2 Author stylesheets
1.4.3 User stylesheets
1.4.4 CSS reset
1.4.5 Normalizer
1.4.6 The !important annotation
1.5 Specificity in CSS
1.6 CSS selectors
1.6.1 Basic selectors
1.6.2 Combinators
1.6.3 Pseudo-class and pseudo-element selectors
1.6.4 Attribute value selectors
1.6.5 Universal selector
1.7 Different ways to write CSS
1.7.1 Shorthand
1.7.2 Formatting
Summary
2 Designing a layout using CSS Grid
2.1 CSS Grid
2.2 Display grid
2.3 Grid tracks and lines
2.3.1 Repeating columns
2.3.2 The minmax() function
2.3.3 The auto keyword
2.3.4 The fractions (fr) unit
2.4 Grid template areas
2.4.1 The grid-area property
2.4.2 The gap property
2.5 Media queries
2.6 Accessibility considerations
Summary
3 Creating a responsive animated loading screen
3.1 Setup
3.2 SVG basics
3.2.1 Positions of SVG elements
3.2.2 Viewport
3.2.3 Viewbox
3.2.4 Shapes in SVG
3.3 Applying styles to SVGs
3.4 Animating elements in CSS
3.4.1 Keyframe and animation-name
3.4.2 The duration property
3.4.3 The iteration-count property
3.4.4 The animation shorthand property
3.4.5 The animation-delay property
3.4.6 The transform-origin property
3.5 Accessibility and the prefers-reduced-motion media query
3.6 Styling an HTML progress bar
3.6.1 Styling the progress bar
3.6.2 Styling the progress bar for -webkit- browsers
3.6.3 Styling the progress bar for -moz- browsers
Summary
4 Creating a responsive web newspaper layout
4.1 Setting up our theme
4.1.1 Fonts
4.1.2 The font-weight property
4.1.3 The font shorthand property
4.1.4 Visual hierarchy
4.1.5 Inline versus block elements
4.1.6 Quotes
4.2 Using CSS counters
4.2.1 The symbols descriptor
4.2.2 The system descriptor
4.2.3 The suffix descriptor
4.2.4 Putting everything together
4.2.5 @counter versus list-style-image
4.3 Styling images
4.3.1 Using the filter property
4.3.2 Handling broken images
4.3.3 Formatting captions
4.4 Using the CSS Multi-column Layout Module
4.4.1 Creating media queries
4.4.2 Defining and styling columns
4.4.3 Using the column-rule property
4.4.4 Adjusting spacing with the column-gap property
4.4.5 Making content span multiple columns
4.4.6 Controlling content breaks
4.5 Adding the finishing touches
4.5.1 Justifying and hyphenating text
4.5.2 Wrapping the text around the image
4.5.3 Using max-width and a margin value of auto
Summary
5 Summary cards with hover interactions
5.1 Getting started
5.2 Laying out the page using grid
5.2.1 Layout using grid
5.2.2 Media queries
5.3 Styling the header using the background-clip property
5.3.1 Setting the font
5.3.2 Using background-clip
5.4 Styling the cards
5.4.1 Outer card container
5.4.2 Inner container and content
5.5 Using transitions to animate content on hover and focus-within
Summary
6 Creating a profile card
6.1 Starting the project
6.2 Setting CSS custom properties
6.3 Creating full-height backgrounds
6.4 Styling and centering the card using Flexbox
6.5 Styling and positioning the profile picture
6.5.1 The object-fit property
6.5.2 Negative margins
6.6 Setting the background size and position
6.7 Styling the content
6.7.1 Name and job title
6.7.2 The space-around and gap properties
6.7.3 The flex-basis and flex-shrink properties
6.7.4 The flex-direction property
6.7.5 Paragraph
6.7.6 The flex-wrap property
6.8 Styling the actions
Summary
7 Harnessing the full power of float
7.1 Adding a drop cap
7.1.1 Leading
7.1.2 Justification
7.1.3 First letter
7.2 Styling the quote
7.3 Curving text around the compass
7.3.1 Adding shape-outside: circle
7.3.2 Adding a clip-path
7.3.3 Creating a shape using border-radius
7.4 Wrapping text around the dog
7.4.1 Using path() . . . or not yet
7.4.2 Floating the image
7.4.3 Adding shape-margin
Summary
8 Designing a checkout cart
8.1 Getting started
8.2 Theming
8.2.1 Typography
8.2.2 Links and buttons
8.2.3 Input fields
8.2.4 Table
8.2.5 Description list
8.2.6 Cards
8.3 Mobile layout
8.3.1 Table mobile view
8.3.2 Description list
8.3.3 Call-to-action links
8.3.4 Padding, margin, and margin collapse
8.4 Medium screen layout
8.4.1 Right-justified numbers
8.4.2 Left-justifying the first two columns
8.4.3 Right-justifying numbers in the input fields
8.4.4 Cell padding and margin
8.5 Wide screens
Summary
9 Creating a virtual credit card
9.1 Getting started
9.2 Creating the layout
9.2.1 Sizing the card
9.2.2 Styling the front of the card
9.2.3 Laying out the back of the card
9.3 Working with background images
9.3.1 Background property shorthand
9.3.2 Text color
9.4 Typography
9.4.1 @font-face
9.4.2 Creating fallbacks using @supports
9.4.3 Font sizing and typography improvements
9.5 Creating the flipping-over effect
9.5.1 Position
9.5.2 Transitions and backface-visibility
9.5.3 The transition property
9.5.4 The cubic-bezier() function
9.6 Border radius
9.7 Box and text shadows
9.7.1 The drop-shadow function versus the box-shadow property
9.7.2 Text shadows
9.8 Wrapping up
Summary
10 Styling forms
10.1 Setting up
10.2 Resetting fieldset styles
10.3 Styling input fields
10.3.1 Styling text and email inputs
10.3.2 Making selects and textareas match the input styles
10.3.3 Styling radio inputs and check boxes
10.3.4 Using the :where() and :is() pseudo-classes
10.3.5 Styling selected radio and checkbox inputs
10.3.6 Using the :checked pseudo-class
10.3.7 Shaping the selected radio buttons’ inner disk
10.3.8 Using CSS shapes to create the check mark
10.3.9 Calculating specificity with :is() and :where()
10.4 Styling drop-down menus
10.5 Styling labels and legends
10.6 Styling the placeholder text
10.7 Styling the Send button
10.8 Error handling
10.9 Adding hover and focus styles to form elements
10.9.1 Using :focus versus :focus-visible
10.9.2 Adding hover styles
10.10 Handling forced-colors mode
Summary
11 Animated social media share links
11.1 Working with CSS architecture
11.1.1 OOCSS
11.1.2 SMACSS
11.1.3 BEM
11.2 Setting up
11.3 Sourcing icons
11.3.1 Media icons
11.3.2 Icon libraries
11.4 Styling the block
11.5 Styling the elements
11.5.1 Share button
11.5.2 Share menu
11.5.3 Share links
11.5.4 scale()
11.5.5 The inherit property value
11.6 Animating the component
11.6.1 Creating a transition
11.6.2 Opening and closing the component
11.6.3 Animating the menu
Summary
12 Using preprocessors
12.1 Running the preprocessor
12.1.1 Setup instructions for npm
12.1.2 .sass versus .scss
12.1.3 Setup instructions for CodePen
12.1.4 Starting HTML and SCSS
12.2 Sass variables
12.2.1 @extend
12.3 @mixin and @include
12.3.1 object-fit property
12.3.2 Interpolation
12.3.3 Using mixins
12.3.4 border-radius shorthand
12.4 Nesting
12.5 @each
12.6 Color functions
12.7 @if and @else
12.8 Final thoughts
Summary
Appendix.
Working with vendor prefixes and feature flags
Using browser developer tools
index