CSS Based Web Design Gallery - Design Resources & Announcements

“Taking Your Talent to the Web” is now free

ColorLover — Tue, 28 Apr 2009 07:31:48 GMT

Rated Five Stars at Amazon.com since the day it was published, “Taking Your Talent to the Web” is now a free downloadable book from zeldman.com

CSS Sticky Footer Layout

ColorLover — Fri, 23 Jan 2009 07:59:28 GMT

This sticky footer solution is working in all major browsers, including Google Chrome!. It works with floated 2-column layouts and we don’t get overlap in resized browser windows unlike older solutions you find when you Google sticky footer. And you don’t need an empty push div.

Designing Web Interfaces: 12 Standard Screen Patterns

ColorLover — Wed, 21 Jan 2009 08:05:24 GMT

Standard Screen Patterns: 12 patterns w/100 examples
Essential Controls: 30 controls for RIA design and development
Components for Commonly Requested Features: 15 patterns and examples
Interaction Principles: 6 principles w/70 patterns

Free download of The Art & Science Of CSS!

ColorLover — Tue, 18 Nov 2008 08:05:46 GMT

For the next 14 days, one of SitePoint’s most popular books is available to download for FREE. Just follow us on Twitter, and you’ll receive a PDF of the top selling “The Art & Science Of CSS.”

BlueTripCSS - Combination of Popular CSS Frameworks

ColorLover — Mon, 10 Nov 2008 07:59:23 GMT

Capsize Designs combines good points of most popular css frameworks: 960.gs, Blueprint, LogiCSS, YAML, Elements, YUI, and Boilerplate

Using jQuery for Background Image Animations

ColorLover — Tue, 23 Sep 2008 09:11:55 GMT

Changing the position of the background image felt to be the best approach to creating the type of effect we’re looking for.

Custom HTML Form Elements

ColorLover — Tue, 01 Jul 2008 09:50:52 GMT

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists.

How to get Cross Browser Compatibility Every Time

ColorLover — Thu, 19 Jun 2008 19:46:09 GMT

Here is a quick summary for those of you who don’t want to read the whole article:
1. Always use strict doctype and standards-compliant HTML/CSS
2. Always use a reset at the start of your css
3. Use opacity:0.99 on text elements to clean up rendering in Safari
4. Never resize images in the CSS or HTML
5. Check font rendering in every browser. Don’t use Lucida
6. Size text as a % in the body, and as em’s throughout
7. All layout divs that are floated should include display:inline and overflow:hidden
8. Containers should have overflow:auto and trigger hasLayout via a width or height
9. Don’t use any fancy CSS3 selectors
10. Don’t use transparent PNG’s unless you have loaded the alpha

IETester

ColorLover — Tue, 03 Jun 2008 07:25:44 GMT

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

Sliding JavaScript Dropdown Menu

ColorLover — Tue, 29 Apr 2008 13:01:52 GMT

This lightweight drop down menu script (~1.8kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc.

Multilevel Drop Down Navigation Menus: Examples and Tutorials

ColorLover — Fri, 18 Apr 2008 06:13:41 GMT

This article presents over 25 (horizontal and vertical) multilevel drop down menu built using Javascript and CSS which you can use in your future projects. Also you will find some useful tutorials at the end of this post where you can use to start building your own multilevel navigation menu.

10 best CSS hacks

ColorLover — Mon, 18 Feb 2008 07:45:59 GMT

list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.
Vertical align div, Min-Height, PNG transparency, Autoclear, Reset CSS, Scrolling Render IE, Opacity, PRE Tag, Li Background Repeat IE

Even More Rounded Corners With CSS [1]

ColorLover — Thu, 17 Jan 2008 08:49:17 GMT

Yet another technique for the Rounded Corners. CSS-only, no Javascript, Fluid layout, width/height, Single PNG image, Standard Module Format-based content markup

CSS Gradient Text Effect

ColorLover — Thu, 17 Jan 2008 08:33:24 GMT

A simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property.

CSS Text Wrapper

ColorLover — Thu, 17 Jan 2008 08:27:33 GMT

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

Maximum and Minimum Height and Width in Internet Explorer

ColorLover — Mon, 17 Dec 2007 11:22:21 GMT

by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions,The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer.

SitePoint CSS Reference

ColorLover — Thu, 06 Dec 2007 10:20:04 GMT

the most detailed and up-to-date reference on the subject available: – What Is CSS? – General Syntax and Nomenclature – At-Rules – Selectors – Workarounds, Filters and Hacks – The Cascade, Specificity, and Inheritance – CSS Layout and Formatting – Box Properties – Layout Properties – List Properties – Table Properties – Color and Backgrounds – Typographical Properties – Generated Content – User Interface Properties – Vendor-Specific Properties – Paged Media Properties – Differences Between HTML and XHTML – Alphabetic Property Index

Blueprint CSS Cheat Sheet

ColorLover — Mon, 26 Nov 2007 15:15:20 GMT

A reference page with all the important class names that you can print out and keep on your desk about Blueprint CSS freamework

Creating a table with dynamically highlighted columns like Crazy Egg's pricing table

ColorLover — Fri, 28 Sep 2007 06:57:05 GMT

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table . Step by step tutorial using CSS, JavaScript, and images in clever ways.

6 Keys to Understanding Modern CSS-based Layouts [1]

ColorLover — Mon, 27 Aug 2007 12:38:16 GMT

Key elements need to come together to create a solid CSS-based layout that is consistent cross-browser. Box Model, Floated Columns, Sizing Using Ems, Image Replacement, Floated Navigation, Sprites