![]()
![]()
Table of Contents
Professional CSS3
Credits
About the Author
About the Reviewer
www.PacktPub.com
eBooks, discount offers, and more
Why subscribe?
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
1. Foundations and Tools
Choosing the right IDE
Speeding up the programming process with snippets/Emmet
Keyboard shortcuts
Cross browser compatibility – which browsers should you install?
How to use inspector
Key shortcuts
Preprocessor – why should you use them?
Nesting elements in preprocessors
Using variables to parametrize your CSS code
Using mixins in preprocessors
Mathematical operations
Logic operations and loops
Joining of multiple files
Less – a short introduction
CSS with Stylus
SASS – the most mature preprocessor
Short comparison
SASS foundation
Variables – where and how to use
Simple mixins – where and how to use (@mixin, @include)
Extending classes (@extend)
Importing files (@import)
Using of & in SASS
Compass features
Simple automatization (with Gulp)
Pixelperfect layouts tools
Pixelfperfect plugin
MeasureIT plugin
Checking compatibility
Good assumptions in code
Creating proper selectors
Using IDs
Using classes
Grouping selectors
Interesting selectors
Adjacent sibling combinatory +
Child combinator ">"
Adjacent sibling combinatory ~
Getting elements by attributes
Attributes with exact value [attribute="value"]
Attributes which begin with [attribute^="value"]
Whitespace separated attribute values [attribute~="value"]
Attribute values ending with [attribute$="value"]
Attributes containing strings [attribute*="value"]
Using !important in CSS
Preparing your project
Files structure
How to keep variables in a project
How and where to keep mixins (local and global)
Keep typography styles in a separate file
Views of specific elements
Summary
2. Mastering of Fundamentals
Traditional box model
Padding/margin/border/width/height
Omitting problems with the traditional box model (box-sizing)
Floating elements
Possibilities of floating elements
Most known floating problems
Defining clear fix/class/mixins
Example of using floating elements
Display types
Block elements
Inline elements
Inline-block display
Where can you use other types of elements – navigation
Where can you use other types of elements – problem of equal boxes
CSS elements positioning
Static, relative, absolute, fixed – differences
Lists with fixed images (on the right or left) and descriptions
Summary
3. Mastering of Pseudoelements and Pseudoclasses
Pseudoclasses
How can we check :active, :hover state?
Usage – multilevel menu
Usage – CSS hover rows
Usage of pseudoclasses
How to use :first-child, :last-child, :nth-child()
Usage – styling table
Exploring :nth-child parameters
How to use :nth-last-child
How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type
Empty elements with the :empty pseudoclass
Supporting forms styling with pseudoclasses
Validation with :valid and :invalid
Adding input statuses :focus, :checked, :disabled
Additional aspect – colorize the placeholder
Drawing primitives with CSS
How to draw a rectangle/square
How to draw a circle
How to draw a ring
How to draw a triangle with CSS
Pseudoelements
What is :before and :after?
Where can we use :before and :after?
First letter and first line – simple text manipulation
How to change selection color? Usage of ::selection
Summary
4. Responsive Websites – Prepare Your Code for Specific Devices
The foundation of responsive websites
Desktop first methodology
Mobile first methodology
Adjusting the viewport in HTML
Choosing the right viewport
Above the fold
Media queries – where can you use it
How to build media queries
How media queries work?
Media queries for specific views/devices
How to choose proper media queries for mobile devices
Usage sample – main navigation
Summary
5. Using Background Images in CSS
CSS backgrounds
Repeating of background
Background size
Background position
Multiple backgrounds
How to create and use sprites
Usage of base64
Retina problems
Summary
6. Styling Forms
Forms – the most known issues
Forms – enable superpowers
How to style simple input
Don't forget about placeholders
Complex form based on input[type="text"] and labels
How to style textarea
Styling of select (drop down)
Summary
7. Resolving Classic Problems
Centering elements
Inline elements – horizontal centering
Block elements – centering in both axes
Using transform in centering
Dealing with opacity
Opacity versus RGBA – differences and where can we use them
Opacity in the past – fallback for old IE versions
Summary
8. Usage of Flexbox Transform
Flexbox
Flexbox property align-items
Flexbox property flex-wrap
Flexbox property justify-content
Flexbox property align-content
Flexbox property flex-direction
Usage of flexbox – creating page structure
Usage of flexbox – change order of b...
