Tiny CSS Projects (Martine Dowden, Michael Gearon)（Z-Library）

M A N N I N G Martine Dowden ● Michael Gearon

overflow property scale property inherit keyword CSS architecture Chapter 11 @supports at-rule Background images Chapter 9 Backface visibility Flexbox CSS box model shape- outside property line- height property clip- path property Chapter 7 Pseudo- classes Styling links transform property Transitions Chapter 5 Layout using CSS grids background- clip property How to animate elements in CSS Styling an HTML progress bar Vendor prefixes Chapter 3 Accessible animations Applying styles to SVGs transform- origin property SVG basics Ways to write CSS Adding CSS to HTML CSS selectors Overview of CSS The cascade of Cascading Style Sheets Specificity in CSS Chapter 1 Chapter 2 Grid template areas Grid tracks and lines grid property Media queries grid-gap property Accessibility Chapter 4 Importing fonts font- weight property Styling images Text justification and hyphens CSS Multi-column Layout Module CSS counters FlexboxChapter 6 object- fit property Background size and positioning CSS custom properties Box shadow Chapter 8 Styling links and buttons Styling definition lists Styling tables Typography :focus and :f cus-o visible pseudo- classes :where and :is pseudo- classes Chapter 10 Styling radio buttons and check boxes Styling input fields accent- color property Styling drop-down selects Accessibility in form design Chapter 12 @each rule @mixins and @include @extend at-rules Color functions @if and @else Nesting in SCSS Using pre- processors

Tiny CSS Projects

Tiny CSS Projects MARTINE DOWDEN MICHAEL GEARON MANN I NG SHELTER ISLAND

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: orders@manning.com ©2023 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. The authors and publisher have made every effort to ensure that the information in this book was correct at press time. The authors and publisher do not assume and hereby disclaim any liability to any party for any loss, damage, or disruption caused by errors or omissions, whether such errors or omissions result from negligence, accident, or any other cause, or from any usage of the information herein. Manning Publications Co. Development editor: Elesha Hyde 20 Baldwin Road Technical Development editor: Arthur Zubarev PO Box 761 Review editor: Adriana Sabo Shelter Island, NY 11964 Production editor: Andy Marinkovich Copy editor: Keir Simpson Proofreader: Katie Tennant Technical proofreader: Louis Lazaris Typesetter: Dennis Dalinnik Cover designer: Marija Tudor ISBN: 9781633439832 Printed in the United States of America

v brief contents 1 ■ CSS introduction 1 2 ■ Designing a layout using CSS Grid 37 3 ■ Creating a responsive animated loading screen 60 4 ■ Creating a responsive web newspaper layout 91 5 ■ Summary cards with hover interactions 121 6 ■ Creating a profile card 146 7 ■ Harnessing the full power of float 176 8 ■ Designing a checkout cart 196 9 ■ Creating a virtual credit card 236 10 ■ Styling forms 271 11 ■ Animated social media share links 308 12 ■ Using preprocessors 330

contents preface xii acknowledgments xiii about this book xv about the authors xviii about the cover illustration xix 1 CSS introduction 1 1.1 Overview of CSS 1 Separation of Concerns 2 ■ What is CSS? 3 1.2 Getting started with CSS by creating an article layout 4 1.3 Adding CSS to our HTML 8 Inline CSS 8 ■ Embedded CSS 10 ■ External CSS 12 1.4 The cascade of CSS 13 User-agent stylesheets 13 ■ Author stylesheets 13 User stylesheets 13 ■ CSS reset 14 ■ Normalizer 15 The !important annotation 17 1.5 Specificity in CSS 17 1.6 CSS selectors 19 Basic selectors 19 ■ Combinators 22 ■ Pseudo-class and pseudo-element selectors 27 ■ Attribute value selectors 31 Universal selector 32vi

CONTENTS vii1.7 Different ways to write CSS 32 Shorthand 32 ■ Formatting 34 2 Designing a layout using CSS Grid 37 2.1 CSS Grid 38 2.2 Display grid 42 2.3 Grid tracks and lines 43 Repeating columns 44 ■ The minmax() function 45 The auto keyword 45 ■ The fractions (fr) unit 45 2.4 Grid template areas 48 The grid-area property 51 ■ The gap property 53 2.5 Media queries 54 2.6 Accessibility considerations 57 3 Creating a responsive animated loading screen 60 3.1 Setup 61 3.2 SVG basics 61 Positions of SVG elements 63 ■ Viewport 64 Viewbox 66 ■ Shapes in SVG 67 3.3 Applying styles to SVGs 68 3.4 Animating elements in CSS 71 Keyframe and animation-name 71 ■ The duration property 75 The iteration-count property 76 ■ The animation shorthand property 77 ■ The animation-delay property 77 ■ The transform-origin property 79 3.5 Accessibility and the prefers-reduced-motion media query 81 3.6 Styling an HTML progress bar 83 Styling the progress bar 83 ■ Styling the progress bar for -webkit- browsers 85 ■ Styling the progress bar for -moz- browsers 87 4 Creating a responsive web newspaper layout 91 4.1 Setting up our theme 93 Fonts 94 ■ The font-weight property 97 ■ The font shorthand property 98 ■ Visual hierarchy 98 ■ Inline versus block elements 99 ■ Quotes 101

CONTENTSviii4.2 Using CSS counters 102 The symbols descriptor 103 ■ The system descriptor 103 The suffix descriptor 103 ■ Putting everything together 104 @counter versus list-style-image 104 4.3 Styling images 104 Using the filter property 105 ■ Handling broken images 106 Formatting captions 108 4.4 Using the CSS Multi-column Layout Module 110 Creating media queries 110 ■ Defining and styling columns 110 Using the column-rule property 112 ■ Adjusting spacing with the column-gap property 113 ■ Making content span multiple columns 114 ■ Controlling content breaks 115 4.5 Adding the finishing touches 115 Justifying and hyphenating text 116 ■ Wrapping the text around the image 118 ■ Using max-width and a margin value of auto 119 5 Summary cards with hover interactions 121 5.1 Getting started 123 5.2 Laying out the page using grid 124 Layout using grid 125 ■ Media queries 127 5.3 Styling the header using the background-clip property 130 Setting the font 130 ■ Using background-clip 131 5.4 Styling the cards 133 Outer card container 133 ■ Inner container and content 135 5.5 Using transitions to animate content on hover and focus-within 139 6 Creating a profile card 146 6.1 Starting the project 147 6.2 Setting CSS custom properties 149 6.3 Creating full-height backgrounds 150 6.4 Styling and centering the card using Flexbox 151 6.5 Styling and positioning the profile picture 154 The object-fit property 155 ■ Negative margins 156 6.6 Setting the background size and position 160

CONTENTS ix6.7 Styling the content 163 Name and job title 163 ■ The space-around and gap properties 165 ■ The flex-basis and flex-shrink properties 167 The flex-direction property 168 ■ Paragraph 169 ■ The flex- wrap property 170 6.8 Styling the actions 172 7 Harnessing the full power of float 176 7.1 Adding a drop cap 180 Leading 180 ■ Justification 180 ■ First letter 181 7.2 Styling the quote 183 7.3 Curving text around the compass 184 Adding shape-outside: circle 185 ■ Adding a clip-path 187 Creating a shape using border-radius 188 7.4 Wrapping text around the dog 190 Using path() . . . or not yet 190 ■ Floating the image 191 Adding shape-margin 192 8 Designing a checkout cart 196 8.1 Getting started 197 8.2 Theming 200 Typography 200 ■ Links and buttons 202 ■ Input fields 206 Table 207 ■ Description list 212 ■ Cards 213 8.3 Mobile layout 215 Table mobile view 215 ■ Description list 221 ■ Call-to-action links 223 ■ Padding, margin, and margin collapse 224 8.4 Medium screen layout 225 Right-justified numbers 225 ■ Left-justifying the first two columns 228 ■ Right-justifying numbers in the input fields 229 ■ Cell padding and margin 229 8.5 Wide screens 230 9 Creating a virtual credit card 236 9.1 Getting started 237 9.2 Creating the layout 239 Sizing the card 240 ■ Styling the front of the card 241 Laying out the back of the card 245

CONTENTSx9.3 Working with background images 248 Background property shorthand 248 ■ Text color 250 9.4 Typography 252 @font-face 253 ■ Creating fallbacks using @supports 255 Font sizing and typography improvements 257 9.5 Creating the flipping-over effect 259 Position 259 ■ Transitions and backface-visibility 261 The transition property 263 ■ The cubic-bezier() function 263 9.6 Border radius 266 9.7 Box and text shadows 267 The drop-shadow function versus the box-shadow property 267 Text shadows 268 9.8 Wrapping up 269 10 Styling forms 271 10.1 Setting up 272 10.2 Resetting fieldset styles 275 10.3 Styling input fields 276 Styling text and email inputs 276 ■ Making selects and textareas match the input styles 278 ■ Styling radio inputs and check boxes 280 ■ Using the :where() and :is() pseudo-classes 284 Styling selected radio and checkbox inputs 284 ■ Using the :checked pseudo-class 286 ■ Shaping the selected radio buttons’ inner disk 287 ■ Using CSS shapes to create the check mark 288 Calculating specificity with :is() and :where() 290 10.4 Styling drop-down menus 290 10.5 Styling labels and legends 293 10.6 Styling the placeholder text 294 10.7 Styling the Send button 295 10.8 Error handling 296 10.9 Adding hover and focus styles to form elements 300 Using :focus versus :focus-visible 301 ■ Adding hover styles 303 10.10 Handling forced-colors mode 303 11 Animated social media share links 308 11.1 Working with CSS architecture 309 OOCSS 309 ■ SMACSS 309 ■ BEM 310

CONTENTS xi11.2 Setting up 310 11.3 Sourcing icons 312 Media icons 312 ■ Icon libraries 313 11.4 Styling the block 313 11.5 Styling the elements 314 Share button 314 ■ Share menu 315 ■ Share links 316 scale() 317 ■ The inherit property value 318 11.6 Animating the component 319 Creating a transition 319 ■ Opening and closing the component 320 ■ Animating the menu 326 12 Using preprocessors 330 12.1 Running the preprocessor 331 Setup instructions for npm 331 ■ .sass versus .scss 333 Setup instructions for CodePen 334 ■ Starting HTML and SCSS 334 12.2 Sass variables 338 @extend 341 12.3 @mixin and @include 342 object-fit property 343 ■ Interpolation 344 ■ Using mixins 344 ■ border-radius shorthand 347 12.4 Nesting 347 12.5 @each 349 12.6 Color functions 353 12.7 @if and @else 355 12.8 Final thoughts 357 appendix 360 index 363

preface One of the hard parts of learning a new language or skill is extrapolating the individ- ual skills learned into the thing we’re trying to build. Although we may know the mechanics of grid or understand how flex works, learning which to choose and when (or how) to achieve a specific end that we’re envisioning can be challenging. Rather than start with the theory and then apply it to our projects, in this book we took the opposite approach. We started with the project and then looked at which skills and techniques are necessary to achieve our end. But why talk about CSS? We can write an entire application using nothing but browser-provided defaults, but it wouldn’t have much personality, now, would it? With CSS, we can achieve a lot for both our users and our business needs. For every- thing from brand recognition to guiding users with consistent styles and design par- adigms to making the project eye-catching, CSS is an important tool in our toolbox. Regardless of libraries, preprocessors, or frameworks, the underlying technology that drives how our applications and websites look is CSS. With that in mind, so as not to get sidetracked by the individual quirks and functionality of libraries and frame- works, we chose to go back to the basics, writing this book in plain old vanilla CSS because, if we understand CSS, applying it to any other tech stack or environment becomes much easier down the line.xii

acknowledgments We, Martine and Michael, thank Andrew Waldron, acquisitions editor, and Ian Hough, assistant acquisitions editor, for all their support and enthusiasm about get- ting the book off the ground and during the development process. We thank Elesha Hyde, development editor, who was a huge source of support from start to finish, pro- viding professional guidance, editing, and encouragement. Louis Lazaris, technical proofreader, and Arthur Zubarev, technical development editor, provided thoughtful, useful technical feedback and code reviews. Thank you both for all your input. Finally, we send a huge thank-you to all the early-access readers and reviewers throughout the process, whose input helped shape and develop this book. We thank all the reviewers: Abhijith Nayak, Al Norman, Alain Couniot, Aldo Solis Zenteno, Andy Robinson, Anil Radhakrishna, Anton Rich, Aryan Maurya, Ashley Eatly, Beardsley Ruml, Bruno Sonnino, Carla Butler, Charles Lam, Danilo Zeković, Derick Hitchcock, Francesco Argese, Hiroyuki Musha, Humberto A. Sanchez II, James Alonso, James Carella, Jereme Allen, Jeremy Chen, Joel Clermont, Joel Holmes, Jon Riddle, Jonathan Reeves, Jonny Nisbet, Josh Cohen, Kelum Senanayake, Lee Harding, Lin Zhang, Lucian Enache, Marco Carnini, Marc-Oliver Scheele, Margret “Pax” Williams, Matt Deimel, Mladen Ðurić, Neil Croll, Nick McGinness, Nitin Ainani, Pavel Šimon, Ranjit Sahai, Ricardo Marotti, Rodney Weis, Steffen Gläser, Stephan Max, Steve Grey-Wilson, and Vincent Delcoigne. Your suggestions helped make this book better.xiii

ACKNOWLEDGMENTSxivMARTINE DOWDEN: I thank my family, friends, and coworkers at Andromeda Galactic Solutions for their unwavering support and encouragement through my career and the writing of this book. I’d also like to recognize the Mozilla Foundation and the countless individual con- tributors to the MDN docs for their tireless efforts in providing the developer commu- nity documentation for web languages such as CSS. Finally, I’d like to thank the creators, Lennart Schoors and Alexis Deveria, and all the contributors to Caniuse, for making it easy to know which browsers will support which CSS features. MICHAEL GEARON: This being my first book, producing it has been a fun and chal- lenging process. I’d like to thank all my family members for their support, especially my wife, Amy Smith, who has been there through the whole process. I must also say a special thank-you to my cats, Puffin and Porg, who tried (and failed) to get the odd word in the book.

about this book Tiny CSS Projects enables designers and developers to learn CSS through a series of 12 projects. Who should read this book? Tiny CSS Projects is for readers who know the basics of HTML and frontend develop- ment. No experience in CSS is required. Both beginners and experienced coders will develop a deeper understanding of CSS through this book. Rather than present a the- oretical view of CSS, each chapter applies a different part of CSS to a project to demonstrate in practice how CSS works. How this book is organized: A roadmap The book has 12 chapters, each of which is a self-contained project:  Chapter 1, “CSS introduction”—This chapter’s project walks readers through the basics of CSS, examining cascade, specificity, and selectors.  Chapter 2, “Designing a layout using CSS grids”—This chapter explores CSS grids by designing a layout for an article while, in the process, looking at con- cepts such as grid tracks, minmax(), repeat functions, and the fractions unit.  Chapter 3, “Creating a responsive animated loading screen”—This project uses CSS to create a responsive animated loading screen, using scalable vector graph- ics and animation to style an HTML progress bar.  Chapter 4, “Creating a responsive web newspaper layout”—This chapter is about designing a multicolumn responsive web newspaper layout. It exploresxv

ABOUT THIS BOOKxvithe CSS Multi-column Layout Module, counter styles, and broken images, as well as how to adapt the layout by using media queries.  Chapter 5, “Summary cards with hover interactions”—This project creates a series of cards using background images, transitions to reveal content on hover, and media queries to check capabilities and browser window size.  Chapter 6, “Creating a profile card”—This chapter’s project creates a profile card and explores custom properties and background gradients, as well as set- ting image sizes and using Flexbox for layout.  Chapter 7, “Harnessing the full power of float”—This chapter shows the power of CSS floats to position images, shape content around CSS shapes, and even create a drop cap.  Chapter 8, “Designing a checkout cart”—This chapter is about designing a checkout cart, which involves styling responsive tables, using a CSS grid for lay- out, formatting numbers, and setting CSS conditionally based on viewport size by using media queries.  Chapter 9, “Creating a virtual credit card”—This chapter focuses on creating a virtual credit card and achieving a 3D effect by flipping the card over on hover.  Chapter 10, “Styling forms”—This chapter looks at designing forms, including radio buttons, inputs, and drop-down menus, as well as promoting accessibility.  Chapter 11, “Animated social media share links”—This project employs CSS transitions to animate social media share links and examines CSS architecture options such as OOCSS, SMACSS, and BEM.  Chapter 12, “Using preprocessors”—The final chapter demonstrates how we can use preprocessors when writing CSS and presents the Sass syntax. About the code This book contains many examples of source code, both in numbered listings and inline with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. Sometimes code is also in bold to high- light changes from previous steps in the chapter, such as when a new feature adds to an existing line of code. In many cases, the original source code has been reformatted; we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In some cases, even this was not enough, and listings include line-continuation markers (➥). Code annotations accompany many of the listings, highlighting import- ant concepts. You can get executable snippets of code from the liveBook (online) version of this book at https://livebook.manning.com/book/tiny-css-projects. The complete code for the examples in the book is available for download from the Manning website at https://www.manning.com and from GitHub at https://github.com/michaelgearon/ Tiny-CSS-Projects.

ABOUT THIS BOOK xviiliveBook discussion forum Purchase of Tiny CSS Projects includes free access to liveBook, Manning’s online read- ing platform. Using liveBook’s exclusive discussion features, you can attach comments to the book globally or to specific sections or paragraphs. It’s a snap to make notes for yourself, ask and answer technical questions, and receive help from the authors and other users. To access the forum, go to https://livebook.manning.com/book/tiny-css- projects/discussion. You can also learn more about Manning’s forums and the rules of conduct at https://livebook.manning.com/discussion. Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and authors can take place. It is not a commitment to any specific amount of participation on the part of the authors, whose contributions to the forum remain voluntary (and unpaid). We sug- gest that you try asking them some challenging questions lest their interest stray! The forum and the archives of previous discussions will be accessible from the publisher’s website for as long as the book is in print. Other online resources Often, we can’t remember how a property works or what values are available to us. One great resource for looking up how a particular property, function, or value works is the MDN docs (https://developer.mozilla.org/en-US). Although any given aspect of CSS functionality may be defined in the CSS specifica- tion, that doesn’t mean all browsers support it yet. We often find ourselves needing to understand which browsers support what and whether we should create a fallback or use alternative methods to achieve our goal. Caniuse (https://caniuse.com) is a great resource that allows us to check a particular property or function to see how well sup- ported it is in browsers by version. Finally, to make sure that everyone can access and use our websites and applica- tions, we can’t forget the importance of accessibility. The documents provided by the World Wide Web Consortium’s Web Accessibility Initiative are great places to start, and they link to many other resources, including Web Content Accessibility Guide- lines (https://www.w3.org/WAI/fundamentals).

about the authors MARTINE DOWDEN is an author, international speaker, and award-winning chief technology officer of Andromeda Galactic Solutions. Her expertise includes psychology, design, art, acces- sibility, education, consulting, and software development. Tiny CSS Projects is her fourth book about web technologies and draws on 15 years of experience in building web interfaces that are beautiful, functional, and accessible. For her community contributions, Martine has been named a Microsoft MVP in Developer Technologies and a Google Developer Expert in Web Technologies and Angular. MICHAEL GEARON is a user experience designer and frontend developer from Wales, UK. He earned a BS in Media Technol- ogy at the University of South Wales while practicing coding and design. Since then, Mike has worked with well-known UK brands, including Go.Compare and Ageas. He now works in the Civil Service, previously for Companies House and currently at Government Digital Service.xviii