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