Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Save to My Library
Look up keyword or section
Like this
4Activity

Table Of Contents

INTRODUCING CSS3
What CSS3 Is and How It Came to Be
A Brief History of CSS3
CSS3 Is Modular
Module Status and the Recommendation Process
CSS3 Is Not HTML5
Let’s Get Started: Introducing the Syntax
The Advantages of Media Queries
Syntax
Media Features
Width and Height
Device Width and Height
Using Media Queries in the Real World
Orientation
Aspect Ratio
Pixel Ratio
Multiple Media Features
Beginning Substring Attribute Value Selector
Ending Substring Attribute Value Selector
Arbitrary Substring Attribute Value Selector
Multiple Attribute Selectors
The General Sibling Combinator
Selectors: Browser Support
PSEUDO-CLASSES AND PSEUDO-ELEMENTS
Structural Pseudo-classes
The nth-* Pseudo-classes
first-of-type, last-child, and last-of-type
only-child and only-of-type
Other Pseudo-classes
target
empty
root
UI Element States
Pseudo-elements
The selection pseudo-element
DOM and Attribute Selectors: Browser Support
WEB FONTS
The @font-face Rule
Defining Different Faces
True vs. Artificial Font Faces
A “Bulletproof” @font-face Syntax
Using Local Fonts
Font Formats
The Final “Bulletproof” Syntax
The Fontspring Bulletproof Syntax
Licensing Fonts for Web Use
A Real-World Web Fonts Example
More Font Properties
font-size-adjust
font-stretch
OpenType Features
Web Fonts: Browser Support
TEXT EFFECTS AND TYPOGRAPHIC STYLES
Understanding Axes and Coordinates
Applying Dimensional Effects: text-shadow
Multiple Shadows
Letterpress Effect
Adding Definition to Text: text-outline and text-stroke
More Text Properties
Restricting Overflow
Resizing Elements
Aligning Text
MULTIPLE COLUMNS
Column Layout Methods
Prescriptive Columns: column-count
Dynamic Columns: column-width
A Note on Readability
Different Distribution Methods in Firefox and WebKit
Combining column-count and column-width
Column Gaps and Rules
Containing Elements within Columns
Elements Spanning Multiple Columns
Elements Breaking over Multiple Columns
Multiple Columns: Browser Support
Background Images
Multiple Background Images
Background Size
Background Clip and Origin
background-repeat
Background Image Clipping
Image Masks
Background Images: Browser Support
BORDER AND BOX EFFECTS
Giving Your Borders Rounded Corners
border-radius Shorthand
Differences in Implementation Across Browsers
Using Images for Borders
Multicolored Borders
Adding Drop Shadows
Border and Box Effects: Browser Support
COLOR AND OPACITY
Setting Transparency with the opacity Property
New and Extended Color Values
The Alpha Channel
Border Overlap Issue in WebKit
Hue, Saturation, Lightness
HSLA
The Color Variable: currentColor
Matching the Operating System’s Appearance
Color and Opacity: Browser Support
GRADIENTS
Linear Gradients
Linear Gradients in Firefox
Linear Gradients in WebKit
Using Linear Gradients
Adding Extra color-stop Values
Radial Gradients
Radial Gradients in Firefox
Radial Gradients in WebKit
Using Radial Gradients
Multiple color-stop Values
The WebKit Advantage
Multiple Gradients
Repeating Gradients in Firefox
Repeating Linear Gradients
Repeating Radial Gradients
Gradients: Browser Support
2D TRANSFORMATIONS
The transform Property
rotate
Position in Document Flow
transform-origin
translate
skew
scale
Multiple Transformations
Transforming Elements with Matrices
Reflections with WebKit
2D Transformations: Browser Support
TRANSITIONS AND ANIMATIONS
Transitions
Property
Duration
Timing Function
Delay
Shorthand
The Complete Transition Example
Multiple Transitions
Triggers
More Complex Animations
Key Frames
Animation Properties
The Complete Animations Example
Multiple Animations
Transitions and Animations: Browser Support
3D TRANSFORMATIONS
3D Elements in CSS
Transform Style
The Transformation Functions
Rotation Around an Axis
Translation Along the Axis
Scaling
The Transformation Matrix
Perspective
The perspective and perspective-origin Properties
The Transformation Origin
Showing or Hiding the Backface
3D Transformations: Browser Support
FLEXIBLE BOX LAYOUT
Triggering the Flexible Box Layout
The box Value in Firefox
Inline Boxes
Making the Boxes Flexible
Unequal Ratios
Zero Values and Firefox Layouts
Grouping Flexible Boxes
Changing Orientation
Changing the Order of Flexible Boxes
Reversing the Order
Further Control over Ordering
Alignment
Same-Axis Alignment
Cross-Browser Flex Box with JavaScript
Multiple Rows or Columns
Stop the Presses: New Syntax
Flexible Box Layout: Browser Support
TEMPLATE LAYOUT
Setting Up the JavaScript
Using position and display to Create Rows
Multiple Rows
Slots and the ::slot() Pseudo-element
Creating Empty Slots
Setting Height and Width on Rows and Columns
Width Keyword Values
Setting Both Row Height and Column Width
Default Content: The @ Sign
Template Layout: Browser Support
THE FUTURE OF CSS
Mathematical Operations
Calculation Functions
Cycle
The Grid Positioning Module
Image Sprites
Grouping Selectors
Constants and Variables
WebKit CSS Extensions
CSS Variables
Extending Variables Using Mixins
CSS Modules
Nested Rules
Haptic Feedback
Future CSS: Browser Support
CSS3 SUPPORT IN CURRENT MAJOR BROWSERS
Media Queries (Chapter 2)
Selectors (Chapter 3)
Pseudo-classes and Pseudo-elements (Chapter 4)
Web Fonts (Chapter 5)
Text Effects and Typographic Styles (Chapter 6)
Multiple Columns (Chapter 7)
Background Images and Other Decorative Properties (Chapter 8)
Border and Box Effects (Chapter 9)
Color and Opacity (Chapter 10)
Gradients (Chapter 11)
2D Transformations (Chapter 12)
Transitions and Animations (Chapter 13)
3D Transformations (Chapter 14)
Flexible Box Layout (Chapter 15)
Template Layout (Chapter 16)
The Future of CSS (Chapter 17)
Browsers
WebKit
Firefox
Opera
Internet Explorer
Browser Support
When Can I Use . .
Quirks Mode
Find Me By IP
Feature Detection and Simulation
Perfection Kills
Modernizr
CSS3 Pie
Code-Generation Tools
CSS3, Please!
CSS3 Generator
CSS3 Gradient Generator
Type Folly
Web Fonts
Typekit
Fontdeck
Fonts.com Web Fonts
Google Font API
Web FontFonts
Font Squirrel
Fontspring
INDEX
0 of .
Results for:
No results containing your search query
P. 1
Css

Css

Ratings: (0)|Views: 109 |Likes:
Published by Bogdan Darius
learn
learn

More info:

Published by: Bogdan Darius on Feb 10, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/12/2014

pdf

text

original

You're Reading a Free Preview
Pages 7 to 30 are not shown in this preview.
You're Reading a Free Preview
Pages 37 to 46 are not shown in this preview.
You're Reading a Free Preview
Pages 53 to 101 are not shown in this preview.
You're Reading a Free Preview
Pages 108 to 259 are not shown in this preview.
You're Reading a Free Preview
Pages 266 to 308 are not shown in this preview.

Activity (4)

You've already reviewed this. Edit your review.
1 thousand reads
1 hundred reads
Virgil liked this

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->