Mastering CSS

Rich Finelli

扉页
coverpage
+书签
Title Page
Copyright
Mastering CSS
Credits
About the Author
www.PacktPub.com
Why subscribe?
Customer Feedback
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
CSS Foundations
The anatomy of a rule set and the three types of style sheets
Dissecting a rule set
External style sheets
Embedded style sheets
Inline style sheets
The box model and block versus inline elements
The box model
Block level elements versus inline elements
Summary
Ramping Up
Text editors
Snippets
Multiple cursors
Syntax highlighting
Code suggestion
CSS reset
Loading Eric Meyer s CSS reset
Examining the CSS reset
Customizing the CSS reset
Chrome DevTools
How to open developer tools
Changing CSS inside the inspector
Using the console to find errors
Renaming elements — classes and IDs
Classes
Classifying multiple elements
IDs
Should we use classes or IDs?
Descendant selectors
Parent, child, and sibling elements
Creating descendant selectors
Calculating the weight of selectors
BEM
Summary
Creating a Page Layout with Floats
Float introduction–flowing text around images
The Shark movies page
The original purpose of floats
Using the clear property to solve basic problems with floats
Creating a multicolumn layout
Centering an element
Floating columns
Targeting .column using a pseudo class
Collapsed containers
Solving the problems of floats
Using the clear method
Using overflow property with hidden value
The float method
Clearfix hack
Summary
Creating Buttons with Modular, Reusable CSS Classes, and CSS3
Creating buttons with modular CSS
Different button types
Building standard buttons
Multiple classes
Changing the width of the buttons
Changing the border and font colors of the buttons
Positioning the button
Specificity rules
The weights of different selectors
The !important declaration
The universal selector
Reality of the point system
Transitions
Creating a hover state
Using the transition property
Vendor prefixes
Transforms
Applying a scale to our button
Using the translate function
Using the rotate value
Adding vendor prefixes and :focus states
Styling the call-to-action button
Adding the HTML
Positioning using CSS
Styling the button
Gradients
Using the ultimate CSS gradient generator
The CSS output of the ultimate gradient generator
Summary
Creating the Main Navigation and Drop-Down Menu
Starting the navigation
The semantic HTML for building a menu
Using CSS to style the navigation
Using pseudo classes
The first child
The last child
nth-child pseudo class
nth-of-type pseudo class
Absolute positioning
Absolutely positioning the shark
Using fixed positioning for the nav bar
Building the drop-down menu
Creating the basic HTML list
Styling the dropdown
Fixing the hover state
Hiding the drop-down menu using the off-screen hidden technique
CSS animations (part 1)
Defining the animation name, duration, and timing function
Setting additional keyframes
Vendor prefixes
CSS animations (part 2)
Animation delay, iteration-count, and fill-mode
animation-fill-mode
Using the animation shorthand
Vendor prefixes
Additional info on animations
Finalizing the navigation
Fixing the Z index issue
Adding box-shadow
Summary
Becoming Responsive
Fluid grids
Converting pixels to percentages
Calculating percentage widths
Changing padding to a percentage
A fluid grid on the shark movies page
Flexible images
The octopus, crab, and whale images
The shark image
Shrinking images on the shark movies page
Media queries
Anatomy of a media query
Considering iPads and other tablet dimensions
Adding our three columns to the media query
The mobile-first approach
Solving the navigation problem
Mobile menu
Styling the mobile nav in its open state
Adding the hamburger menu icon
Hiding the menu
Using jQuery to trigger the menu on a click
Viewport meta tag
Testing our responsive design on a mobile device
The anatomy of the viewport meta tag
Summary
Web Fonts
The @font-face property
Adding font files directly to the site
Defining and applying new fonts in our CSS
@font-face: a little tricky business
Making it work in all browsers
Google Web Fonts
Finding Google Fonts
Applying fonts in CSS
Adobe Typekit
Selecting fonts from Typekit
Adding fonts to the site
Icon fonts
Building the footer
Downloading a free icon font from the ZURB Foundation
Adding the icon font to our website
Styling icon fonts
Summary
Workflow for HiDPI Devices
2x images
Creating a retina size image (2x)
Sizing down the 2x image using CSS
Checking the image quality on a retina device
Background images
Targeting the seaweed in the footer
Media query for device pixel ratio
Serving the 2x image only to retina devices
Scalable Vector Graphic (SVG)
Saving an Illustrator file as an SVG
Adding the SVG file as a background image
Adding the SVG as a regular ol <img>
You can t stop SVG s, you can only hope to constrain them!
Using an inline SVG
Source set attribute (srcset)
What is srcset?
Adding a set of images to srcset
Testing the image set
Simplifying the srcset attribute
Browser support
Using the W descriptor and sizes attribute of the srcset attribute
Summary
Flexbox, Part 1
Overview of the flexible box layout module
Flex terminology
Flex container and flex items
Main size and cross size
Main axis and cross axis
Justify-content and align-items
From floats to flexbox
Removing float-related properties from the columns section
Turning on flexbox using display: flex
Changing the flex-direction
Browser shrinking
Understanding flex-grow, flex-basis, flex-shrink, and flex
Using flex-grow
Using flex-basis
Using flex-shrink
Using the flex shorthand
More layout, more positioning
Using the justify-content property
Nesting Flexboxes
Using automatic margins
Summary
Flexbox, Part 2
Building the product listing
Using align-items
Using the align-self Flexbox property
Using flex-wrap and align-content
Using flex-wrap
Using align-content
Using the flex-flow shorthand
Changing the display order of flex items
Accessibility impact
Vendor prefixes
Autoprefixer
Gulp
Flexbox homework assignment
Summary
Wrapping Up
The next steps
CSS preprocessors
Variables
Mixins
SASS nesting
Creating and importing partial files with SASS
JavaScript and jQuery
Conclusion and links
The box model and block versus inline elements
Floats
Modular CSS
CSS3
Creating the navigation
Making the site responsive
Web fonts
HiDPI devices
Flexbox
Final tidbit of advice: Audio Podcasts are terrific
Summary

简介

版权

Mastering CSS