Edwin Diaz is a software and web technologies engineer, a life coach trainer who is also a serial entrepreneur with multiple online businesses, ranging from online jewelry shops, affiliate websites, application development and consultations services, personal online schools, etc. With over one million students, and clients growing by the thousands a day, Mr. Diaz lets the numbers speak for. 50 Excellent CSS3 Techniques and Tutorials for Beautiful Design. Coding Andrian Valeanu. June 10, 2015. 18 minutes READ CSS3 has got a huge potential to create very elaborate and complicated details by strictly using CSS and no images. It can carry out a lot of functions as it is based on motion techniques.
Web site design has grown up. Unlike the old days, when designers cobbled togetherchunky HTML, bandwidth-hogging graphics, and a prayer to make their sites look good,Cascading Style Sheets (CSS) now - Selection from CSS: The Missing Manual Book. Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as window-dressing to spruce up their site's appearance. You can tap into the - Selection from CSS: The Missing Manual, 2nd Edition Book. Introduction Cascading Style Sheets—CSS for short—give you creative control over the layout and design of your web pages. With CSS, dressing up your site’s text with eye-catching headlines, drop caps, - Selection from CSS: The Missing Manual, 4th Edition Book.
Errata
View Errata for this bookSubmit your own Errata
CSS3: The Missing Manual, Third Edition
By David Sawyer McFarlandMissing CD-ROM
Download all tutorial files here.
The Missing Credits
page VII
- Nancy Reinhardt, proofreader - Nancy Reinhardt's website www.nanreinhardt.com
- Potomac Indexing - Potomac Indexing website http://www.potomacindexing.com
- Nancy A. Guenther, indexer - Nancy A. Guenther's website www.guenther.bizland.com
page VIII
- Daniel J. Quinn, technical reviewer - Daniel J. Quinn's website http://dquinn.net
page X
- Full List of Missing Manuals - Missing Manuals Library www.missingmanuals.com/library
Introduction
Page 3
- HTMLDog- Free Online HTML Tutorials www.htmldog.com/guides/beginner
- W3Schools - Free Online HTML Tutorials www.w3schools.com/html
- Web Standards - Examples of various doctypes www.webstandards.org/learn/reference/templates
page 7
- jEdit - Free text-editing software (Windows, Mac, Linux) http://jedit.org
- TextWrangler - Free text-editing software for Mac www.barebones.com/learn/products/textwrangler
- Notepad++ - Text-editing software for Windows http://notepad-plus.sourceforge.net
- EditPlus - Text editor for Windows www.editplus.com
- skEdit - Web page editor for Mac www.skedit.com
- Coda2 - Web development toolkit for Mac www.panic.com/coda
- Sublime Text - Text editor for Mac www.sublimetext.com
page 8
- Dreamweaver - Visual web page editor www.adobe.com/products/dreamweaver
- Expression Web 2 - Visual web page editor for Windows www.microsoft.com/expression
- CSS3 Transforms - Technical reference for CSS3 transforms www.w3.org/TR/css3-transforms
page 12
- Living Examples - Download all example files used in this book www.sawmac.com/css3
- Feedback Page - Submit your comments or questions www.missingmanuals.com/feedback
- Registration - Register your book www.oreilly.com/register
page 13
Chapter 1 – HTML for CSS
page 20
- HTML Tutorial - HTML tutorial from World Wide Web Consortium www.w3schools.com/html/html_intro.asp
- SitePoint - List of all available HTML tags http://reference.sitepoint.com/html
page 22
- Google Support - Google’s suggestions for search-friendly websites http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35769
page 23
- HTML5 Doctor - Learn about new HTML tags http://html5doctor.com
- HTML5 Intro - Introduction to HTML5 from WWW Consortium www.w3schools.com/html5/html5_intro.asp
page 24
- HTML5 Intro - Flowchart of HTML5 sectioning elements http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
page 27
- CSS Validator - CSS Validator on W3C http://validator.w3.org
- Chris Pederick - CSS validator for Firefox http://chrispederick.com/work/web-developer
- HTML Validator - HTML validator for Firefox http://users.skynet.be/mgueury/Mozilla
- HTML Tidy - HTML validator for Chrome https://chrome.google.com/webstore/detail/gljdonhfjnfdklljmfaabfpjlonflfnm
- Safari Tidy - HTML validation tool (plug-in) for Safari www.zappatic.com/safaritidy
page 29
- Tryit Editor - Example of definition list tags in use www.w3schools.com/tags/tryit.asp?filename=tryhtml_list_definition
page 31
- Quirks Mode - Technical information on Quirks Mode www.quirksmode.org/css/quirksmode.html
- Quirks Mode - Technical information on Quirks Mode https://developer.mozilla.org/en/Mozilla%2527s_Quirks_Mode
page 32
- Stat Counter - Usage statistics by browser http://gs.statcounter.com
- Internet Explorer 6 Countdown - Breakdown of IE 6 usage around the world www.ie6countdown.com
- Google Analytics - Find out about your website's traffic www.google.com/analytics
- Stat Counter - IE 7 and IE 8 usage statistics by browser http://gs.statcounter.com/#browser_version-wwmonthly-201108-201208
- Net Market Share - IE 8 usage statistics http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2&qpcustomd=0
page 34
- Virtual Machines - Test your website in multiple versions of IE www.howtogeek.com/102261/how-to-run-internet-explorer-7-8-and-9-at-the-same-time-using-virtual-machines
- Boot Camp - Use Apple’s Boot Camp software to run Windows on a Macintosh computer www.apple.com/macosx/features/bootcamp.html
- Cross Browser Testing - See what your website looks like in various operating systems and browsers www.crossbrowsertesting.com
- Browser Stack - See what your website looks like in various operating systems and browsers www.browserstack.com
- Browsershots - See what your website looks like in various browsers (Windows and Linux) www.browsershots.com
- NetRenderer - See what your website looks like in various versions of Internet Explorer http://ipinfo.info/netrenderer
- BrowserLab - See what your website looks like in various operating systems and browsers https://browserlab.adobe.com
Chapter 2 – Creating Styles and Style Sheets
page 41
- W3C HTML Validator - See what your website looks like in various operating systems and browsers http://jigsaw.w3.org/css-validator
page 44
- Document- and root-relative links - See what your website looks like in various browsers (Windows and Linux) www.communitymx.com/content/article.cfm?cid=230AD
Chapter 3 – Selectors: Identifying What to Style
page 70
- CSS Browser Compatibility - Find out which browsers support which CSS selectors www.quirksmode.org/css/contents.html
page 72
- Selectoracle - Get definitions of CSS selectors http://gallery.theopalgroup.com/selectoracle
- HTMLTitle Attribute - Get definitions of CSS selectors http://webdesign.about.com/od/htmltags/a/aa101005.htm
Chapter 4 – Saving Time with Style Inheritance
page 108
- Calculating Specificity - Find out how browsers calculate which property applies www.w3.org/TR/css3-selectors/#specificity
page 110
- Chrome CSS Developer Tools - Developer tools for analyzing CSS https://developers.google.com/chrome-developer-tools/docs/elements-styles
- Webdesign Tutorials - Tutorial on faster HTML/CSS workflow with Chrome http://webdesign.tutsplus.com/tutorials/workflow-tutorials/faster-htmlcss-workflow-with-chrome-developer-tools
page 115
- CSS Wizardry - Article on avoiding ID selectors http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class
page 116
- CSS Reset - Eric Meyer’s CSS reset http://meyerweb.com/eric/tools/css/reset
Chapter 6 – Formatting Text
page 130
- Clear Type fonts - Find out how browsers calculate which property applies www.microsoft.com/typography/cleartype
page 134
- League of Movable Type - Get free web fonts www.theleagueofmoveabletype.com
- Exljbris Font Foundry - Get free web fonts www.exljbris.com
page 135
- Fontex - Get free web fonts www.fontex.org
- Open Font Library - Get free web fonts www.openfontlibrary.org
- Font Squirrel - Get font face kits and font type converters www.fontsquirrel.com
- Google Fonts - Get free web fonts www.google.com/webfonts
- NetMarketShare - Article on browser version market share www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=1
- Font Squirrel Generator - Create CSS stylesheets www.fontsquirrel.com/fontface/generator
page 140
- Further Hardening of the Bulletproof Syntax - Article on @font-face syntax www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
- The New Bulletproof Font Face Syntax - Article on @font-face syntax www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
- Bulletproof Font Face Syntax- Article on @font-face syntax http://paulirish.com/2009/bulletproof-font-face-implementation-syntax
- CSS Tricks – Flat Icon Fonts - Article on icon fonts http://css-tricks.com/flat-icons-icon-fonts
- CSS Tricks – HTML for Icon Fonts - Article on HTML for icon font usage http://css-tricks.com/html-for-icon-font-usage
- CSS Tricks – Icon Font Examples - Article on icon font examples http://css-tricks.com/examples/IconFont
page 146
- Stat Counter - IE 8 browser statistics http://gs.statcounter.com/#browser_versionww-monthly-201108-201208
- NetMarketShare - Article on browser market share www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qptimeframe=M
page 147
- Google Fonts - Get free web fonts www.google.com/webfonts
page 149
- Hello Happy - Gallery of Google web fonts http://en.wikipedia.org/wiki/Latin_Extended-A
page 151
- Extended Latin Alphabet - Extra characters in Latin Extended fonts http://hellohappy.org/beautiful-web-type
page 154
- Colour Lovers - Color collections and resources www.colourlovers.com
page 155
- Color Keywords - SVG HTML colors https://developer.mozilla.org/en-US/docs/CSS/color_value
page 156
- RGBA Transparency Browser Support - Creating transparency effect in IE 7 and IE 8 http://css-tricks.com/rgba-browser-support
page 157
- Work with Color - Free HSL color picker www.workwithcolor.com/hsl-color-schemer-01.htm
page 162
- Creative Pro - Article on typographic design www.creativepro.com/story/feature/19877.html
page 167
- Web Expedition - Examples of text shadow property http://webexpedition18.com/articles/css3-text-shadow-property
page 173
- List Styles - Numbering schemes for lists https://developer.mozilla.org/en-US/docs/CSS/list-style-type
page 176
- CSS Juice - List of sites offering free icons and bullets www.cssjuice.com/38-free-icon-checkpoints
page 177
- 456 Berea St. - Article on styling ordered list numbers www.456bereastreet.com/archive/201105/styling_ordered_list_numbers
page 181
- Clagnut - Font sizing strategies http://clagnut.com/blog/348
Chapter 7 – Margins, Padding, and Borders
page 212
- Box Shadows - Gallery of box shadows in different browsers http://thany.nl/apps/boxshadows
page 226
- Color Hexa - Online color converter www.colorhexa.com
page 229
- Vanseo Design - Article on vertically centering elements www.vanseodesign.com/css/vertical-centering
Chapter 8 - Adding Graphics to Web Pages
page 240
- CSS Zen Garden - See the effect of different style sheets on web pages www.csszengarden.com
page 256
- Morgue File - Free stock photos www.morguefile.com
- Stock.xchng - Free stock photos www.sxc.hu
- Open Photo - Free stock photos http://openphoto.net
- Creative Commons - Free stock photos http://search.creativecommons.org
- Flickr - Find Creative Commons–licensed photos on Flickr www.flickr.com/creativecommons
- Picasa Web Albums - Find Creative Commons–licensed photos by Picasa users http://picasaweb.google.com
- Some Random Dude - Free icons www.somerandomdude.com/work/sanscons
- Colour Lovers - Free tiling patterns www.colourlovers.com/patterns
- Pattern4u - Free tiling patterns www.kollermedia.at/pattern4u
- Squidfingers - Free tiling patterns www.squidfingers.com/patterns
- BgPatterns - Online tiling pattern builder www.bgpatterns.com
- Stripe Generator 2.0 - Online tiling pattern builder www.stripegenerator.com
- PatternCooler - Online tiling pattern builder www.patterncooler.com
page 265
- Lea Verou - CSS3 pattern gallery http://lea.verou.me/css3patterns
- Standardista - CSS3 gradient gallery www.standardista.com/css3gradients
- Standardista - CSS3 gradients used to create world flags www.standardista.com/css3gradients/flags.html
page 269
- Ultimate CSS Gradient Generator - Get CSS3 code to create color gradients www.colorzilla.com/gradient-editor
page 286
- CSS3 Files - Examples of using border images http://css3button.net
Chapter 9 – Sprucing Up Your Site’s Navigation
page 302
- CSS3 Button - Online CSS3 button generator www.red-team-design.com/css3-animated-dropdown-menu
- Hello Happy - Examples of CSS3 buttons http://hellohappy.org/css3-buttons
- Web Designer Wall - Examples of CSS3 buttons http://webdesignerwall.com/tutorials/css3-gradient-buttons
page 311
- Line 25 - Learn how to build a CSS drop-down menu http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
- Red Team Design - Learn how to build an animated drop-down menu www.red-team-design.com/css3-animated-dropdown-menu
- Pure CSS Menu - Online CSS menu generator http://purecssmenu.com
- jQuery Navigation Plug-In - jQuery navigation plug-in https://github.com/dansdom/plugins-navigation
page 313
- CSS Max Design - Online list tutorial http://css.maxdesign.com.au/listutorial
- CSS Max Design - List-based navigation designs http://css.maxdesign.com.au/listamatic
- List-O-Matic Wizard - Online tool for creating navigation lists www.accessify.com/tools-and-wizards/developer-tools/list-o-matic
page 314
- Smashing Magazine – CSS Sprites - Resources for CSS Sprites http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-CSS-sprites-techniques-tools-and-tutorials
- SpritePad - Online tool for creating CSS Sprites http://spritepad.wearekiss.com
page 315
- Amazon Images - Example of multiple images in a single image file www.flickr.com/photos/mezzoblue/3217540317
- Veerle’s Blog - Technique for navigation bar http://veerle-v2.duoh.com/blog/comments/the_xhtml_css_template_phase_of_my_new_blog_part_2
Chapter 10 – CSS Transforms, Transitions, and Animations
page 340
- Leonardo DaVinci tribute site - Leonardo DaVinci’s mirror writing www.mos.org/sln/Leonardo/LeonardoRighttoLeft.html
page 343 Backgrounds 1 4 8.
- CSS Transforms - Online tools for visualizing CSS transforms http://westciv.com/tools/transforms/index.html
- CSS Matrixes - Learn how CSS matrixes work http://dev.opera.com/articles/view/understanding-the-css-transformsmatrix
page 345
- Smashing Magazine - 3D Transforms - Introduction to 3D transforms http://coding.smashingmagazine.com/2012/01/06/adventures-in-the-thirddimension-css-3-d-transforms
- IE Blog - 3D Transforms - Introduction to 3D transforms http://blogs.msdn.com/b/ie/archive/2012/02/02/css3-3d-transforms-in-ie10.aspx
- Apple Morphing Power Cubes - Demo using animations, transitions, and 3D transforms www.webkit.org/blog-files/3d-transforms/morphing-cubes.html
- Apple Horizontal 3D Picture Gallery - Demo using animations, transitions, and 3D transforms https://developer.apple.com/safaridemos/showcase/gallery
- Snow Stack - Use left and right arrow keys to navigate photo gallery www.satine.org/research/webkit/snowleopard/snowstack.html 2011 Beer Camp - A technique for navigating pages forward and backward http://2011.beercamp.com
page 346
- Animatable Properties - List of CSS properties to which transitions can be applied www.w3.org/TR/css3-transitions/#animatable-properties
page 349
- Art of the Web - Comparison of CSS Timing Function methods www.the-art-of-the-web.com/css/timing-function
- Matthew Lein - Matthew Lein’s Ceasar tool http://matthewlein.com/ceaser
page 351
- Net Magazine – JavaScript Tutorial - Tutorial on CSS transitions triggered by JavaScript www.netmagazine.com/tutorials/get-more-out-of-your-css-transitions-jquery
Chapter 11 – Formatting Tables and Forms
page 378
- 456 Berea St. – HTML Tables - Details on creating various kinds of tables in HTML www.456bereastreet.com/archive/200410/bring_on_the_tables
Oreilly Css For Designers (complete) Tutorials Free
page 379
- Mozilla – Images, Tables, and Mysterious Gaps - Eliminating unwanted space in a table cell http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
page 388
- HTML Dog – Label Tag - Overview of the HTML
page 389
- Form Pseudo-Classes - HTML5 pseudo-classes for forms http://html5doctor.com/css3-pseudo-classes-and-html5-forms
Chapter 12 – Introducing CSS Layout
page 406
- A List Apart - Example of fixed-width design www.alistapart.com
- ESPN - Example of fixed-width design http://espn.go.com
- New York Times - Example of fixed-width design www.nytimes.com
- Google Maps - Example of a liquid layout http://maps.google.com
page 407
- Boston Globe - Example of responsive, multiple-column design www.bostonglobe.com
page 409
- HTML5 Sectioning Elements - Article on HTML5 sectioning elements www.adobe.com/devnet/dreamweaver/articles/understanding-html5-semantics.html
page 413
- A Book Apart - Mobile First - Article on Mobile First by Luke Wroblewski www.abookapart.com/products/mobile-first
- IE Blog – CSS Grid - Article on CSS Grid in IE 10 http://blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx
- Yahoo Stencil Kit - Tool for creating web-page mock-ups http://developer.yahoo.com/ypatterns/wireframes
Chapter 13 – Building Float-Based Layouts
page 422
- Layout Gala - CSS designs that work in most browsers http://blog.html.it/layoutgala
- Gridinator - Tool for creating multicolumn grid system http://gridinator.com
page 425
- Foundation - Grid-based framework http://foundation.zurb.com/docs/grid.php
- Twitter Bootstrap - Grid-based framework http://twitter.github.com/bootstrap/scaffolding.html#grid
- CSS Tricks - Chris Coyler’s article on creating a simple grid system http://css-tricks.com/dontoverthink-it-grids
page 426
- Complex Spiral – Containing Floats - Article on floated elements www.complexspiral.com/publications/containing-floats
page 430
- Multicolumns - Article on multiple columns www.w3.org/TR/css3-multicol
- Multicolumns - Article on multiple columns http://dev.opera.com/articles/view/css3-multi-column-layout
- Aaron Lumsden - Online tools for creating multiple columns www.aaronlumsden.com/multicol
page 436
- CSS Tricks - Chris Coyler’s article on creating equal height columns http://css-tricks.com/fluid-width-equal-height-columns
- Flexbox - Article on flexbox www.w3.org/TR/css3-flexbox
- Old and New Flexbox - Differences between old and new flexbox methods http://css-tricks.com/old-flexbox-and-new-flexbox
- Complex Grid - Differences between old and new flexbox methods www.w3.org/TR/css3-grid-layout
- Adobe - Information page from Adobe on refining text layout http://html.adobe.com/webstandard
Chapter 14 – Responsive Web Design
page 455
- A Book Apart – Responsive Web Design - Article on RWD by Ethan Marcotte www.alistapart.com/articles/responsive-web-design
- New York Times - Example of fixed-width design www.nytimes.com
page 457
- Opera - Viewport - Article on using the @viewport rule http://dev.opera.com/articles/view/an-introduction-to-metaviewport-and-viewport
- W3C – Viewport - Article on using the @viewport rule http://dev.w3.org/csswg/css-device-adapt
Oreilly Css For Designers (complete) Tutorials Tutorial
page 458
- CSS Tricks – Dynamically changing menu - Creating a dynamically changing drop-down menu http://css-tricks.com/convert-menu-to-dropdown
- Brad Frost – Responsive Navigation - Creating a dynamically changing drop-down menu http://bradfrostweb.com/blog/web/responsive-nav-patterns
- Brad Frost – Complex Navigation Patterns - Creating a dynamically changing drop-down menu http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsivedesign
page 459
- Luke W - Examples of page layouts for different devices www.lukew.com/ff/entry.asp?1514
page 461
- Creating media queries for IE - Download respond.js file for IE http://tinyurl.com/7w49a6z
page 462
- W3C - Media Queries - Examples of page layouts for different devices www.w3.org/TR/css3-mediaqueries
page 470
- Responsive Px - Online tester for responsive designs http://responsivepx.com
- The Responsinator - Online tester for responsive designs www.responsinator.com
- Adobe Edge Inspect tool - Online tester for responsive designs http://html.adobe.com/edge/inspect
page 473
- Responsive Images - Article about images in responsive designs http://picture.responsiveimages.org
- Fluid Images - Article about images in responsive designs www.w3.org/community/respimg
- Adaptive Images - Article about images in responsive designs http://adaptive-images.com
- FitVids - JavaScript program that scales embedded video http://fitvidsjs.com
Chapter 15 – Positioning Elements on a Web Page
page 501
- Menu Cool – Tooltips - Creating pop-up tooltips in CSS www.menucool.com/tooltip/css-tooltip
- aTip2 jQuery Plug-in - Creating pop-up tooltips in CSS http://craigsworks.com/projects/qtip2
- A List Apart – Printing Links - Article on printing links from the Web www.alistapart.com/articles/goingtoprint
Chapter 16 – CSS for the Printed Page
page 529
- Formatting Web Pages for Print - Article on CSS print styles www.w3.org/TR/CSS21/page.html
Chapter 17 – Improving Your CSS Habits
page 543
- LESS – CSS Preprocessor - Software that creates finalized CSS files http://lesscss.org
- SASS – CSS Preprocessor - Software that creates finalized CSS files http://sass-lang.com
- Scout – CSS Preprocessor - Free software that creates finalized CSS files http://mhs.github.com/scout-app
- Compass – CSS Preprocessor - Commercial software that creates finalized CSS files http://compass.handlino.com
page 546
- Wired - Example of comments in CSS style sheets www.wired.com
- Mezzoblue - Example of comments in CSS style sheets www.mezzoblue.com
- Keiki Bulls - Example of comments in CSS style sheets http://keikibulls.com
- Stop Design - Example of comments in CSS style sheets www.stopdesign.com/log/2005/05/03/css-tip-flags.html
page 547
- Content with Style - Article on Modular CSS design www.contentwithstyle.co.uk/content/modular-css
page 549
- HTML5 Shiv - Article HTML5 Shiv http://code.google.com/p/html5shiv
page 550
- Keith Baker’s site - PHP method for controlling cache http://ikeif.net/2009/03/27/stop-caching-files-php-function
page 552
- Normalize.css Project - CSS style sheet that helps fix inconsistent browser styles http://nicolasgallagher.com/about-normalize-css
page 558 Applocker 2 2 0 download free.
- Smashing Magazine – Object Oriented CSS - Introduction to Object Oriented CSS http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss
- GitHub – OOCSS Project - Object Oriented CSS Project on GitHub https://github.com/stubbornella/oocss Scalable and Modular Architecture for CSS - Style guide for creating reusable CSS components http://smacss.com
- SMACSS Video on Adobe TV - Videos about Scalable and Modular Architecture for CSS http://tv.adobe.com/watch/adc-presents/smacss-introduction-to-a-scalable-and-modular-architecture-for-css
page 560
- MSDN – Conditional Comments - Article on conditional comments in IE http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Appendix A – CSS Property Reference
page 563
- Current CSS Specification - Latest CSS specifications from W3C www.w3.org/Style/CSS/current-work
page 564
- RGBA Color in CSS - Latest CSS specifications from W3C www.w3.org/TR/css3-color
page 565
- FicML - Free online color picker www.ficml.org/jemimap/style/color/wheel.html
- Adobe Kuler - Free online color picker http://kuler.adobe.com
page 595
- Complete CSS Guide – Generated Content - Article on generated content www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html
- Generated Content - Article on generated content www.w3.org/TR/CSS21/generate.html
page 596
- URL Cursor Values - Article on URL cursor values property www.quirksmode.org/css/cursor.html
Appendix B – CSS Resources
O'reilly Css For Designers (complete) Tutorials Online
page 599
O'reilly Css For Designers (complete) Tutorials Free
- CSS Current Work - Current CSS specifications and new additions www.w3.org/Style/CSS/current-work
page 600
- Mozilla CSS Reference - Comprehensive CSS reference https//developer.mozilla.org/en-US/docs/CSS/CSS_Reference
- Sitepoint CSS Reference - Comprehensive CSS reference http://reference.sitepoint.com/css
- Can I use… - Comprehensive CSS reference http://caniuse.com
- CSS3 Files - Popular CSS properties www.css3files.com
- CSSCreator Forum - Online CSS discussion forum www.csscreator.com/css-forum
- Sitepoint’s CSS Forum - Online CSS discussion forum www.csscreator.com/css-forum
- CSS Tricks Forum - Online CSS discussion forum http://css-tricks.com/forums
- CSS Tricks - Blog for CSS tips and techniques http://css-tricks.com
page 601
- Sitepoint - Articles and tutorial on CSS techniques http://www.sitepoint.com/forums/forumdisplay.php?53-CSS-amp-Page-Layout
- Smashing Magazine - Online CSS resources www.smashingmagazine.com/tag/css
- NetMagazine - Online CSS tutorials www.netmagazine.com/tag/css?ct=tutorial
- Listutorial - Online tutorials on building lists and navigation with CSS http://css.maxdesign.com.au/listutorial
- Tripwire Magazine - Online menu and navigation CSS tutorials www.tripwiremagazine.com/2012/06/css-menu-and-navigation.html
- Marco Folio - Create a menu like Apple.com using CSS3 www.marcofolio.net/css/the_apple.com_navigation_menu_created_using_only_css3.html
- CSS Navigation Bar Code Generator - Online tool for creating CSS Sprite method code http://lab.mattvarone.com/navbar
- CSS Menu Maker - Selection of CSS navigation bars http://cssmenumaker.com
- CSS Showcase - Gallery of CSS3 navigation techniques www.alvit.de/css-showcase
- Listmatic - Gallery of CSS3 navigation systems http://css.maxdesign.com.au/listamatic
- Listmatic2 - More CSS3 navigation menus and lists http://css.maxdesign.com.au/listamatic2
page 602
- CSS Menu Builder - CSS3 menus and techniques www.cssmenubuilder.com
- Pixels Daily - Responsive CSS navigation menu http://pixelsdaily.com/resources/html-css/responsive-css-navigation-menu
- Red Melon - Interactive CSS box model tool www.redmelon.net/tstme/box_model
- Paul Irish’s FTW Blog - Blog post on CSS box-sizing property http://paulirish.com/2012/box-sizing-border-box-ftw
- PageBlox - Tools for generating CSS-based responsive designs www.pageblox.com
- Page Column - Tools for generating CSS-based column designs www.pagecolumn.com
- Web Design Booth - CSS-based layout generators www.webdesignbooth.com/15-extremelyuseful-css-grid-layout-generator-for-web-designers
- 960 Grid System - CSS framework for complex, multicolumn, and fixed-width layouts http://960.gs
- 960 Grid System - Video on 960 grid system http://nettuts.com/videos/screencasts/a-detailed-look-at-the-960-css-framework
- 960 Grid System - Online tools for 960 grid system http://grids.heroku.com
O'reilly Css For Designers (complete) Tutorials Download
page 603
O'reilly Css For Designers (complete) Tutorials Pdf
- YUI Grids CSS - Yahoo’s CSS layout system http://yuilibrary.com/yui/docs/cssgrids
- Twitter Bootstrap - Website-building toolkit, including HTML, CSS, and JavaScript http://twitter.github.com/bootstrap
- Foundation - Website-building toolkit, including HTML, CSS, and JavaScript http://foundation.zurb.com
- Smashing Magazine – Adaptive CSS Layouts - Resources for flexible layouts www.smashingmagazine.com/2009/06/09/smartfixes-for-fluid-layouts
- TJK Design - Blog post on styling HTML with different CSS style sheets http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
- Clagnut - Variable fixed-width layouts www.clagnut.com/blog/1663
- Incutio – 3 Column Layout - List of 3 column layouts http://css-discuss.incutio.com/?page=ThreeColumnLayouts
- CSS Zen Garden - CSS Showcase site www.csszengarden.com
- CSS Beauty - Gallery of CSS Designs www.cssbeauty.com
- CSS Elite - Gallery of CSS Designs www.csselite.com
- CSS Mania - Gallery of CSS Designs http://cssmania.com
page 604
- CSS Winner - A new winning CSS designs a day www.csswinner.com
- Style Master - Powerful CSS editor (Windows and Mac) www.westciv.com/style_master/product_info
- Dreamweaver - Adobe’s all-in-one web development program (Windows and Mac) www.adobe.com/dreamweaver
- Sublime Text - Code editing program (Windows and Mac) www.sublimetext.com
- Top Style - CSS editing program (Windows only) www.topstyle4.com
- Microsoft Expression Web - CSS editing program (Windows only) www.microsoft.com/expression/products/Web_Overview.aspx
- Espresso - All-in-one web design program (Mac only) www.macrabbit.com/espresso
- Code - All-in-one web design program (Mac only) http://panic.com/coda'>http://panic.com/coda