Stunning CSS3: A Project-Based Guide to the Latest in CSS
CSS3, the latest version of the web's visual style language, is wildly popular among the industry's top designers, but still in development by the W3C, and new to many users. In Stunning CSS, Zoe Gillenwater, author of the well-received Flexible Web Design, uses a project-based approach an...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
[Place of publication not identified]
New Riders Publishing
2010
|
| Edición: | 1st edition |
| Colección: | Voices That Matter
|
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009629078506719 |
Tabla de Contenidos:
- Cover
- Table of Contents
- Introduction
- CHAPTER 1 The CSS3 Lowdown
- What is CSS3?
- Overview of What's New
- Where CSS3 Stands
- Use CSS3 Now
- The State of Browser Support
- Browser Market Share
- How the Major Players Stack Up
- Progressive Enhancement
- Advantages
- Let Me Put it This Way...
- Benefits of CSS3
- Reduced Development and Maintenance Time
- Increased Page Performance
- Better Search Engine Placement
- Increased Usability and Accessibility
- Staying at the Front of the Pack
- Case Study: The Highway Safety Research Center
- Before CSS3
- After CSS3
- Using CSS3 Wisely
- Browser Prefixes
- Dealing with Non-supporting Browsers
- Filtering IE with Conditional Comments
- Dealing with Unsupportive Clients or Bosses
- Don't Tell Them Everything
- Educate Them About Progressive Enhancement Up Front
- Manage Expectations from Design Mockups
- CHAPTER 2 Speech Bubbles
- The Base Page
- Corralling Long Text
- Graphic Effects Sans Graphics
- Rounding the Corners
- Adding the Bubble's Tail
- Semitransparent Backgrounds with RGBA or HSLA
- Image-free Gradients
- Image-free Drop Shadows
- Image-free Text Shadows
- Transforming the Avatars
- What are Transforms?
- Rotating the Avatars
- The Finished Page
- CHAPTER 3 Notebook Paper
- The Base Page
- Beyond the Basic Background
- Scaling the Background Image
- Multiple Background Images on One Element
- Adding a Graphic Border
- Adding a Drop Shadow
- Embedding Unique Fonts
- What is @font-face?
- Choosing Acceptable Fonts
- Browser Support
- Converting Fonts
- Using @font-face
- The Finished Page
- CHAPTER 4 Styling Images and Links by Type
- The Base Page
- What are Attribute Selectors?
- Indicating File Types with Dynamically Added Icons
- Alternative Icon Ideas
- Fixing IE 6.
- Styling Full-size Photos and Thumbnails Differently
- The Trouble with Classes
- Using Attribute Selectors to Target by Type
- The Finished Page
- CHAPTER 5 Improving Efficiency Using Pseudo-classes
- Targeting Specific Elements Without Using IDs or Classes
- New Structural Pseudo-classes
- Back to the Speech Bubbles: Alternating Colors
- Back to the Photos: Random Rotation
- Dynamically Highlighting Page Sections
- The :target Pseudo-class
- Adding the Table of Contents
- Changing Background Color on the Jumped-to Section
- Animating the Change with Pure CSS
- CHAPTER 6 Different Screen Size, Different Design
- The Base Page
- What are Media Queries?
- Changing the Layout for Large Screens
- From Horizontal Nav Bar to Vertical Menu
- Multi-column Text
- Changing the Layout for Small Screens
- Changing the Layout for Mobile Devices
- What is Device Width?
- The Third Media Query
- Improving the Look on High-resolution Displays
- The Viewport meta Tag
- Workarounds for Non-supporting Browsers
- The Finished Page
- CHAPTER 7 Flexing Your Layout Muscles
- Changes on the Horizon
- Creating Multi-column Layouts Without Floats or Positioning
- Making Blocks Flex
- Adding Columns
- Reordering Columns
- Equal-height Columns
- Vertical and Horizontal Centering
- Reality Check: What Works Now
- Flexible Form Layout
- Sticky Footers
- Alternatives to the Flexible Box Model
- The box-sizing Property
- Future Layout Systems
- APPENDIX A: Browser Support
- Conclusion
- Index
- Credits.
