links - howtos

Collections

• 40 essential CSS templates, resources and downloads http://speckyboy.com/2010/11/08/40-essential-css-templates-resources-and-downloads/ Code and how-tos for forms, rounded corners, lists, pagination, etc; Tools for making CSS; Page templates; Tools for cross-browser compatibility. Paul Andrew - SpeckyBoy : November 2010
• 50 useful coding techniques (CSS layouts, visual effects and forms) http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for- layouts-forms-and-visual-effects/ "An overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design." Smashing : February 2010
• CSS3 demos and tools http://www.designer-daily.com/css3-demos-and-tools-8278 Some cool visual designs with CSS3, and useful tools like PIE and Modernizr to make your CSS work better. Mirko - Designer Daily : July 2010
• HTML5/CSS3 Cheatsheet   http://www.storiesinflight.com/html5/ Very useful! Summary of tags and properties - code and examples Stories in Flight : September 2010

column layouts

• Equal height columns with cross-browser CSS   http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks "This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers." Matthew James Taylor : October 2008
• Perfect multi-column CSS liquid layouts. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts Code for website layouts, using percentage widths and relative positioning. They work with all the common web browsers including Safari on the iPhone and iPod touch." Matthew James Taylor : October 2007
• Rock Solid CSS Layout   http://www.sitepoint.com/article/rock-solid-css-layouts "Start with the creation of a simple two-column layout. Along the way, we'll discover how to use absolute and relative positioning, and see how margins, padding, and borders work together. Then, we'll get an understanding of how all these tools can be used together in practice by creating a two-column layout that uses many of the techniques we have discussed already in this book." (A chapter excerpted from SitePoint's HTML Utopia: Designing Without Tables Using CSS, Second Edition.) Dan Shafer and Rachel Andrew : April 2006
• Tables are for data: the problems with tables for layout http://www.hotdesign.com/seybold/ "The use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout." A presentation at a Seybold conference. Merikallio and Pratt : 2006

conditional comments

• Conditional comments   http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp "One of the most common operations performed in a Web page is to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser is compatible and renders correctly. The browser type can be detected using many different techniques. Most methods of browser detection make use of either server- or client-side script, and each have advantages and disadvantages. This article focuses on conditional comments, which offer an alternative to scripted browser detection. Conditional comments offer certain advantages over scripted browser detection techniques and are also easier to use." MicroSoft : 2006
• Swearing Off Hacks with Conditional Comments   http://geek.focalcurve.com/archive/2005/09/swearing-off-hacks/ "conditional comments were a proprietary feature introduced in IE5 for Windows — which has thus far not been adopted by any other browser — allowing developers to easily delineate segments of HTML to be delivered only to certain browsers." So can also be used to deliver MSIE-only stylesheets. Focal Curve : 2006

expressions

• CSS with expressions   http://www.sitepoint.com/forums/showthread.php?p=1333597 Using css with javascript. width:expression(document.body.clientWidth < 600? "8em": "auto" ); SitePoint forum : 2004

forms

• Fancy Form Design Using CSS http://www.sitepoint.com/article/fancy-form-design-css "Form elements are derived from native operating system widgets, which makes them particularly difficult to style. Forms are often critical to the function of a web site ..." How to use label and fieldset and why. Has some answers to general float problems. Read online, download print version, or download full article as PDF Cameron Adams at SitePoint : May 2007
• Prettier Accessible Forms   http://www.alistapart.com/articles/prettyaccessibleforms Making forms without tables, with css - portable, accessible. Nick Rigby : 20 June 2006

media-queries

• Less Framework 2   http://lessframework.com/ (This is *not* LESS the CSS extender.) Yet another CSS framework. "A CSS framework for cross-device layouts." Uses inline CSS3 media-queries to switch between three layouts. Useful to see how the code is done; can set options and see code change. Less Framework : September 2010
• Responsive Web Design   http://www.alistapart.com/articles/responsive-web-design/ A bit long and rambling, but good once he gets to the point! How to use CSS media-queries to change your design for iPods, phones, etc.. Ethan Marcotte - A List Apart : May 2010

menus and tabs

• Center-Position Horizontal Unordered Lists http://www.webreference.com/programming/css_lists/2.html Explains how the ul tag works, with demo code; uses display: table for the ul tag; uses the * html hack for MeSsIE. Stu Nichols : 2007?
• Centering a float menu   http://www.cssplay.co.uk/menus/centered.html "center a floated left menu when the width of the items in the menu is not known ..." Stu Nichols : 2007
• List Tutorial   http://css.maxdesign.com.au/listutorial/ "takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists." Max Design : 2007?
• Nifty Navigation Tricks Using CSS - parts 1-4   http://articles.sitepoint.com/article/navigation-using-css Step-by-step from basic pretty navigation to drop-downs, tabs, and images Rachel Andrew, Sitepoint : August 2009
• Taming Lists   http://www.alistapart.com/articles/taminglists/ Excellent and clear explanation of using lists for navigation, breadcrumbs etc. Starts simple and ends with a very pretty sidebar navigation example. Mark Newhouse : 2002

position and floats

• "Photo Cards"   http://wellstyled.com/css-photo-cards.html Making photos with captions or other text, that arrange themselves on the page. Petr Stanicek : 2004
• CodePunk's Advanced CSS http://codepunk.hardwar.org.uk/acss.htm Useful code for CSS div boxes and positioning CodePunk : 2005
• CSS Floats http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm Great code and examples using floats for headers, images, drop caps BigBaer : 2003
• CSS Positioning   http://www.yourhtmlsource.com/stylesheets/csslayout.html Explains position: absolute, position: relative, and centering. Ross Shannon : 2006
• How to Clear Floats http://www.positioniseverything.net/easyclearing.html "When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom ... " A simple fix. Holly and John Bergevin : Jan 2007
• The Float Model Problem http://www.positioniseverything.net/floatmodel.html How float actually works in different browsers. "I am no purist, and could happily live with a specification designed by Microsoft, but to have MS publicly support the specs while silently flouting them really burns my toast." Holly and John Bergevin : Jan 2004

pretties: borders

• Transparent Borders with background-clip http://css-tricks.com/transparent-borders-with-background-clip/ How to make a see-through border. Chris Coyier - CSS Tricks : September 2010

pretties: gradients

• Cross-Browser CSS gradients   http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/ All the codes to make gradients (shading colors) work in all browsers WebDesignerWall : September 2010

pretties: rounded corners

• Easy Rounded Corners with Border-Radius http://www.cssnewbie.com/easy-rounded-corners-with-border-radius/ border-radius, -moz-border-radius, -webkit-border-radius Rob Glazebrook : 2008

pretties: sprites

• Saving bandwidth and improving site speed using CSS sprites   http://sixrevisions.com/css/css-sprites-site-speed/ Good explanation of how to do css sprites (many images in one) on rollovers, and why they are better than using multiple single images. Good comments. Peter Richards - Six Revisions : July 2010
• Spritegen CSS Sprites Generator http://spritegen.com/ Generates one image from your uploaded images, with the CSS code to make it work. Many options. Explains about sprites. Can get source code and use on your own computer. SpriteGen : 2010

pseudo-classes

• A complete guide to CSS pseudo-classes   http://www.suburban-glory.com/blog?page=125 CSS 2.1 and CSS3. Simple description of each, with code. Andy Walpole : June 2010
• Complete guide to CSS pseudo-classes, and more http://scriptandstyle.com/submissions/a-complete-guide-to-css-pseudo-classes Related articles about pseudo-class in CSS 2 and 3. Script and Style : 2010

show/hide: general

• Showing and hiding content with pure CSS3 http://dev.opera.com/articles/view/css3-show-and-hide/ How it works: expanding/collapsing or shown/hidden box, whether this is a tabbed interface, a content "tray" on the side that can be slid out and then put away again, or a complex tree menu with expanding/collapsing sub-menus. Corey Mwamba - Opera : October 2010

show/hide: hover popups (tooltips)

• CSS tooltips with the pseudo element http://jackosborne.co.uk/articles/css-tooltips-with-the-pseudo-element/ Uses span with attr(title). For more simple tooltip. Jack Osborne : 2010
• Four uber-cool CSS techniques for links http://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links Uses span and :hover. Nice. Alen - CSS Globe : 2010
• Hover footnotes http://ignorethecode.net/blog/2010/04/20/footnotes/ Very nice clean-looking footnotes on hover. Lukas Mathis - IgnoreThecode : April 2010
• Popout details on hover w/ CSS http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/ Uses div and z-index. Very fancy popups, with images -- CSS, and only CSS! Full explanation and all code, step-by-step. Sohtanaka : 2010

show/hide: nav menus - dropdowns

• Horizontal menus/submenus: Hybrid CSS Dropdowns http://www.alistapart.com/articles/hybrid/ We're going to create a hybrid menu that runs horizontally across the window. It has two levels of navigation (in our example, main topics and their associated pages). Our menu will allow for dropdown access to all pages in both navigation levels, display the current choices in the selected topic area constantly, keep the user aware of where he is in the site, and be clean and light to boot. Eric Shepherd : March 2005
• How-to: DropDown CSS Menu   http://divitodesign.com/css/how-to-dropdown-css-menu/ Step-by-step basic how-to for making CSS drop-down menu. DivitoDesign : September 2008
• Make a Mega Drop-Down Menu with jQuery http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/ About "mega drop-downs"; how to make a good one with html/css and the javascript library jQuery. Raena Jackson-Armitage : March 2009
• Mega drop-down navigation menus work well http://www.useit.com/alertbox/mega-dropdown-menus.html Explanation of "mega drop-downs", screenshots, discussion. Jakob Nielsen : march 2009
• Search Google - dropdown menus with html and css http://www.google.co.in/search?q=dropdown%20menu%20with%20html%20and%20css lots of interesting-looking pages explaining how to do this Google : 2010

useful bits

• Center Multiple DIVs with CSS http://www.impressivewebs.com/center-multiple-divs/ Center multiple elements evenly spaced in fixed-width area. Uses inline-block. Louis Lazaris - Impressive Webs : 2010
• Multi-Line Indent on a Styled Blockquote http://www.impressivewebs.com/how-to-put-a-multi-line-indent-on-a-styled-blockquote/ Make text look like it's wrapping around the big quote, using extra span as a block. Louis Lazaris - Impressive Webs : 2009

vertical-align

• Getting Vertical With CSS   http://www.mindfly.com/blog/post/2010/07/28/Getting-Vertical-With-CSS.aspx A couple of solutions to the annoying problem that there is no easy way to vertically align things in CSS. Kyle Weems - MindFly : July 2010

More css info on this site