The most useful CSS properties with examples.
Floatutorial: Step by step CSS float tutorial
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
Factor CSS
his tool takes a CSS stylesheet on input and produces an almost equivalent stylesheet on output, but with rulesets split, combined, and reordered to "factor out" common declarations. This helps reveal shared components. The resulting stylesheet may also be smaller.
LayoutGala
Based upon an article whose main goal was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts that we've thought worth sharing.
MaxDesign CSS Resources
Listmatic, Listamtic2, Listutorial, Floatutorial, Selectutorial.
CSS Rounded Box Generator
Form to generate CSS-based rounded box code using images but no tables.
List-o-Matic Generator
Generates HTML and CSS code for styled navigations using the list element and based-upon a large set of pre-defined styles.
CSS Beauty
CSSBEAUTY" is a project focused on providing its audience with a database of well designed CSS based websites from around the world. Its purpose is to showcase designers' work and to act as a small portal to the CSS design community.
CSS Import
The no-frills CSS gallery.
FarCry - Mollio
Mollio is a simple set of html/css templates. The aim was to create a set of page templates that use css for layout as well as some sample basic content which has also had some css applied.
CssCreator Generator This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
CSS Source Ordered Variable Border 1-3 Columned Page Maker
Complex but full-featured form for generating HTML and CSS for 1 to 3 column generic layouts.
A List Apart: In Search of the Holy Grail
Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photosand, as in a fancy truffle, a liquid center for the real substance.
Simple Rounded Corner CSS Boxes
Create rounded-corners using CSS without tables that expand and shrink automatically to fit your content and the XHTML markup is really light.
SelectORacle
Translates CSS3 selectors into readable English or spanish.
CSS for Bar Graphs
This is a simple bar graph we developed for a tool we're releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.
CSS Drop Shadows
There are some techniques out there for doing shadows entirely with CSS, but theyre not really suitable for my purposes because they rely on what we call a 315° shadow. The shadows I use on this site are 0° shadows, meaning they appear below and on both side of the object casting them, as if the notional light source were right above your screen. Existing CSS shadow techniques are totally unsuitable for creating shadows like those.
Template CSS
Template:css collects many css formatted page templates, developed and distributed by different designers. Our aim is to provide an easy to use, comprehensive repository where people can find what they need.
Intensivstation CSS Templates
Free generic templates that are XHTML 1.0 and CSS2 compliant.
MaxDesign Web Standards Checklist
This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used 1) to show the breadth of web standards 2) as a handy tool for developers during the production phase of websites 3) as an aid for developers who are interested in moving towards web standards.
New York Public Library (NYPL) Style Guide
This Style Guide for the Branch Libraries of the New York Public Library explains the markup and design requirements for all Branch Libraries web projects, along with various standards and best practices.
StyleGala
Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS.
Complete CSS Guide
Welcome to the Complete CSS Guide, a reference to every aspect of cascading style sheets. If you need help learning CSS or if you're looking for info about selectors, properties and all the other aspects of cascading style sheets, this is the place.
CSS Formatter/Optimizer
Form to assist in improving the formatting and optimizing your CSS code based upon CSSTidy 1.2
Ten More CSS Tricks You May Not Know
Our article, Ten CSS tricks you may not know1 has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know.
Ten CSS Tricks You May Not Know
Tips and tricks for CSS layouts.
sIFR 2.0 Rich Accessible Typography
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.
ListMatic
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list
Open Web Design
Open Web Design is a community of designers and site owners sharing free web design templates as well as web design information. Helping to make the internet a prettier place!
Open Source Web Design
To put it simply, Open Source Web Design is a collection of web designs submitted by the community that anyone can download free of charge!
Postition Is Everything
Site to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors and show how to "make it work" without using tables for layout purposes.
cssQuery
cssQuery() is a cross-platform JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1, most CSS2 and some CSS3 selectors are allowed.
footerStickAlt
Allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content whichever is visually lowest.
BoxPunch
How does one punch out the corner of an element and put something in the space created? The appearance can be achieved very easily just by using floated elements and, when necessary, some tiny negative margins.
Clearing a Float Without Source Markup
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. In the new method, no clearing element is used. This does not affect IE/Win which simply keeps enclosing the float as always (assuming the container has a stated dimension), but non-IE browsers will need a substitute for that element.
Creating a Star Rater Using CSS
Create a star rating using only CSS; the kind that when you hover over the 4th star, there are four stars that show up on the hover state.
CSS Drop Shadows
What if we had a technique to build flexible CSS drop shadows that can be applied to arbitrary block elements? That can expand as the content of the block changes shape? Compatible with most modern browsers? With better results for standards-compliant browsers? If you're not sold yet, we can also tell you that it requires minimal markup.
CSS element hover effect Examples of utilizing the hover effect.
CSS from the Ground Up
A beginner's CSS tutorial.
CSS Tab Navigation Using Submit Buttons
An example of CSS tabbed navigation where the tabs are created with submit buttons instead of anchor tags. This allows a form to be submitted each time a tab is clicked.
CSSVault
Great sites that use CSS to help and inspire others to use the technology.
CSS Zen Garden
The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really. Covers the basics, hacks, tips & tricks and more.
CSS2 Tableless Forms
Lay out your HTML forms without using tables.
CSS-Discuss Wiki
The css-discuss Wiki is a companion to the CssDiscussList mailing list. Among other things the wiki serves as a collective long-term memory for the list participants.
Fast Rollovers Without Preload
When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.
CSS Layout Techniques: for Fun and Profit If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find.
Nifty Corners: rounded corners without images
Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS.
A List Apart: Onion Skinned Drop Shadows
Yes, onion skinned. Animators use onion skinning to render what is impossible to see otherwise: a snapshot of motion across time. Now, web designers can use it to render another seeming impossibility: the truly extensible CSS-based drop shadow.
Pure CSS Popups
Now that we've seen pure CSS popups causing text to appear and disappear, it follows that we could cause other elements to do the same... like images, maybe? Maybe.
Uberlink CSS List Menus
What if you could make a great looking CSS navigation bar that looked and behaved like an image swapping menu? And what if it used just two images to power an unlimited number of links? If you'd like to learn how to make such a menu, please read on.
QuirksMode
QuirksMode.org is the personal and professional site of Peter-Paul Koch, freelance web developer in Amsterdam, the Netherlands. It contains more than 150 pages with CSS and JavaScript tips and tricks, and is one of the best sources on the WWW for studying and defeating browser incompatibilities.
Ruthsarian Layouts
Building CSS-based layouts can be a pain in the @$$. In an attempt to save the sanity of myself and others, I offer these layouts that I've put together. Everything here is royalty-free, copyright-free, and warranty-free.
CSS Slifing Photo-Gallery
This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically.
Styling
On the other hand, simple, unstyled
does not look good in richly styled documents. That's why I tried to find a couple of cross-browser compatible ways to make it prettier.
The Weekly Standards
This is a site about web designers who push their companies in the right direction. The efforts of hundreds of web developers around the country have helped steer companies away from bloated, table-based, non-standards-compliant code, and toward the shining light that is standards-based development.
Web Standards Awards
Although web standards give us a better, faster Internet, not many sites use them. The Web Standards Awards aims to promote web site design using W3C standards by seeking out and highlighting the finest standards-compliant sites on the Internet.
ShaunInman.com
Shaun Inman is the designer/developer responsible for Designologue, Mint and IFR. Originally from the Boston, Massachusetts area, he now resides in Baltimore, Maryland.
No comments:
Post a Comment