CSS3

by John Paul Mueller

 Table of Contents
Introduction /
About This Book 1
Foolish Assumptions 2
Icons Used in This Book 3
Beyond the Book 3
Where to Go from Here 4

Part 1: Gettinq Started With CSS3 5

Chapter 1: Understanding CSS3 7

Defining Why You Need CSS3 9

Understanding How Browser Support Affects You 11

Obtaining an Overview of the CSS Modules 12
Understanding Styles 13
Creating External Styles 17
Defining the CSS Units of Measure 18

Chapter 2: Performing Basic Tasks 21

Working with Selectors 22

An overview of selectors 22
Working with tag selectors 24
Working with attribute selectors 28
Working with pattern selectors 33
Working with event selectors 36
Working with state selectors 38
Understanding Layout Using the Basic Box Model 40
Viewing the box 40
Working with the box model 41
Designing Backgrounds 43

Chapter 3: Working with Fonts and Colors 45

Using Fonts 46
Understanding Web Safe Fonts 47
Using standard Web safe functionality 48
Using .WOFF fonts 49
Producing Text Effects 51
Using the safe text decorations 51
Adding the CSS3 text effects 52
CSS3 For Dummies

Adding Colors 55
Understanding how CSS colors work 55
Using color values 56
Using color names 57
Using hexadecimal values for color 57
Understanding Aural Style Sheets 58

Chapter 4: Working with Graphics 61

Understanding the <img>Tag 62

Working with Foreground Images 63
Creating a border 65
Centering the image 66
Adding a caption 68
Adding Background Images 69
Using CSS alone 69
Using a single image 75
Using multiple images 77
Positioning Graphics 78
Working with Repetitive Images 80
Changing repetitive backgrounds 80
Creating repetitive borders 81

Chapter 5: Using CSS Shortcuts 85

Understanding Style Inheritance 86
Cascading Styles—Using Multiple Styles Together 87
Using Additional Basic User Interface Features 92
Performing quick navigation 93
Providing a document outline 97
Creating Special Effects 102
Transforming objects, including graphics 102
Using the attrO function 106
Working with Multiple Columns 108

Part 11: Making Layouts Fast and Simple

With Libraries 713

Chapter 6: Creating a Test Site with jQuery and jQuery Ul 115

Using the jQuery Core Features 116
Detecting the user's browser type 116
Selecting elements 120
Changing an element's CSS 121
Understanding jQuery UI 124
 Table of Contents

Using the jQuery UI Controls 125

Working with Accordion 126

Working with Datepicker 128
Working with Dialog 129
Working with Progressbar 131
Working with Slider 133
Working with Tabs 135
Performing jQuery UI Interactions 137

Creating a Draggable Interface 137

Creating a Droppable Interface 138
Creating a Resizable Interface 140
Creating a Selectable Interface 141
Creating a Sortable Interface 143
Creating jQuery UI Special Effects 144
Adding color animations 145

Employing class transitions 146

Working with advanced
easing 149
Performing transforms 151
Denning the Basic Page Layout 152

Chapter 7: Creating Pages Using Dynamic Drive 155

Working with Layouts 156

Developing with fixed layouts 156

Developing with liquid layouts 157

Using two-column layouts 157
Working with layouts 158

Modifying the layouts 160

Using three column layouts 163
Employing CSS frames 167

Creating Menus 168

Developing horizontal menus 168

Developing vertical menus 170
Performing Image Magic 171

Dressing Up Forms 172

Using the Free Icons 173

Chapter 8: Using the Google API 175

Understanding Why Developers Like the Google API 176

Working with AngularJS 178
Working with Chrome Frame 179

Working with Dojo 179

Working with Ext Core 181

CSS3 For Dummies

Accessing jQuery 181

Accessing jQuery UI 181

Working with MooTools 182
Working with Prototype 183

Working with script_aculo_us 184

Working with SWFObject 184
Working with WebFont Loader 185
Using the Google APIs Explorer 185

Getting a Google account 185

Obtaining a developer key 186
Working with the Google APIs Explorer 187
Creating a Site that Uses Multiple Libraries 189

Part 111: Working With CSS3 Generators 191

Chapter 9: Managing Colors Using ColorZilia 193

Obtaining the Plugin 194

Choosing Colors with the Color Picker 198
Using the Color Picker 198
Using the Palette Browser 200
Grabbing Colors Using the Eyedropper 203
Working with the Color Analyzer 204
Performing the analysis 204
Seeing the details 205
Saving the output 207
Creating a Gradient 207
Developing a basic gradient 208
Adding special effects 210
Saving the result 211
Converting an image to CSS 212

Chapter 10: Creating Themes Using ThemeRoller 215

Understanding ThemeRoller 216
Using the ThemeRoller Interface 217
Working with Predefined Themes 218
Viewing the predefined themes 219
Accessing the predefined themes directly 220
Creating Custom Themes 222
Choosing a predefined theme as a starting point 223
Performing the configuration 223
 Table of Contents j)C

Downloading Themes to Your System 227

Downloading a predefined theme 227
Downloading a custom theme 228
Adding Custom Themes to Your Projects 229
Viewing the index.html file 230
Viewing the interactive demos 231
Looking at the documentation 233
Adding a custom theme to your own project 234

Chapter 11: Using the Dynamic Drive Tools 237

Managing Images with Image Optimizer 239

Creating Icons Using Favlcon Generator 241
Creating Animations with Animated Gif 243
Generating Images Using Gradient Image Maker 246
Generating Controls Using Button Maker Online 249
Creating the button 250
Using the button 251
Adding Pizzazz Using Ribbon Rules 253
Creating the ribbon rule 253
Using the ribbon rule 254

Part IV: Modifying Pre-Built Content

for a Unique Look 257

Chapter 12: Understanding CSS for Libraries and Generators 259

Findingthe CSS for a Library or Generator 260

Viewing the CSS 262
Deciding What to Modify or Tweak 264
Locating Modification Aids 265
Searching for modification aids 266
Using other developer solutions 266
Getting answers from other professionals 268

Chapter 13: Modifying the jQuery and jQuery Ul CSS 269

Looking at the jQuery and jQuery UI CSS 270
Understanding the basic
layout 270
Defining reasonable changes 274
Avoiding potential error conditions 275
Defining a Specialized Control 276
Creating Specialized Control Effects 279
Developing the page code 279
Creating the XML file 282
 CSS3 For Dummies
X

282
Working with Added Graphics
283
Creating the HTML
Designing the CSS styles 284
Developing the required code 286
287
Working with Plug-ins
289
Finishing with the Coded Bits

Chapter 14: Modifying the Dynamic Drive CSS 291

Understanding the Script Categories 292

Locating the CSS for a Particular Feature 295

Adding Modifications 297

Obtaining the example 297

298
Making the example more flexible

Modifying the JavaScript 300

Modifying the CSS 303

Working with Menus 304

Denning a specialized menu 304

Developing with graphics
menus 308

Creating specialized menu effects 309

Part V: The Part of Tens 311

Chapter 15: Ten Phenomenal Places to Find Libraries 313

Animating Page Elements with Animate.css 313

Locating a Library Using CSSDB.co 315

Combining CSS3 and JavaScript with JSter 316

Developing Background Animations with Animatable 317

Easing Your Way into a Transition with Easings 318

Transitioning Elements Using Morf.js 319

Creating Full Interactive Applications with YUI 320

Displaying Tooltips Using HINT.css 321
Ridding Yourself of Browser Differences with Normalize.ess 321

Ensuring Your Application Works with

Mobile Devices Using Skeleton 322

Chapter 16: Ten Phenomenal Places to Find Generators 323

Creating Animations Using Stylie 323

Designing CSS Styles Using CSSDesk 325

Making Applications Run Faster with yepnope.js 326
Generating Templates Using Initializr 327
 Table of Contents

Optimizing Applications to Work with Older Browsers

with Modernizr 329
Enhancing Selector Support Using Selectivizr 329
Designing Unusual List Presentations with Liffect 330
Editing Code Using Komodo Edit 331
Engineering Layer Effects Using LayerStyles 332
Testing Your Font Stacks Using FFFFALLBACK 333

Chapter 17: Ten Quick Ways to Produce a Great Layout 335

Learning the Layout Properties 336

Creating Basic Layouts Using CSS Layout Generator 336
Getting Help Understanding CSS Layouts with Learn CSS Layout 338
Using a Reset to Overcome Errors 338
Creating Mobile-Friendly Layouts with the 960 Grid System 339
Finding Articles and Blog Posts Discussing Layouts 340
Obtaining Free Layouts Through Design Shack 340
Getting a Really Complex Design Through Free CSS Templates 341
Relying on a CSS Framework 343
Using Best Practices to Enhance Your Layouts 344

Index 345