"Graphic CSS3: core technology and practical cases"

"Graphic CSS3: core technology and practical cases"

Basic information

Desert

Series Name: Web Development Technology Series

Publishing house: Mechanical Industry Press

isbn:9787111469209

Last Date: 2014-7-2

Publication date: July 2014

Folio: 16 Open

Page: 486

Edition: 1-1

Category: Computer > Digital/design > CSS

more about the "" "graphic CSS3: core technology and practical cases"

Editorial recommendations

The experience and painstaking work of the experienced web front-end experts is designed to write the most authoritative CSS3 learning materials and manuals based on the latest CSS3 specifications.

Theoretical knowledge system and comprehensive, graphically explain the functions and characteristics of CSS3, including a large number of practical cases, intuitive, practical and strong

Content Introduction

Books

Computer Books

"Graphic CSS3: Core technology and Case combat" is a well-known web front-end experts for two years of painstaking work, according to the latest CSS3 writing, incorporating the author in the field of CSS for nearly 10 decades of experience, aims to make this book as the CSS3 field of the most authoritative and practical professional works, Learn from an inexperienced reader system for reference by experienced readers.

"Graphic CSS3: Core technology and practical case" theoretical knowledge system comprehensive, detailed on the selector, border, background, text, color, box model, telescopic layout box model, multi-column layout, gradient, transition, animation, media, response web design, Web fonts and other topics covered by all CSS3 new features, All of these are cleverly integrated into the case, rather than purely boring theoretical explanations, the presentation of the way is intuitive, graphically demonstrated these new features, the actual combat, both for each knowledge point carefully designed a small case, there is a comprehensive case, all cases are very detailed, functional needs analysis, Design ideas and complete code, as well as the final effect display.

Directory

"Graphic CSS3: core technology and practical cases"

Objective

1th Chapter unveil the Veil of CSS3 1

1.1 What is CSS3 1

New features of 1.1.1 CSS3 2

Development status of 1.1.2 CSS3 4

1.1.3 can I use CSS3 now? 5

1.1.4 What are the benefits of using CSS3 5

1.2 Browser-to-CSS3 support status 6

1.2.1 Classic review: Illustrated browser wars 7

1.2.2 Market share of the browser 8

1.2.3 Mainstream browser to CSS3 support status 9

1.3 Progressive Enhancement 11

1.3.1 Progressive enhancement and graceful downgrade 11

1.3.2 Benefits of Progressive enhancement 12

Current status and future of 1.4 CSS3 13

1.4.1 who is using CSS3 13

The future of 1.4.2 CSS3 14

1.5 Summary of this chapter 14

2nd Chapter CSS3 Selector 15

2.1 Understanding CSS Selectors 15

2.1.1 Advantages of the CSS3 selector 15

2.1.2 CSS3 Selector Category 16

2.2 Basic Selector 16

2.2.1 Basic Selector Syntax 16

2.2.2 Browser Compatibility 17

2.2.3 Combat experience: using the basic selector 17

2.2.4 Pass Selector 18

2.2.5 Element Selector 18

2.2.6 ID Selector 18

2.2.7 class Selector 19

2.2.8 Group Selector 20

2.3 Hierarchy Selector 21

2.3.1 Hierarchy Selector Syntax 21

2.3.2 Browser Compatibility 21

2.3.3 Combat experience: selecting elements with a hierarchy selector 21

2.3.4 Descendant Selector 23

2.3.5 Sub-selector 23

2.3.6 adjacent Brother selector 24

2.3.7 Universal Brother Selector 25

2.4 Dynamic Pseudo-class selector 25

2.4.1 Dynamic Pseudo-class selector syntax 26

2.4.2 Browser Compatibility 26

2.4.3 Combat Experience: Beautify button 27

2.5 Target Pseudo-class selector 29

2.5.1 Target pseudo-class selector syntax 29

2.5.2 Browser Compatibility 30

2.5.3 Combat Experience: making accordion effects 30

2.6 Language Pseudo-class selector 33

2.6.1 language Pseudo-class selector syntax 33

2.6.2 Browser Compatibility 34

2.6.3 Experience: Customize different language versions citation style 34

2.7 UI Element State pseudo-class selector 36

2.7.1 UI Element State pseudo-class selector syntax 36

2.7.2 Browser Compatibility 36

2.7.3 Combat experience: Bootstrap table cell UI status 37

2.8 Structure Pseudo-class selector 41

2.8.1 relive the DOM tree of HTML 41

2.8.2 structure pseudo-class selector syntax 42

2.8.3 Browser Compatibility 43

What is n in the pseudo-class selector of the 2.8.4 structure 44

How to use 2.8.5 structure pseudo-class selector 47

2.8.6 Combat experience: CSS3 Landscaping Form 61

2.9 Negation pseudo-class selector 66

2.9.1 negation pseudo-class selector syntax 66

2.9.2 Browser Compatibility 67

2.9.3 Combat Experience: Change the picture effect 67

2.10 Pseudo-Elements 69

2.10.1 pseudo element:: First-letter 69

2.10.2 pseudo element:: First-line 70

2.10.3 pseudo elements:: Before and:: After 70

2.10.4 pseudo element:: Selection 72

2.11 Property Selector 73

2.11.1 Property Selector Syntax 73

2.11.2 Browser Compatibility 74

How to use the 2.11.3 property selector 75

2.11.4 Experience: Create a personalized link style 81

2.12 Summary of this chapter 84

3rd Chapter CSS3 Border 85

3.1 CSS3 Bezel Introduction 85

3.1.1 Basic properties of the Border 85

3.1.2 Type of Border 86

3.1.3 who is using the CSS3 border 88

3.2 CSS3 Border Color Properties 88

3.2.1 The syntax and parameters of the Border-color property 88

3.2.2 Browser Compatibility 90

3.2.3 Advantages of the Border-color attribute 90

3.2.4 Combat experience: three-dimensional gradient border effect 91

3.3 CSS3 Picture Border Properties 91

3.3.1 The syntax and parameters of the Border-image property 92

3.3.2 Border-image Properties Using method 92

3.3.3 Browser compatibility 99

3.3.4 Advantages of the Border-image attribute 100

3.3.5 Combat Experience: Button fillet Shadow effect 100

3.4 CSS3 rounded Border Property 105

3.4.1 The syntax and parameters of the Border-radius property 105

3.4.2 Border-radius Properties Using method 107

3.4.3 Browser Compatibility 114

3.4.4 Advantages of the Border-radius attribute 115

3.4.5 Combat Experience: making special graphics 115

3.5 CSS3 Box Shadow properties 118

3.5.1 The syntax and parameters of the Box-shadow property 118

3.5.2 Box-shadow Properties Using method 119

3.5.3 Browser compatibility 129

3.5.4 Advantages of the Box-shadow attribute 130

3.5.5 Combat experience: Making 3d search Form 130

3.6 Summary of this chapter 133

4th Chapter CSS3 Background 134

4.1 CSS3 Background Properties Introduction 134

Basic properties of the 4.1.1 background 134

4.1.2 new properties related to background 137

4.2 CSS3 Background Origin attribute 137

4.2.1 The syntax and parameters of the Background-origin property 137

4.2.2 Background-origin Properties Using method 138

4.2.3 Browser Compatibility 140

4.3 CSS3 Background Trim Properties 141

4.3.1 The syntax and parameters of the Background-clip property 141

4.3.2 Background-clip Properties Using method 143

4.3.3 Browser Compatibility 147

4.4 CSS3 Background Dimension Property 148

4.4.1 The syntax and parameters of the Background-size property 148

4.4.2 Background-size Properties Using method 149

4.4.3 Browser compatibility 152

4.4.4 Combat experience: make full screen background 153

4.5 Inline element background image tiling Loop mode 154

4.6 CSS3 Multi-background attribute 154

4.6.1 CSS3 Multi-background grammar and parameters 155

4.6.2 CSS3 Multi-background Advantage 156

4.6.3 Browser Compatibility 156

4.6.4 Combat experience: Make a flower border 157

4.7 Summary of this chapter 159

5th Chapter CSS3 Text 160

5.1 CSS3 Text Introduction 160

5.2 Css3 Text Shadow property 161

5.2.1 The syntax and parameters of the Text-shadow property 162

5.2.2 Browser Compatibility 162

5.2.3 Combat Experience: Make stereoscopic text 163

5.3 CSS3 Overflow Text Property 166

5.3.1 The syntax and parameters of the Text-overflow property 166

5.3.2 Browser Compatibility 166

5.3.3 Text-overflow Properties Using method 167

5.3.4 Real-life experience: Making a blog list of fixed areas 168

5.4 CSS3 Text Wrapping 170

5.4.1 Word-wrap Property 170

5.4.2 Word-break Property 173

5.4.3 White-space Property 177

5.4.4 Text line Wrapping Tips 179

5.4.5 Text line wrapping technology comparison 180

5.5 Summary of this chapter 180

☆ 6th Chapter CSS3 Color Characteristics 181

6.1 Color features in Web pages 181

6.1.1 Web page color Performance principle 181

6.1.2 Security color for Web pages 182

6.1.3 Color Mode 183

6.2 CSS3 Transparency Property 184

6.2.1 The syntax and parameters of the Opacity property 184

6.2.2 Opacity Browser compatibility 185

6.2.3 Actual combat experience: make transparent transition color block 185

6.3 CSS3 Color Mode 187

6.3.1 Rgba Color Mode 187

6.3.2 HSL Color Mode 190

6.3.3 Hsla Color Mode 194

6.3.4 the choice between RGBA and Hsla color modes 196

6.3.5 Rgba/hsla's IE compatibility scenario 196

6.3.6 RGBA/HSLA Filter Format 197

6.4 Summary of this chapter 197

7th Chapter CSS3 Box Model 198

7.1 CSS Box Model introduction 198

7.1.1 What is a box model 198

7.1.2 Reset Box Model resolution mode 199

7.2 CSS3 Box Model Properties 200

7.2.1 The syntax and parameters of the Box-sizing property 200

7.2.2 Browser Compatibility 201

7.2.3 Combat experience: Box-sizing saved the layout 202

7.3 CSS3 Content Overflow attribute 209

7.3.1 syntax and parameters for Overflow-x and Overflow-y properties 209

7.3.2 Browser Compatibility 209

7.4 CSS3 Free Scaling Property 210

7.4.1 the syntax and parameters of the Resize property 210

7.4.2 Browser Compatibility 210

7.4.3 Actual Combat experience: Modify the Text field arbitrarily resize function 210

7.5 CSS3 Outer Contour Properties 211

7.5.1 the syntax and parameters of the outline property 211

7.5.2 Browser Compatibility 212

Comparison of 7.5.3 outline and Border 212

7.5.4 combat experience: mimic border effect 213

7.6 Summary of this chapter 213

8th Chapter CSS3 Telescopic Layout box Model 214

8.1 Flexbox Model Basics 214

8.1.1 layout mode in CSS 214

8.1.2 function of the Flexbox model 215

8.1.3 terminology in the Flexbox model 215

8.1.4 Flexbox Model Specification Status 218

8.1.5 Flexbox Model Browser compatibility 218

8.1.6 Flexbox Model Syntax Change 219

8.2 Basic use of older version Flexbox models 221

8.2.1 Telescopic container Setup Display 222

8.2.2 Telescopic flow Direction box-orient 224

8.2.3 Layout Order Box-direction 226

8.2.4 Retractable Line Box-lines 229

8.2.5 Spindle Alignment Box-pack 232

8.2.6 Side axis Alignment Box-align 237

8.2.7 Flexibility Box-flex 242

8.2.8 Display Order Box-ordinal-group 246

8.2.9 Combat experience: Box makes adaptive three-column high-layout 249

8.3 Basic use of mixed version Flexbox model 253

8.3.1 Telescopic container Setup display 253

8.3.2 Telescopic flow Direction flex-direction 254

8.3.3 Retractable Line Flex-wrap 257

8.3.4 telescopic flow direction and line break Flex-flow 259

8.3.5 Spindle Alignment Flex-pack 259

8.3.6 Side axis Alignment flex-align 262

8.3.7 stack stretch row flex-line-pack 266

8.3.8 Flexible Flex 271

8.3.9 Display Order Flex-order 273

8.4 Basic use of new version Flexbox model 275

8.4.1 Telescopic Container Display 275

8.4.2 Telescopic flow Direction flex-direction 276

8.4.3 Retractable Line Flex-wrap 276

8.4.4 telescopic flow direction and line break Flex-flow 277

8.4.5 Spindle Alignment Justify-content 277

8.4.6 side axis Alignment Align-items and Align-self 278

8.4.7 stack stretch row align-content 280

8.4.8 Flexible Flex 281

8.4.9 Display Order 285

8.5 Comprehensive case: cross-browser three-column layout 288

8.6 Summary of this chapter 292

9th Chapter CSS3 Multi-column Layout 293

9.1 CSS3 Multi-Column Layout introduction 293

9.1.1 Browser Compatibility 293

9.1.2 CSS3 properties for multi-column layouts 294

9.2 CSS3 Multi-column layout basic Properties 295

9.2.1 The syntax and parameters of the Columns property 295

9.2.2 Browser Compatibility 295

9.2.3 Combat experience: Multi-column layout of web pages 296

9.3 CSS3 Multi-column Layout column width property 297

9.3.1 the syntax and parameters of the Column-width property 297

9.3.2 Actual combat experience: The browser adjusts the number of columns according to the width of the window 298

9.4 CSS3 Multi-column layout number of Columns Property 302

9.4.1 the syntax and parameters of the Column-count property 302

9.4.2 actual combat experience: Show fixed number of columns 302

9.5 CSS3 Multi-column Layout column Spacing Property 303

9.5.1 the syntax and parameters of the Column-gap property 304

9.5.2 Combat Experience: Set column spacing 304

9.6 CSS3 multi-column Layout column border style properties 306

9.6.1 the syntax and parameters of the Column-rule property 306

9.6.2 Combat experience: Set column border 307

9.7 CSS3 Multi-column layout cross-column Properties 309

9.7.1 the syntax and parameters of the Column-span property 310

9.7.2 Combat experience: article title cross-column display 310

9.8 CSS3 Multi-column Layout column height property 311

9.9 Summary of this chapter 311

☆ 10th Chapter CSS3 Gradient 312

10.1 CSS3 Gradient Introduction 312

10.1.1 What is a color label 312

10.1.2 Browser Compatibility 313

10.2 CSS3 Linear Gradient 314

10.2.1 CSS3 Linear gradient syntax and parameters 315

Basic usage of 10.2.2 CSS3 linear gradient 317

10.2.3 Custom CSS3 Linear gradient 324

10.2.4 Combat experience: CSS3 making gradient button 325

10.3 CSS3 Radial Gradient 333

10.3.1 CSS3 Radial Gradient Syntax 333

10.3.2 CSS3 Radial Gradient Property parameter 334

Basic usage of 10.3.3 CSS3 radial gradient 335

10.3.4 Combat experience: CSS3 radial gradient make circular icon button 350

10.4 CSS3 Repeating gradient 353

10.4.1 CSS3 Repeating linear gradient 353

10.4.2 CSS3 Repeating radial gradient 354

10.4.3 Combat experience: Make Notepad paper effect 354

10.5 General case: CSS3 gradient making texture background 355

10.6 Summary of this chapter 357

11th Chapter CSS3 Deformation 358

11.1 CSS3 Deformation Introduction 358

11.1.1 CSS deformation properties and functions 358

11.1.2 Browser Compatibility 359

11.2 CSS Warp Properties 360

11.2.1 Transform Property 360

11.2.2 Transform-origin Property 363

11.2.3 Transform-style Property 370

11.2.4 Perspective Property 372

11.2.5 Perspective-origin Property 377

11.2.6 Backface-visibility Property 380

11.3 CSS3 2d deformation 385

11.3.1 2d Displacement 385

11.3.2 2d Zoom 390

11.3.3 2d rotation 394

11.3.4 2d tilt 396

11.3.5 2d Matrix 398

11.4 CSS3 3d Deformation 403

11.4.1 3d Displacement 404

11.4.2 3d Zoom 406

11.4.3 3d Rotation 407

11.4.4 3d Matrix 409

11.5 Multi-Deformation 410

11.5.1 2d Multi-variant fabrication cube 410

11.5.2 3d Multi-variant fabrication cube 412

11.6 Comprehensive case: 3d deformation production product information show 413

11.7 Summary of this chapter 416

☆ 12th Chapter CSS3 Transition 417

12.1 CSS3 Transition Introduction 417

12.1.1 How to create a simple transition 417

12.1.2 Browser compatibility 418

12.1.3 CSS3 Transition Properties 418

12.2 CSS3 Transition Sub-attributes 420

12.2.1 specifying transition Properties Transition-property 421

12.2.2 Specify the time required for the transition transition-duration 423

12.2.3 specifying the transition function Transition-timing-function 425

12.2.4 specifying the transition delay time Transition-delay 431

12.2. Over 5 css3 transition effects 433

12.3 CSS3 Trigger Transition 434

12.3.1 pseudo element Trigger 434

12.3.2 Media Query Trigger 436

12.3.3 JavaScript Trigger 436

12.4 CSS3 Transition Tips 437

12.4.1 a complete transition 437

12.4.2 properties that can be transitioned 438

12.4.3 Priority Transition Properties 439

12.4.4 start and end of transition for auto 439

12.4.5 Implicit transition 439

12.4.6 different transition modes for switch states 440

12.4.7 almost infinite delay of transition 441

12.4.8 smoother transition through hardware 441

12.4.9 transitions and pseudo elements 442

12.5 Comprehensive case: pure CSS3 make CSS dock navigation effect 443

12.6 Summary of this chapter 449

13th Chapter CSS3 Animation 450

13.1 CSS3 Animation Introduction 450

13.1.1 Browser compatibility 450

13.1.2 CSS3 Animation Properties 451

13.2 Keyframe 452

The role of 13.2.1 @keyframes 452

13.2.2 syntax for @keyframes 453

13.2.3 Browser compatibility 454

Applying animations to elements in 13.3 CSS 454

13.3.1 using @keyframes to declare animations 454

13.3.2 calling @keyframes declaration of animation 456

13.4 CSS3 Animated sub-properties in detail 457

13.4.1 Calling animation Animation-name 457

13.4.2 setting animation playback time Animation-duration 458

13.4.3 Setting the animation playback mode animation-timing-function 458

13.4.4 set the time that the animation starts to play Animation-delay 458

13.4.5 Setting the animation play Count Animation-iteration-count 458

13.4.6 setting animation playback Direction Animation-direction 458

13.4.7 setting the playback status of an animation animation-play-state 459

13.4.8 animating out-of-time properties Animation-fill-mode 459

13.5 Comprehensive case: Full screen slidershow effect 459

13.6 Summary of this chapter 464

14th. Media features and responsive design 465

14.1 Media Type 465

14.1.1 Media type device Types 465

14.1.2 Media Type Reference method 466

14.2 Media features 467

14.2.1 media Query and CSS Properties collection 467

14.2.2 Common Media Query device features 468

14.2.3 Browser Compatibility 468

14.2.4 Media Query using method 468

14.3 Responsive Layout Concept 470

14.3.1 Responsive Design features 471

14.3.2 Terminology in Responsive 471

14.3.3 Responsive Layout Tips 473

14.3.4 META Tag 474

14.4 Summary of this chapter 475

15th Embedding Web Fonts 476

15.1 @font-face Module Introduction 476

15.1.1 Browser compatibility 476

15.1.2 @font-face Syntax 477

15.1.3 advantages of using font icons 477

15.2 implementation of @font-face 478

15.2.1 using @font-face to customize Fonts 478

15.2.2 declaring font source 479

15.2.3 Creating various Fonts 481

15.2.4 Calling Font 483

15.3 Comprehensive case: converting icons to Web fonts 483

15.3.1 Creating an icon font 483

15.3.2 Preparing illustration 484

15.3.3 Import to Icomoon 485

15.3.4 exporting fonts from Icomoon 485

15.3.5 Downloading font files 485

15.3.6 Calling Font 486

15.4 Summary of this chapter 486

the source of this book information: Interactive Publishing Network