Index

alt property, 62 • Symbols and AngularJS (Google library) Numerics • Google CDN, accessing with, 177 jQuery, combining with, 179 , (commas), separating tags with, 24 online resources, 178–179 { } (curly braces) overview, 178–179 $ (dollar signs), 118 animate( ) method > (greater-than signs), separating overview, 145 tagswith, 24 properties supported, 146 # (hashtags) transformations, using with, 152 color attribute, using with, 15, 57 Animate.css library, 313–315 hexadecimal color values, using with, 253 animated class, 314 jQuery, using with, 277 Animated Gif tool styles, using with, 15 images, creating, 244 - (hyphens), using with attribute online resources, 243 selectors, 32 test page, creating, 245 + (plus signs), separating tags with, 24 animations “ (quotes), using with spaces, 16 adding with animate( ) method, ~ (tildes), separating tags with, 24 145–146 “30 CSS Best Practices for Beginners” advantages of, 243 (Stansberry), 344 browser support, 11–13 960 Grid System website, 339 colors, 145–146 creating with Animated Gif, 243–245 • A • images, creating, 244 lists, 330–331 Accordion widget, 126–127 online resources, 107, 243, 317–320 :active state selector, 38 overview, 244 AddClass( ) method, 147–148 Stylie generator, 323–325 addClass( ) method, 139 test page, creating, 245 add-ons, 190 transitions, 243–245 Adobe Flash. See Flash API (Application Programming Interface). :after pattern selector,COPYRIGHTED 34 See MATERIAL also Google API AJAX (Asynchronous JavaScript and XML) browsers targeted, 176 Dojo support, 179 CDN, solving problems with, 175 Dynamic Drive techniques, 293 CSS, avoiding with, 176 Ext Core support, 181 defi nition, 115 overview, 119 Dynamic Drive, using, 155 Prototype support, 183 jQuery, using, 118 script.aculo.us support, 184 multiples, advantages of using, 175–176 ajax property, 119 overview, 175 alert( ) method, 129–130 arrows, creating, 36

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 345345 99/26/13/26/13 22:55:55 PMPM 346 CSS3 For Dummies

Asynchronous JavaScript and XML (AJAX) overview, 58 Dojo support, 179 testing with readers, 58 Dynamic Drive techniques, 293 author’s website, 324 Ext Core support, 181 azimuth aural property, 58 overview, 119 Prototype support, 183 • B • script.aculo.us support, 184 attr( ) method tag, 163 example, 107–108 background property, 247–248 online resources, 106 background-attachment property, 79 overview, 106 background-color attribute, 15 text, hiding, 108 background-image property, 44, 75–76 attribute selectors. See also individual background-position property, 79 selectors by name background-repeat property, 44, 80 browser issues, solving, 329–330 backgrounds. See also graphics categories, 23 background property, using, 247–248 color control, 31 browsers, compatibility, 74 event selectors, 37–38 CSS, designing with, 44 formatting issues, 32 GIF fi les, using for, 240 importance of, 329 images, adding, 21 inheritance rules, 86–87 images, multiple, 77–78 jQuery, commonly used, 120 images, positioning, 78–79 :not selector usage, 25 images, resizing, 80–81 overview, 22–23 images, single, 75–76 Selectivizr tool, using for, 329–330 linear gradients, using, 70–72 specifi c versus generic, 87 online resources, 71–75 state selectors, 23, 38–40 overview, 69–70 tag separator signs, 24 patterns, creating, 71 tags, working with, 24 url( ) method, 44 [Attribute] selector, 29 background-size property, 44, 80 [Attribute$=Value] selector, 29 basic box model [Attribute*=Value] selector, 29 borders, controlling, 41 [Attribute^=Value] selector, 29 margins, setting, 41–42 [Attribute|=Value] selector, 29 overview, 40 [Attribute~=Value] selector, 29 padding, controlling, 41 [Attribute=Value] selector, 29 regions described, 41 attributes. See also individual attributes by :before pattern selector, 34 name Ben’s Sandbox, 266–267 name pairs, 15 blink: feature, 51–52 :not selector usage, 25 block tags, 91–92 selector names, 28–29 BMP fi le format, 241 selectors, using with, 23 body styles, 88–90 value pairs, 15 tag aural style sheets inheritance rules, 90–91 aural properties, 58–60 properties, controlling with, 43 benefi ts of, 10, 45 border-color property, 43

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 346346 99/26/13/26/13 22:55:55 PMPM Index 347

#BorderContainer style, 82 online resources, 174 border-image property, 83 ThemeRoller, using with, 215 border-image-generator, 83 themes, applying to, 235 border-radius property, 42 transitions, using with, 146–148 borders, creating, 65–66 BYOD (Bring Your Own Device), 10 border-width property, 42 bottom property, 78 • C • Bring Your Own Device (BYOD), 10 variable, 118 calendar scripts, 292 browsers calibration, monitors, 198 API, using with, 176 cascading background patterns, viewing, 74 advantages of, 87 border issues, 81 defi nition, 9 color names, standard, 57 example, 25–28 column prefi xes, 108–109 overview, 86–87 columns, fi xed versus liquid, 156–157 Cascading Style Sheets. See CSS3 compatibility, online resources, 23, CDN (Google Content Distribution 321–322, 338–339 Network). See also individual libraries compatibility strategies, 11–12, 116 by name CSS features supported, 9–10 advantages of, 175 CSS3 standards, advantages of, 10 libraries, linking to, 177 detection of, 116–120, 182, 329 libraries included, 177 Dynamic Drive script verifi cations, libraries, paid versus free, 178 291–292 online resources, 177 font considerations, 47, 51 permissions needed, 178 HTML5 issues, 101 reliability, increasing with, 176 measurements, relative versus absolute, security, enhancing with, 177 19–20 centering techniques for images, 66–67 mobile device support, 116 change method, 134 navigation techniques, 93–97 ChangeButtonState( ) method, 151 Normalize.css, compatibility solutions, :checked state selector, 38 321–322 Chrome Frame (Google library), 177, 179 online resources, 117–118 class attribute optimizing applications for, 329 advantages of, 21 resets, 338–339 selectors, using with, 28 scripts, controlling with, 294 class transitions, 146–148 special effects and CSS, 8 class=”separator” attribute, 307 text effects, cautions, 52 .ClassName selector, 28 transform prefi xes, 105 code version detection, 12 browsers, fi nding with, 260–261 web safe fonts, 47–49 href attribute, fi nding with, 260 method, 252 libraries and generators, tweaking, buttons 259–260 Accordion widget, using with, 126–127 online resources, 263–264 forms, creating, 172 streamlining, 326–327 micro buttons, creating, 250–251 tweaking choices, 264–265 micro buttons, using, 251–252 viewing, 262–264

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 347347 99/26/13/26/13 22:55:55 PMPM 348 CSS3 For Dummies

Color Analyzer (ColorZilla) web safe color palette, 56 CSS fi le information, 206 webpages, analyzing colors on, 205–206 limitations of, 204 color-shifted. See colorblindness output saving options, 207 ColorZilla overview, 204 browser compatibility, 193 usage details, understanding, 205–206 Color Analyzer, 204–207 webpage, analyzing, 204–205 Color Picker, 198–200 color attribute debugging help, 197 hashtags, using, 15 Eyedropper, grabbing colors with, hexadecimal values, using, 15 203–204 names versus hexadecimal values, 31 eyedropper icon, using, 197 online resources for names, 31 Firebug, launching from, 197 Color Picker (ColorZilla) online resources, 193–194, 196–197 colors, entering directly, 199 overview, 193–194 online resources, 199 Palette Browser, using, 200–203 overview, 198 plug-in installation, 194–197 Palette Browser versus, 200 samples, fi nding colors from, 200 samples, fi nding colors from, 200 column-count property, 109 smooth versus Discrete options, 200 column-fill property, 109 colorblindness column-gap property, 109 color selection, importance of, 194 column-rule property, 109 color-shifted versus, 194 column-rule-color property, 109 online resources, 194 column-rule-style property, 109 perception issues, 55 column-rule-width property, 109 colors. See also gradients columns Color Analyzer (ColorZilla), 204–207 browser prefi xes, 108–109 Color Picker (ColorZilla), 198–200 Dynamic Drive, creating with, 158–160 custom palettes, creating, 207 Dynamic Drive, modifying with, 160–163 custom palettes, saving and sharing, example, 109–111 200–203, 207 layouts, fi xed versus liquid, 156–157 defi ning, methods for, 55–56 layouts, frames, 167 device type, effects upon, 198 layouts, three-column, 163–167 Eyedropper (ColorZilla), grabbing colors layouts, two-column, 157–158 with, 203–204 online resources, 110, 167 hiding items with, 278 overview, 108 monitor calibration, 198 columns property, 109 names, obtaining, 199 column-span property, 109 names versus hexadecimal values, 31, 57 column-width property, 109 online resources, 55–57, 199 commas (,), separating tags, 24 overview, 55, 193 compatibility Palette Browser (ColorZilla), 200–203 browser differences, solving, 321–322 samples, fi nding colors from, 200 online resources, 23 screen references, avoiding for, 56 strategies for, 11–12, 116 selection types, 201 #Configuration style, 136 value systems supported, 56–57 confirm( ) method, 129

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 348348 99/26/13/26/13 22:55:55 PMPM Index 349

containers Extended Box Model, 13 graphics, using with, 65–66 features, new, 9–10 resizing, 68 generic attribute names, using, 15 content attribute, 308 Marquee module, 13 Content Distribution Network (CDN). See modules, using, 10, 12–13 also individual libraries by name need for, 9–10 advantages of, 175 online resources, 36, 155–156 libraries, linking to, 177 overview, 7–10 libraries included, 177 separating content from presentation, 7 libraries, paid versus free, 178 special characters, 36 online resources, 177 special effects, creating, 7–8 permissions needed, 178 standardizing organizations, 8 reliability, increasing with, 176 standards, additions to, 8 security, enhancing with, 177 CSS3 Gradient Generator, 72 tag, 281 CSSDB.co website, 315–316 #contentcolumn style, 163 CSSDesk, 325–326 corners, rounding, 42 CSS:resetr website, 339 cropping images, 239 cue-after aural property, 58 crossorigin property, 62 cue-before aural property, 58 .css( ) method, 122 curly braces ({ }) CSS code. See code jQuery, using with, 277 CSS fi les. See also external style sheets styles, using with, 15 colors, analyzing, 205–206 customizing. See also jQuery modifi cations creating, naming, saving, 18 breaking changes, issues with, 269, gradients, converting to, 212–213 274–275 HTML, modifying, 298–300 common adjustments, 265 inheritance rules, 86–87 community resources, using, 259–260, 268 internal styles, overriding, 227, 229 CSS code, fi nding, 260–261 jQuery, viewing, 273 CSS code, viewing, 262–264, 273 scope feature, 229 CSS fi les, 298–300 CSS frames, 167–168 CSS versus JavaScript, 297 CSS frameworks, 343 developer solutions, advantages of, CSS generators. See generators 266–267 CSS Layout Generator, 336–337 external style sheets versus main CSS layouts. See layouts code, 276 CSS modules. See modules JavaScript, 300–303 CSS Reset website, 339 menus, CSS-based, 307 CSS Tools: Reset CSS website, 339 online resources, 260–264, 266 CSS3 (Cascading Style Sheets). See also overview, 259–260, 264–265 online resources plug-ins, using for, 275–276 APIs, avoiding, 176 reasonable, defi nition of, 274–275 browser prefi xes, 105, 108–109 resources, matching, 275 browser support, 8–12 rewriting versus, 260 cascade effects, 9 third-party products, 265–266 CSSDesk generator, 325–326 tweaking versus, 264 Dynamic Drive, downloading for, 295–296 XML fi les versus page code, 279

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 349349 99/26/13/26/13 22:55:55 PMPM 350 CSS3 For Dummies

layouts, creating, 158–160 • D • layouts, modifying, 160–163 data-menucolors attribute, 306 main page screenshot, 238 data-showmenu attribute, 306 menu creation, horizontal, 168–170 data-splitmenu attribute, 306 menu creation, split-button, 304–307 date & time scripts, 292 modifying, CSS versus JavaScript, 297 DateEntry control, 128 online resources, 155–157, 167, 170, 174 Datepicker widget, 132 overview, 155–156, 291 debuggers, 14 restrictions on use, 256 deprecated attributes, 62–63 Ribbon Rules Generator, 253–254 Design Shack website, 340–341 sample script listing, 256 developer keys, 186–187 scripts, categories of, 292–295 dialog( ) method, 130 scripts, downloading, 295–296 dialog box widgets scripts, modifying, 291 example, 129–130 scripts, verifying origins, 291–292 HTML5 versus JavaScript, 129 jQuery UI, creating with, 129 • E • disabilities. See special needs :disabled state selector, 38 each( ) method, 281

tag, 65 easing techniques #DocOutline style, 100 advanced easing, 149–151 Document Object Model (DOM), 86 animations, using, 148 document outlines online resources, 149 creating, 97–100 overview, 148–149, 237–238 HTML5, creating with, 101 Easings website, 318–319 Dojo (Google CDN library) easOutBounce method, 151 Flash, issues with, 182 editors. See text editors jQuery versus, 180 Electronic Frontier Foundation (EFF), 164 overview, 177, 179 elements. See tags special effects included, 180 elevation aural property, 58 dollar signs ($), 118 tag, 163 DOM (Document Object Model), 86 Embedded OpenType (.EOT), 50 draggable( ) method, 137–138 :empty state selector, 38 droppable( ) method ems, 20 events supported, 139–140 :enabled state selector, 38 overview, 138–139 EOT (Embedded OpenType), 50 Dynamic Drive epilepsy precautions, 51–52 advantages of, 237 Eric Meyer’s CSS Reset website, 339 Animated Gif, 243–245 event selectors Button Maker Online, 249–251 :focus, 37 CSS fi les, downloading, 295–296 :hover, 37 FavIcon Generator, 241–243 example, 36–38 Gradient Image Maker, 246–248 overview, 36 graphic special effects, 171–172 event trapping, 23 Image Optimizer, 239–241 Ext Core (Google CDN library), 177, 181

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 350350 99/26/13/26/13 22:55:55 PMPM Index 351

external style sheets font-family attribute example, 24–28 classifi cations, defi ning, 46 inheritance rules, 86–87 description, 49 internal style sheets versus, 90 multiple-entry order, 16 tags, connecting with, 87 overview, 15 tags, using, 18 fonts. See also web safe fonts location of, 15 CSS properties, 46 overview, 17, 87 custom stacks, creating, 333 resets, 338–339 fallback technique, 48, 333 themes codes, adding, 222 families, defi ning, 46 Eyedropper (ColorZilla) online resources, 46, 49 browser, choosing from, 204 serif and sans-serif, 48 color samples, obtaining, 200 sizing techniques, 46–47 color values, accessing with, 203 style keywords, 47 linked images, problems with, 204 variant keywords, 47 menus, using, 197 WebFont Loader, accessing with, 185 mouse interaction with images, 204 weight, defi ning, 47 overview, 203–204 .WOFF fonts, 49–51 font-size attribute, 16 • F • font-size property overview, 15 FavIcon Generator sizing techniques, 46–47 favorites icons, creating, 241–243 font-stretch property, 50 output fi le choices, 243 font-style property overview, 241 browser considerations, 47 source fi les, 241 keywords, 50 favorites icons warning about, 163 branding with, 242–243 font-variant property, 47 browsers, recognition by, 243 font-weight property FavIcon Generator, creating with, 241–243 overview, 47, 50 FFFFALLBACK website, 333 warning about, 163 #FillMe style, 139 #footer style, 163 find( ) method, 281 footnotes, 20 Firebug, 197 foregrounds. See also graphics :first-child pattern selector, 34 borders, creating, 65–66 :first-letter pattern selector, 34 image fi le, creating, 62–63 :first-line pattern selector, 34 images, centering, 66–67 :first-of-type pattern selector, 34 forms Flash Dynamic Drive, creating with, 172–173 Dojo issues, 182 online resources, 172 MooTools support, 182 overview, 172 float property, 65 scripts for, 293 @font-face style split button menus, using with, 304 overview, 49 frame layouts, 167–168 properties (optional and required), 49–51 #framecontent style, 167 :focus selector, 37

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 351351 99/26/13/26/13 22:55:55 PMPM 352 CSS3 For Dummies

frameworks, 180, 343 Google CDN (Content Distribution Free CSS Templates website, 341–342 Network). See also individual libraries by name • G • advantages of, 175 libraries, linking to, 177 galleries, 293 libraries included, 177 generators libraries, paid versus free, 178 Animated Gif, 243–245 online resources, 177 Button Maker Online, 249–253 permissions needed, 178 ColorZilla overview, 193–194 reliability, increasing with, 176 CSS Layout Generator, 336–337 security, enhancing with, 177 CSSDesk, 325–326 GPL fi les, 201 defi nition, 323 gps programming, 10, 45 FavIcon Generator, 241–243 gradient generators FFFFALLBACK, 333 CSS3 Gradient Generator, 72 Gradient Image Maker, 246–248 Ultimate Gradient Generator, 193, Image Optimizer, 239–241 208–213 Initializr, 327–328 Gradient Image Maker LayerStyles, 332 advantages of, 246, 248 Liffect, 330–331 output fi le choices, 247 Modernizr, 329 overview, 246–247 modifying output of, 259 using background property, 247–248 Ribbon Rules Generator, 253–256 gradients. See also Ultimate Gradient Selectivizr, 329–330 Generator Stylie, 323–325 creating, 70–71 ThemeRoller overview, 215–217 CSS3 Gradient Generator, 72 tweaking output of, 259–260 defi nition, 194 Ultimate Gradient Generator overview, Gradient Image Maker, 246–248 208–209 online resources, 73–75 yepnope.js, 326–327 overview, 70, 207–208 get( ) method, 281 saving, 211–212 GIF (Graphics Exchange Format) fi les, 240 transparent color, using, 211 Google accounts graphics. See also backgrounds; special advantages of, 185 effects; transforms multiple accounts, using, 186 animations, adding with animate( ) setting up, 185–186 method, 145–146 Google API animations, creating, 243–245 APIs, accessing multiple, 176–177 attr( ) method, using, 106–108 components of, 176 border-image-generator, 83 paid versus free, 178 borders, creating, 65–66 Google APIs Explorer borders, repetitive, 81–84 APIs, fi nding and accessing, 185 button downloads, 174 APIs, working with, 187–189 captions, adding, 68–69 developer key, free versus paid, 186–187 containers, using with, 65–66 Google account, setting up, 185–186 cropping versus resizing, 239 overview, 185 CSS gradients, converting to, 212–213 Terms link, viewing, 189 CSS3 Gradient Generator, 72

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 352352 99/26/13/26/13 22:55:55 PMPM Index 353

Dynamic Drive, creating with, href attribute 171–172, 237 fi nding CSS code with, 260 fi le conversion alternatives, 240–241 matching fi lenames in, 18 icon downloads, 174 HSL (Hue Saturation Lightness) color image fi les, creating, 63–64 method, 56, 199 Image Optimizer, using, 239–241 hsl( ) method, 56, 199 images, centering, 66–67 HSLA (Hue Saturation Lightness Alpha) tag, 61 color method, 57 incremental displays, 237 hsla( ) method, 57 interactive, creating, 282–286 HTML fi les, modifying with CSS, 298–300 lossy fi le format, defi nition, 240 html style, 91–92 master/detail view, 283 tag, 91–92 menus, using with, 308 HTML5 online resources, 62, 72–75, 83 date and time support, 128 optimizing downloads, 237, 239–241 document outlines, creating, 101 overview, 61–62, 170 text, creating, 14–15 patterns, advantages of CSS3, 74 HTML5 Programming with JavaScript patterns, obtaining, 73 For Dummies (Mueller), 116 permissions, 178, 293 HTML5 Reset Stylesheet website, 339 ribbon rules, defi nition, 253 Hue Saturation Lightness Alpha (HSLA) screenshots, 173 color method, 57 text alternatives, providing, 237–238 Hue Saturation Lightness (HSL) color Ultimate Gradient Generator, 193, method, 56, 199 208–211 hyphens (-), 32 unicode characters, 307–308 value of, 105 • I • warning about using, 237–238 Graphics Exchange Format (.GIF) ICO format, 241–243 fi les, 240 icons greater-than sign (>), 24 color sampling, 200 droppable interfaces, using with, 138 • H • Dynamic Drive, downloading from, 169–170

tag Eyedropper, use within, 204 inheritance rules, 90 favorites icons, creating, 241–243 selecting as object, 21 jQuery, customizing, 274–275 hanging-punctuation property, 52 jQuery, downloading from, 144 hashtags (#) online resources, 272 color attribute, using with, 15 resizing, 174 hexadecimal color values, using with, 253 ThemeRoller, viewing in, 275 tag, 281 id (tag identifi er) attribute, 28 height property, 63 #id selector, 28 hexadecimal color values, 31, 57 IDE (Integrated Development hiding, 278 Environment), 321. See also Komodo HINT.css, 321 Edit :hover selector, 37

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 353353 99/26/13/26/13 22:55:55 PMPM 354 CSS3 For Dummies

IETF (Internet Engineering Task Force), 8 online resources, 62, 72–75, 83 if statements, 300–301 optimizing downloads, 237, 239–241 IFrames (Inline Frames), 293 overview, 61–62, 170 Image Optimizer patterns, advantages of CSS3, 74 cropping versus resizing, 239 patterns, obtaining, 73 fi le conversion alternatives, 240–241 permissions, 178, 293 images, uploading, 239 ribbon rules, defi nition, 253 main page screenshot, 239 screenshots, 173 overview, 239 text alternatives, providing, 237–238 #ImageContainer height property, 68 Ultimate Gradient Generator, 193, 208–211 #ImageContainer style, 83 unicode characters, 307–308 images. See also special effects; transforms value of, 105 animations, adding with animate( ) warning about using, 237–238 method, 145–146 tag animations, creating, 243–245 attribute listing, 62–63 attr( ) method, using, 106–108 deprecations, 62–63 background, adding, 21 graphics, using with, 61 background, multiple, 77–78 impairments. See special needs background, positioning, 78–79 incremental displays, 237 background, resizing, 80–81 index.html fi le, viewing, 230 background, single, 75–76 indexOf( ) method, 142 border-image-generator, 83 inheritance rules borders, creating, 65–66 example, 87–92 borders, repetitive, 81–84 overview, 86–87 button downloads, 174 Initializr website, 327–328 captions, adding, 68–69 Inline Frames (IFrames), 293 containers, using with, 65–66 inline style cropping versus resizing, 239 inheritance rules, 88 CSS gradients, converting to, 212–213 jQuery changes, 122 CSS3 Gradient Generator, 72 overview, 86 Dynamic Drive, creating with, tag, 287 171–172, 237 Integrated Development Environment fi le conversion alternatives, 240–241 (IDE), 321. See also Komodo Edit icon downloads, 174 interactive documents, 38 image fi les, creating, 63–64 interfaces. See user-friendly interfaces Image Optimizer, using, 239–241 internal styles images, centering, 66–67 defi nition, 15 tag, 61 external style sheets versus, 90 incremental displays, 237 inheritance rules, 88–90 interactive, creating, 282–286 overriding with external .CSS fi le, 229 lossy fi le format, defi nition, 240 overview, 86 master/detail view, 283 Internet Engineering Task Force (IETF), 8 menus, using with, 308 ismap property, 63

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 354354 99/26/13/26/13 22:55:55 PMPM Index 355

jQuery modifi cations • J • consequences, unforseen, 274–275 JavaScript CSS classes and styles, 272–273 alert( ) method versus Dialog CSS fi les, individual versus jqueri. widget, 129 ui.css, 274 code, locating and viewing, 261 external style sheets versus main CSS versus, 97, 99 code, 276 Dynamic Drive, 237 icons, customizing, 274–275 Dynamic Drive scripts, modifying in, JavaScript, using with, 270 300–303 layouts, styles for, 271 images, centering, 66 online resources, 270 images, locating, 62 overview, 269–270 jQuery modifi cations, 270 plug-ins, using for, 275–276 libraries, 115, 316–317 reasonable, defi nition of, 274–275 navigator.userAgent object, 118 resources, matching, 275 online resources, 116, 155–156, 263–264 styles, documentation, 270–271 plug-ins, creating custom, 289 styles, overriding, 270 tables, generating, 122 ThemeRoller, using for, 271 transforms, combining with, 107 themes, styles for, 271–272 Jaws (screen reader), 58 jQuery Plug-ins JPG (Joint Photographic Experts Group), creating custom, 289 239–240 downloading, 151–153, 288 jqueri.ui.css jQuery UI. See also special effects; user- classes, overview of, 271–274 friendly interfaces; widgets CSS fi les included, 274 compatability issues, 182 jQuery. See also ThemeRoller date and time support versus HTML5, 128 AJAX versus browser detection, 119 description, 115 AngularJS, combining with, 179 Google CDN, accessing with, 181 browser detection, 12, 118 Google CDN, included in, 177 description, 115 layouts, creating, 152–154 dollar sign symbol use, 118 online resources, 151–153 Google CDN, accessing with, 181 overview, 124–125, 137, 269 Google CDN, included in, 177 plug-ins, creating custom, 289 Migrate library, 118 plug-ins, downloading, 151–153, 288 online resources, 116, 119–120, 125, 164 styles, documentation, 270–271 overview, 115–116, 269 themes, creating custom, 222–226 plug-ins, creating custom, 289 themes, documenting, 233 plug-ins downloading, 151–153, 288 themes, downloading custom, 228–229 selection example, 121 themes, downloading predefi ned, selectors, commonly used, 120 227–228 styles, documentation, 270–271 themes, using predefi ned, 218–222 tags, changing CSS in, 121–123 Unheap website, 288 themes, documenting, 233 user-friendly applications, creating, 137 Unheap website, 288 versions, accessing, 273 versions, accessing, 273 versions, issues with, 182

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 355355 99/26/13/26/13 22:55:55 PMPM 356 CSS3 For Dummies

jQuery UI modifi cations overview, 156, 335–336 interactive graphics, CSS style code, properties, learning, 336 283–286 standardizing, efforts at, 339 interactive graphics, HTML code, 283–285 templates, professional, 341–342 interactive graphics, jQueri UI code, 286 tutorials, 338 interactive graphics, usefulness, 282–283 Learn CSS Layout tutorial, 338 overview, 269 “Learn JavaScript in 30 Minutes” video, 116 widgets, customizing, 270, 279–282 left property, 78 XML fi les, using with, 279–282 #leftcolumn style, 162–163, 166 JSter website, 316–317

tag, 96 JSView, 261 libraries. See also Dynamic Drive; jQuery; jQuery UI; ThemeRoller • K • AngularJS, 178–179 Animatable, 317–318 Komodo Edit Animate.css, 313–315 advantages of, 14, 331 animations library, 317–318 free versus paid versions, 331 CSSDB.co, locating with, 315–316 YUI, using with, 321 Dojo, 179–180 Easings, 318–319 Ext Core, 177, 181 • L • frameworks versus, 180 :lang selector, 29 Google API, 175–178 large value, 15 Google APIs Explorer, locating with, :last of-type pattern selector, 34 185–189 :last-child, 23 HINT.css, 321 layers images, centering, 66 CSS, creating with, 69–70 JavaScript, 115, 316–317 designing visually, 332 jQuery Plug-ins, 151–153 LayerStyles website, 332 jQuery UI, 124–125 layout( ) method, 154 JSter, locating with, 316–317 layouts modifying output of, 259 basic box model, 40–43 MooTools, 182–183 columns, multiple, 108–111 multiple, advantages and disadvantages, Design Shack, fi nding with, 340–341 189–190 dummy-text generator, 110 paid versus free, 178 Dynamic Drive, creating with, 155–156, Prototype, 183 158–160 script.aculo.us, 184 Dynamic Drive, modifying with, 160–163 SWFObject, 184 Dynamic Drive, three-column, 163–167 third-party solutions, 11, 115–116, Dynamic Drive, two-column, 157–158 259–260 fi xed versus liquid, 156 Web Font Loader, 185 frame layouts, 167–168 Yahoo User Interface, 320–321 jQuery UI, creating with, 152–154 Liffect website, 330–331 mobile-friendly, creating, 339 linear gradient( ) method, 70–73 online resources, 156–157, 167, 336, line-through value, 31 338–344 :link state selector, 38

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 356356 99/26/13/26/13 22:55:55 PMPM Index 357

tag menus href attribute, 18 document outlines, adding, 97–101 rel attribute, 18 Dynamic Drive scripts, 294 style sheets, connecting, 87 graphics, using with, 308 links horizontal, creating, 168–170 Color Analyzer (ColorZilla), to .CSS icon downloads, 170 fi les, 206 importance of, 304 columns, using with, 157–158, 161–163 overview, 168 Dynamic Drive scripts, 293 shortcut techniques, 93–97 external style sheets, associating, 87 single level versus drop down, 170–171 fi nding, 261–262 special effects, 309 Google CDN libraries, 177 split button, creating, 304–307 HTML to CSS, 65, 90 split button, uses for, 304 icons, providing, 169 vertical, creating, 170–171 jQuery, providing for, 116, 118, 120–121 methods. See individual methods by name menus, using with, 170 micro buttons, 249 modifying all to match, 234–235 minHeight property, 140 navigational, 99–101 minWidth property, 140 Palette Browser (ColorZilla), to web #MicroTest style, 252 sharing services, 202–203 mobile device support permalink color options, 207 frame layouts, using, 167 problems with, 175–176 jQuery library, 116 state selectors, using with, 23, 38–39 layouts, creating, 339 lists, animating, 330–331 Skeleton website, 322 tag, 96 Modernizr website, 329 Lorem ipsum site, 110 modifi cations lossy fi le formats, 240 breaking changes, issues with, 269, 274–275 • M • common adjustments, 265 community resources, using, 259–260, 268 #maincontainer style, 162 CSS code, fi nding, 260–261 #MainMenu style, 96 CSS code, viewing, 262–264, 273 margin-bottom property, 78 CSS fi les, 298–300 margin-left property, 78, 163 CSS versus JavaScript, 297 margin-right property, 78 developer solutions, advantages of, margin-top property, 78 266–267 tag, 163 external style sheets versus main Mashable website, 340 code, 276 “Master the New CSS Layout Properties” JavaScript, 300–303 article, 336 jQuery, CSS classes and styles, 272–273 master/detail view, 283 jQuery, customizing icons, 274–275 matrix( ) transform, 102 jQuery, individual CSS fi les versus MaxTime( ) method, 132 jqueri.ui.css, 274 measurements jQuery, layout styles, 271 absolute versus relative, 19–20 jQuery, overriding styles ems, advantages of using, 20 jQuery, overview, 269–270 inherited default sizes, 20 jQuery, style documentation, 270–271

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 357357 99/26/13/26/13 22:55:55 PMPM 358 CSS3 For Dummies

modifi cations (continued) online resources, 96, 101 jQuery, theme styles, 271–272 overview, 93 jQuery, unforseen consequences, 274–275 navigator.userAgent jQuery, using ThemeRoller for, 271 browser detection, 118 jQuery, using with JavaScript, 270 reliability issues, 329 menus, CSS-based, 307 960 Grid System website, 339 online resources, 260–264, 266, 270 Normalize.css website, 321–322, 339 overview, 259–260, 264–265 :not selector, 25 plug-ins, using for, 275–276 Noupe website, 340 reasonable, defi nition of, 274–275 :nth of-type( ) pattern selector, 34 resources, matching, 275 :nth-child( ) pattern selector rewriting versus, 260 defi nition, 34 third-party products, 265–266 input choices, 36 tweaking versus, 264 :nth-last of-type( ) pattern XML fi les versus page code, 279 selector, 34 modules :nth-last-child( ) pattern selector, 34 Animations, 13 Backgrounds and Borders, Level 3, 13 • O • Basic Box Model, 12 Basic User Interface, Level 3, 13 onclick attribute, 252 Color, Level 3, 13 online resources. See also generators; defi nition, 10 websites Fonts, Level 3, 12 AJAX detection, 119 Marquee, 13 animated GIFs, 243 Multi-column Layout, 13 animations, 107, 181, 243, 313–314, online resources, 12–13 317–320 overview, 12–13 attr( ) method demo, 106 Selectors, Level 3, 12 best practices, 344 Speech, 13 border-image-generator, 83 Text, Level 3, 13 browser compatibility, 11, 179, 321–322 Transforms, 13 browser detection, 117–118, 182, 329 Values and Units, Level 3, 12 browser user agent strings, 120 monitor calibration, 198 buttons, 174 monospace fonts, 48–49 BYOD information, 10 MooTools (Google CDN library), 177, 182 code, viewing, 263–264 Morf.js website, 319–320 color names, 31, 57, 199 morphing, 319–320 colorblindness, 55, 194 mouseover effect colors, 193, 199, 202–203 Dynamic Drive scripts for, 293 companion to book, 4 event selectors, using for, 23 CSS3 standards, 8 example, 36–38 deprecated attributes, 63 format toggling, 124 document outlines, 101 dummy-text generator, 110 • N • easing techniques, 149 editors, 331 navigation techniques epilepsy precautions, 51–52 document outlines, adding to menus, fonts, 46, 333 97–101 forms, 172–173 menu system, 93–97 frame layouts, 167

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 358358 99/26/13/26/13 22:55:55 PMPM Index 359

frameworks, 343 padding property, 65 gradient generator, 72 Palette Browser (ColorZilla) gradient patterns, 73–75 browser links, 202–203 graphics, buttons, 174 color choices, linking to, 202 graphics, icons, 144, 170, 174 color choices, organizing options, 201 graphics patterns, 73 display options, 202 hexadecimal color values, 57 GPL fi le editing, 201 icons, 144, 173–174, 272 Hues and Brightness list, 201 JavaScript image access, 62 overview, 200 JavaScript libraries, 237, 316 palettes, download links, 203 JavaScript tutorials, 116 palettes, saving custom, 207 jQuery, CSS modifi cations for, 125 sharing, links for, 202–203, 207 layers, 332 thumbnails versus list display, 202 layouts, 156–157, 336, 338–344 pattern selectors. See also individual libraries, 155–157, 177, 180, 315–316 selectors by name lists, 330–331 attribute selectors, combining with, 34 menu systems, 96 example, 35–36 mobile device support, 322 overview, 23, 33 modifying and tweaking, 260–264, 266 patterns module listing, 10, 12–13 advantages of CSS3, 74 monitor calibration, 198 backgrounds, creating, 71 optimizing applications, 329 CSS3 Gradient Generator, 72 plug-ins, 151–153, 164, 217, 287–289 online resources, 71–75 resets, 338–339 pause-after aural property, 58 screen reader, 58 pause-before aural property, 59 script.aculo.us, 184 permalink, 202, 207 selectors, 23, 329–330 permissions source code for book, 3 Dynamic Drive, 256 special characters, 36 Google APIs Explorer, 189 special effects, 182 images, Dynamic Drive, 293 SWFObject, 184 third-party libraries, 178 templates, 327 pitch aural property, 59 tooltips, 321 pitch-range aural property, 59 transforms, 102–103 play-during aural property, 59 web safe resources, 49, 56 plug-ins WebFont Loader, 185 browser issues, 193 widgets, 266–268, 278 Chrome Frame, 179 :only of-type pattern selector, 34 colorblindness resources, 194 :only-child pattern selector, 34 ColorZilla, 194–197 OTF (OpenType Font), 50 custom, creating, 289 overflow property, 167 defi nition, 190 overlays, 226 HTML5 outline viewers, 101 jQuery layouts, 164 • P • jQuery plug-in libraries, 217 jQuery themes, 215–217

tag jQuery transforms, 151–153 defi nition, 15 modifying with, 276 inheritance rules, 88–90 MooTools, 182 selecting as object, 21 online resources, 287–289

226_9781118441428-bindex.indd6_9781118441428-bindex.indd 359359 99/26/13/26/13 22:55:55 PMPM 360 CSS3 For Dummies

plus signs (+), 24 Ribbon Rules Generator, 253–254 PNG (Portable Network Graphics) fi les, 240 ribbons, generating, 253–254 progressbar( ) method, 132 richness aural property, 59 Progressbar widget right property, 78 example, 131–132 rightarrow:after style, 308 overview, 131 #rightcolumn style, 163, 166 prompt( ) method, 129 :root selector, 24 Prototype (Google CDN library) rotate( ) transform, 102–103 overview, 177, 183 RSS (Really Simple Syndication) feeds script.aculo.us, adding graphics with, 190 display scripts for, 295 script.aculo.us, matching versions icon for, 170 with, 184 pseudo-columns, 100 • S • punctuation-trim property, 52–53 sans-serif fonts, 48 • Q • Scalable Vector Graphics (SVG), 50 scale( ) transform, 102 quotes (“), 16 scope feature, 227, 229 screenshots, 173 • R • script.aculo.us (Google CDN library) Google CDN, accessing with, 177 Really Simple Syndication (RSS) feeds Prototype, matching versions with, 184 display scripts for, 295