Plug-In CSS 100 Power Solutions

Plug-In CSS 100 Power Solutions

by Robin Nixon
Released April 2011
Publisher(s): McGraw-Hill
ISBN: 9780071748773

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

100 CSS power solutions in one handy guide

This practical resource contains 100 ready-to-run CSS plug-ins you can use to create dynamic Web content. All of the plug-ins include HTML examples and screen shots showing specific end results you can achieve right away. Methods for using CSS with JavaScript and HTML5 to make Web pages even more interactive and dynamic are also included. Using these plug-ins, you'll be able to build CSS projects more quickly and easily than ever, as many complex tasks are reduced to a single class.

Get ready-made CSS plug-ins for:

  • Manipulating objects
  • Text and typography
  • Menus and navigation
  • Page layout
  • Visual effects
  • Dynamic objects
  • Dynamic text and typography
  • Dynamic interaction
  • Incorporating JavaScript
  • Clickable and RSS buttons
  • Borders
  • Rollover effects
  • Horizontal and vertical animated tabs
  • And much more

Download all of the plug-ins at the book's companion website.

Table of contents

  1. Cover Page
  2. Plug-in CSS 100 POWER SOLUTIONS
  3. Copyright
  4. Dedication
  5. About the Author
  6. Contents
  7. Acknowledgments
  8. Introduction
  9. Part I About CSS and These Plug-ins
    1. 1 How to Use the Plug-ins
      1. Downloading and Installing Web Browsers
      2. Older Versions of Microsoft Internet Explorer
        1. Emulating Internet Explorer 6 and 7
      3. The Companion Web Site
      4. About the Document Object Model
        1. How the DOM Works
      5. About Cascading Style Sheets
        1. Importing a Style Sheet
        2. Local Style Settings
        3. IDs and Classes
      6. CSS and Semicolons
      7. Using the Plug-ins in Your Own Web Sites
        1. Class Name Conflicts
      8. JavaScript-aided Plug-ins
        1. Including JavaScript-aided CSS Alongside Pure CSS
        2. Users Without JavaScript
      9. Summary
    2. 2 CSS Crash Course
      1. CSS Rules
        1. Multiple Assignments
        2. Comments
        3. Style Types
        4. Default Styles
        5. User Styles
        6. External Style Sheets
        7. Internal Styles
        8. Inline Styles
      2. Selectors
        1. Type
        2. Descendant
        3. Child
        4. ID
        5. Class
        6. Attribute
        7. Universal
        8. Grouping
      3. The Cascade
        1. Style Sheet Creators
        2. Style Sheet Methods
        3. Style Sheet Selectors
        4. The !important Tag
      4. The Difference between Divs and Spans
      5. Measurements
      6. Fonts
        1. Font Family
        2. Font Style
        3. Font Size
        4. Font Weight
      7. Text
        1. Decoration
        2. Spacing
        3. Alignment
        4. Transformation
        5. Indenting
      8. Colors
      9. Positioning Elements
      10. Pseudo Classes
      11. Shorthand
      12. The Box Model
        1. Margin
        2. Border
        3. Padding
        4. Content
      13. Summary
  10. Part II The Classes
    1. 3 Manipulating Objects
      1. Plug-in 1: Positioning
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      2. Plug-in 2: Floating
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      3. Plug-in 3: Background Colors
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      4. Plug-in 4: Gradients
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      5. Plug-in 5: Inverse Gradients
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      6. Plug-in 6: Box Shadows
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      7. Plug-in 7: Padding
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      8. Plug-in 8: Rounded Borders
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      9. Plug-in 9: Transparency
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      10. Plug-in 10: Visibility and Display
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      11. Plug-in 11: Scroll Bars
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      12. Plug-in 12: Maximum Sizes
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      13. Plug-in 13: Location
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      14. Plug-in 14: Selective Margins
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      15. Plug-in 15: Selective Padding
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      16. Plug-in 16: Border Style
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      17. Plug-in 17: Border Width
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      18. Plug-in 18: Border Color
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      19. Plug-in 19: No Outline
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
    2. 4 Text and Typography
      1. Plug-in 20: Fonts
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      2. Plug-in 21: Font Styles
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      3. Plug-in 22: Text Alignment
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      4. Plug-in 23: Text Point Size
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      5. Plug-in 24: Text Colors
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      6. Plug-in 25: Text Shadows
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      7. Plug-in 26: Text Transformations
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      8. Plug-in 27: Encapsulation
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      9. Plug-in 28: Google Fonts
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      10. Plug-in 29: Drop Cap
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      11. Plug-in 30: Columns
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      12. Plug-in 31: Text Indent
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      13. Plug-in 32: Symbols
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
    3. 5 Menus and Navigation
      1. Plug-in 33: Buttons
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      2. Plug-in 34: Vertical Menu
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      3. Plug-in 35: Horizontal Menu
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      4. Plug-in 36: Top Dock Bar
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      5. Plug-in 37: Bottom Dock Bar
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      6. Plug-in 38: Tooltip and Tooltip Fade
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
    4. 6 Page Layout
      1. Plug-in 39: Reset CSS
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      2. Plug-in 40: Default CSS
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      3. Plug-in 41: Boxout
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      4. Plug-in 42: Quote
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      5. Plug-in 43: Left Sidebar
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      6. Plug-in 44: Right Sidebar
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      7. Plug-in 45: Page Break
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
    5. 7 Visual Effects
      1. Plug-in 46: Star Rating
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      2. Plug-in 47: Star Rating Using Images
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      3. Plug-in 48: Progress Bar
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      4. Plug-in 49: Scale Up
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      5. Plug-in 50: Scale Down
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      6. Plug-in 51: Transition All
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      7. Plug-in 52: Thumb View
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      8. Plug-in 53: Caption Image
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      9. Plug-in 54: Pointer
        1. Classes and Properties
        2. About the Class
        3. How to Use It
        4. The Class
      10. Plug-in 55: Rotation
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      11. Plug-in 56: Odd and Even Text Colors
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
      12. Plug-in 57: Odd and Even Background Colors
        1. Classes and Properties
        2. About the Classes
        3. How to Use Them
        4. The Classes
  11. Part III The Dynamic Classes
    1. 8 Dynamic Objects
      1. Plug-in 58: NoJS (nojs) and OnlyJS (onlyjs)
        1. Variables, Functions, and Properties
        2. About the Classes
        3. How to Use Them
        4. The JavaScript
      2. Plug-in 59: Middle (middle)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      3. Plug-in 60: Center (center)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      4. Plug-in 61: Top (top)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      5. Plug-in 62: Bottom (bottom)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      6. Plug-in 63: Left (left)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      7. Plug-in 64: Right (right)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      8. Plug-in 65: On Demand (ondemand)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      9. Plug-in 66: Fadein (fadein[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      10. Plug-in 67: Fadeout (fadeout[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      11. Plug-in 68: Resize Textarea (resizeta[n | n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      12. Plug-in 69: Rotate (rotate[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      13. Plug-in 70: Width (w[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      14. Plug-in 71: Height (h[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      15. Plug-in 72: X (x[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      16. Plug-in 73: Y (y[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      17. Plug-in 74: Text Color (color[colorname/#nnnnnn/#nnn])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      18. Plug-in 75: Background Color (bcolor [#nnnnnn])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
    2. 9 Dynamic Text and Typography
      1. Plug-in 76: Typetext (typetext[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      2. Plug-in 77: Digits Only (digitsonly)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      3. Plug-in 78: Text Only (textonly)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      4. Plug-in 79: No Spaces (nospaces)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      5. Plug-in 80: No Punctuation (nopunct)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      6. Plug-in 81: Minimum Whitespace (minwhitespace)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      7. Plug-in 82: Google Font (gfont[n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      8. Plug-in 83: Text Middle (textmiddle)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      9. Plug-in 84: Text Glow (textglow [#nnnnnn | #nnnnnn | n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      10. Plug-in 85: Background Glow (backglow [#nnnnnn | #nnnnnn | n])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
    3. 10 Dynamic Interaction
      1. Plug-in 86: Placeholder (placeholder [prompt])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      2. Plug-in 87: Autofocus (autofocus)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      3. Plug-in 88: Cite (cite[citation])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      4. Plug-in 89: Reference (ref[type | name])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      5. Plug-in 90: No Copy (nocopy)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
    4. 11 Incorporating JavaScript
      1. Plug-in 91: Embed JavaScript (embedjs)
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      2. Plug-in 92: If (if[expr])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
      3. Plug-in 93: If Not (ifnot[expr])
        1. Variables, Functions, and Properties
        2. About the Class
        3. How to Use It
        4. The JavaScript
    5. 12 Superclasses
      1. What Is a Superclass?
      2. Plug-in 94: Clickable (clickable)
        1. Classes
        2. About the Superclass
        3. How to Use It
      3. Plug-in 95: RSS Button (rssbutton)
        1. Classes
        2. About the Superclass
        3. How to Use It
      4. Plug-in 96: Border (border)
        1. Classes
        2. About the Superclass
        3. How to Use It
      5. Plug-in 97: Absolute Top Left (abstopleft)
        1. Classes
        2. About the Superclass
        3. How to Use It
      6. Plug-in 98: Rollover (rollover)
        1. Classes
        2. About the Superclasses
        3. How to Use Them
      7. Plug-in 99: Vertical Tab (vtab)
        1. Classes
        2. About the Superclass
        3. How to Use It
      8. Plug-in 100: Horizontal Tab (htab)
        1. Classes
        2. About the Superclass
        3. How to Use It
  12. Index

Product information

  • Title: Plug-In CSS 100 Power Solutions
  • Author(s): Robin Nixon
  • Release date: April 2011
  • Publisher(s): McGraw-Hill
  • ISBN: 9780071748773