book

The Book of CSS3, 2nd Edition

by Peter Gasston

November 2014

Beginner to intermediate

304 pages

7h 12m

English

No Starch Press

Read now

Unlock full access

The Scope of This BookChapter by ChapterThe Appendices and Further ResourcesIntroduction to the Second Edition
What CSS3 Is and How It Came to BeA Brief History of CSS3CSS3 Is ModularThere Is No CSS3Module Status and the Recommendation ProcessIntroducing the SyntaxVendor PrefixesLet’s Get Started

The Advantages of Media QueriesSyntaxMedia FeaturesWidth and HeightPixel RatioDevice Width and HeightOrientationAspect RatioMultiple Media FeaturesMobile-First Web DevelopmentSummaryMedia Queries: Browser Support
Attribute SelectorsNew Attribute Selectors in CSS3Beginning Substring Attribute Value SelectorEnding Substring Attribute Value SelectorArbitrary Substring Attribute Value SelectorMultiple Attribute SelectorsThe General Sibling CombinatorSummarySelectors: Browser Support
Structural Pseudo-classesThe :nth-* Pseudo-classes:first-of-type, :last-child, and :last-of-type:only-child and :only-of-typeOther Pseudo-classes:target:empty:root:not()UI Element StatesConstraint Validation Pseudo-classesPseudo-elementsThe ::selection Pseudo-elementSummaryDOM and Attribute Selectors: Browser Support
The @font-face RuleDefining Different FacesTrue vs. Artificial Font FacesA “Bulletproof” @font-face SyntaxUsing Local FontsFont FormatsThe Final “Bulletproof” SyntaxLicensing Fonts for Web UseA Real-World Web Fonts ExampleControlling Font LoadingMore Font Propertiesfont-size-adjustfont-stretchOpenType FeaturesEnabling Font FeaturesFont Feature PropertiesSummaryWeb Fonts: Browser Support
Understanding Axes and CoordinatesApplying Dimensional Effects: text-shadowMultiple ShadowsRestricting OverflowAligning TextControlling Line WrappingBreaking WordsHyphenating WordsResizing ElementsSummaryText Effects and Typographic Styles: Browser Support
Column Layout MethodsPrescriptive Columns: column-countDynamic Columns: column-widthVarying Distribution of Content Across ColumnsCombining column-count and column-widthColumn Gaps and RulesContaining Elements Within ColumnsElements Spanning Multiple ColumnsSummaryMultiple Columns: Browser Support
Updates to Existing Background Propertiesbackground-positionbackground-attachmentbackground-repeatMultiple Background ImagesDynamically Scaled Background ImagesBackground Clip and OriginUpdated Background ShortcutSummaryBackground Images: Browser Support
Giving Your Borders Rounded CornersThe border-radius ShorthandUsing Percentage ValuesUsing Images for Bordersborder-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatThe border-image Shorthand PropertyBrowser SupportDrop ShadowsInset ShadowsSummaryBorder and Box Effects: Browser Support
The opacity PropertyNew and Extended Color ValuesThe Alpha ChannelHue, Saturation, LightnessHSLAThe Color Variable: currentColorSummaryColor and Opacity: Browser Support
Linear GradientsSetting Gradient DirectionAdding Extra Color-Stop ValuesRepeating Linear GradientsRadial GradientsUsing Radial GradientsUsing Multiple Color-Stop ValuesRepeating Radial GradientsMultiple GradientsSummaryGradients: Browser Support
The transform PropertyrotatetranslatescaleskewAn Important Note About Transformation FunctionsTransforming Elements with MatricesSummary2D Transformations: Browser Support
3D Elements in CSSThe Transformation FunctionsRotation Around an AxisPerspectiveTranslation Along the AxisScalingThe Transformation MatrixThe perspective and perspective-origin PropertiesThe Transformation OriginThe transform-style PropertyShowing or Hiding the BackfaceSummary3D Transformations: Browser Support
Transitionstransition-propertytransition-durationtransition-timing-functiontransition-delayThe transition Shorthand PropertyThe Complete Transition ExampleMultiple TransitionsAnimationsKeyframesanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-stateThe animation ShorthandThe Complete Animations ExampleMultiple AnimationsSummaryTransitions and Animations: Browser Support
Declaring the Flexible Box ModelFlexbox AlignmentReversing the Content OrderFully Reordering ContentAdding FlexibilityThe flex-grow PropertyThe flex-shrink PropertyThe flex-basis PropertyThe flex ShorthandAlignment Inside the ContainerHorizontal Alignment with justify-contentVertical Alignment with align-itemsCross-Axis Alignment with align-selfWrap and FlowThe flex-flow ShorthandAligning Multiple Lines with align-contentBrowser Support and Legacy SyntaxesSummaryFlexbox: Browser Support
Relative Length UnitsRoot-Relative UnitsViewport-Relative UnitsCalculated ValuesSizing ElementsBox SizingIntrinsic and Extrinsic SizingSummaryValues and Sizing: Browser Support
Grid TerminologyDeclaring and Defining the GridCreating Explicit Grids by Setting Track SizePlacing Items in an Explicit GridGrid Placement Shorthand PropertiesRepeating Grid LinesNamed Grid AreasThe grid-template ShorthandImplicit GridsGrid Items Without a Declared PlaceCombining Explicit and Implicit GridsThe grid ShorthandGrid Item Stacking OrderInternet Explorer’s Grid Layout SyntaxSummaryGrid Layout: Browser Support
Blend Modesbackground-blend-modemix-blend-modeisolationFilter Effectsblur()brightness() and contrast()grayscale(), sepia(), and saturate()hue-rotate()opacity()drop-shadow()Multiple Filter Effect FunctionsFilters in SVGMaskingClippingImage MaskingBorder MaskingMasking in SVGCombining Filter Effects and MaskingSummaryBlend Modes, Filter Effects, and Masking: Browser Support
ShapesExclusionsRegionsVariablesFeature QueriesDevice AdaptationSticky PositioningAnd Much, Much MoreConclusionFuture CSS: Browser Support
Media Queries (Chapter 2)Selectors (Chapter 3)DOM and Attribute Selectors (Chapter 4)Web Fonts (Chapter 5)Text Effects and Typographic Styles (Chapter 6)Multiple Columns (Chapter 7)Background Images (Chapter 8)Border and Box Effects (Chapter 9)Color and Opacity (Chapter 10)Gradients (Chapter 11)2D Transformations (Chapter 12)3D Transformations (Chapter 13)Transitions and Animations (Chapter 14)Flexbox (Chapter 15)Values and Sizing (Chapter 16)Grid Layout (Chapter 17)Blend Modes, Filter Effects, and Masking (Chapter 18)Future CSS (Chapter 19)
General CSS ResourcesChapter 2: Media QueriesChapters 3 and 4: Selectors, and Pseudo-classes and Pseudo-elementsChapters 5 and 6: Web Fonts, and Text Effects and Typographic StylesChapter 7: Multiple ColumnsChapters 8 and 9: Background Images, and Border and Box EffectsChapter 10: Color and OpacityChapter 11: GradientsChapters 12 and 13: 2D and 3D TransformationsChapter 14: Transitions and AnimationsChapter 15: Flexible Box LayoutChapter 16: Values and SizingChapter 17: Grid LayoutChapter 18: Blend Modes, Filter Effects, and MaskingChapter 19: The Future of CSS
7 Multiple Columns8 Background Images10 Color and Opacity13 3D Transformations18 Blend Modes, Filter Effects, and Masking

Overview

The Book of CSS3, 2nd Edition distills the murky language of the CSS3 specification into plain English and shows you what CSS3 can do now, in all major browsers.