CSS is a must-know language for all web developers. In this practical book, you’ll explore numerous techniques to improve the way you write CSS as you build 12 tiny projects.
In Tiny CSS Projects you’ll build twelve exciting and useful web projects including:
• A loading screen created by styling SVG graphics
• A responsive newspaper layout with multiple columns
• Animating social media buttons with pseudo-elements
• Designing layouts using CSS grids
• Summary cards that utilize hover interactions
• Styling forms to make them more appealing to your users
The projects may be tiny, but the CSS skills you’ll learn are huge! Tiny CSS Projects teaches you how to make beautiful websites and applications by guiding you through a dozen fun coding challenges. You’ll learn important skills through hands-on practice as you tinker with your own code and make real creative decisions about the projects you’re building. You’ll rapidly master the basics and then press on into CSS’s exciting layout features including grid and flexbox, animations, transitions, and media queries.
about the technology
Don’t settle for boring web pages! With Cascading Style Sheets you can control color, layout, and typography to make your sites both functional and beautiful. CSS is a essential skill for web developers and designers. This book will help you get started the right way.
About the book
Tiny CSS Projects builds your CSS skills by guiding you through 12 creative mini-projects. Each interesting challenge starts with a downloadable HTML skeleton. As you flesh it out with your own design ideas, you’ll master CSS concepts like transitions, layout, and styling forms, and explore powerful features including Flexbox and Grid. All the skills you’ll learn are easy to transfer to full-size applications. When you finish, you’ll have an exciting portfolio of designs ready to go for your next project.
What's inside
• Transitions and animations using keyframes
• Layout techniques including Grid and Flexbox
• Styling form elements including radio buttons
• Embedding fonts and typography-related styles
• Conditional styling using pseudo-elements and media queries
About the reader
For readers who know the basics of HTML and frontend development. No previous experience with CSS is required.
About the authors
Martine Dowden is an author, speaker, and award-winning CTO. Michael Gearon is a user experience designer and frontend developer who has worked with many well-known brands.
Author(s): Michael Gearon, Martine Dowden
Edition: 1
Publisher: Manning
Year: 2023
Language: English
Commentary: Publisher's PDF
Pages: 392
City: Shelter Island, NY
Tags: Best Practices; CSS; Web Design
Tiny CSS Projects
brief contents
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
Symbols
Numerics
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
