background preloader

CSS examples

CSS examples
Welcome to a site dedicated to hosting fully supported examples of CSS implementation. Within the tutorials and FAQ you'll find examples of how to create CSS based page layouts, style your documents and organise your code. This site also exposes, then shows you how to fix, many of the bugs and foibles of the most common browsers. Even though this site is currently undergoing a facelift it is fully functional. You can still visit all of its most popular components including the FAQ tutorials (which are not meant as a lesson in aesthetics), the three column Demos (still valid today even though they were done 2 years ago) and various examples of how to use css to add content to your site. Be aware that some of these techniques are quite advanced and require a reasonable understanding of CSS.

Related:  liorazakai

CSS Play Below is a list of CSS demonstrations that range from the simplest for beginners, to the most complex for advanced users. If you do not find what you are looking for then please contact me with your requirements and I will let you know if it is possible using just CSS. Avatar ParadeSimple image display using :hover. What's on TVAnother method of displaying images using :hover. A photograph galleryA photo gallery using thumbnail images. A photograph gallery - with links » 20-02-2009A photo gallery using thumbnail images amd linking to large images. CSS Frameworks What is CSS Framework Infact Lets start with what is framwork? A framework is a basic conceptual structure which you can use in your web-projects. CSS frameworks are usually just a collection of CSS files that set up things like basic typography, form styling, grids/simple layout, and resets, such as

CSS Gradients for IE9 « CSS3 Wizardry This works with Desktop IE9, Desktop Firefox, Desktop Chrome, Desktop Safari, Desktop Opera, iOS, and Android. Attention! IE9 will not destroy the world, kill babies, or take away your home or job. Simply put, IE9 is the best browser Microsoft has ever released. custom checkbox This idea came about from AOL's use of image checkboxes in the recently launched version of their WebMail product as a means of selecting email messages rather than standard checkboxes. For those who are not AOL members, here are two screen shots of the interface. Both taken in MSIE, one with images enabled, the other with images disabled. (or "pictures" as they are called in the preferences):

List of fonts for web design... Last updated: 2008/06/03 Return to the main page Introduction Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts". This is the reference I use when making web pages and I expect you will find it useful too. If you are new to web design, maybe you are thinking: "Why I have to limit to that small set of fonts? CSS Swag: Multi-Column Lists One of the minor holy grails of XHTML and CSS is to produce a single, semantically logical ordered list that wraps into vertical columns. The ideal situation, in my view, would be a single XHTML list whose wrapping is controlled entirely by CSS. Further, the wrapped list should tolerate text resizing (easily accomplished by styling everything in ems). CSS and the browsers that support it don’t yet provide us with “vertical wrap,” so we have to augment basic list markup with additional attributes and styling rules to achieve the effect. I’ll take you there—or as close as we can get using today’s browsers—but along the way let’s look at a variety of ways to accomplish a similar effect.

malo - Google Code Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites. Malo derives from it's bigger brother Emastic CSS Framework. Why should you use Malo? Try out the CSS 3 Template Layout module @Buguletzu – I’m interested to hear why you feel that makes it unusable. Most enhancement scripts (i.e. JS rounded corner generators) don’t run until the DOM is loaded, do you feel they’re unusable too? Articles » CSS » Fun with forms – customized input elements By Søren Madsen Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility. A few considerations before we begin Before you throw yourself at this, there are some important considerations you have be aware of.

Window size and scrolling Finding the size of the browser window Clue browser can only work out window width. Tkhtml Hv3 has the body/documentElement clientHeight/Width values reversed - versions before September 2007 also do not support innerHeight/Width, so they cannot work with this script. Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

60 CSS Tools to reduce your work load. Looking for ? Here are the top 60 that I know of. They’ve reduced my workload significantly. Hopefully, they’ll reduce yours. CSS Creator - This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Current page higlighting with CSS This is a basic test page. You can read the article here. First we'll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway: <ul id="navlist"><li><a href="index.html" >Home</a></li><li><a href="products.html">Products</a></li><li><a href="faq.html">FAQ</a></li><li><a href="contact.html">contact us</a></li></ul>

The Dynamic Duo - Checkboxes - The Checkbox Object CheckBoxes - The Checkbox Object Similar to the Radio Object, the CheckBox object requires things to be set up in a particular manner. Again, to use this object you must have images for the two states of the checkbox: checkbox0.gif (false) checkbox1.gif (true) Which must be preloaded: