All you need to know about css3

CSSDOSE - The Best CSS & Flash Designs on the Web

2010-02-15T10:53:00.000-08:00

CSSDOSE - The Best CSS & Flash Designs on the Web

CSSDOSE is a gallery of well designed websites from all around the world. Here you can find the best CSS & Flash designs on the web.

You can view the site at http://www.cssdose.com/

Download Free Flash Templates With .FLA Source Files!

2008-09-21T23:45:00.000-07:00

FREE flash templates is a website from where you can download free flash photo gallery, flash MP3 player, Spiral 3D Carousel, 3D thumbnail gallery, flash intros, flash websites or .FLA source files.

Just feel free to download, edit and use any free flash template to fit in your business or personal websites.

JW Flash Image Rotator

2008-09-21T23:44:00.002-07:00

The JW Image Rotator enables you to show a couple of photos in sequence, with fluid transitions between them. It supports rotation of an RSS, XSPF or ASX playlists with JPG, GIF and PNG images, a wide range of flashvars (variables) for tweaking both behavior and appearance and an extensive javascript API.

Open-Source Flash Interactive Vector-Based 3D Classes!

2008-09-21T23:44:00.001-07:00

FIVe3D is an open source code for creating vector-based 3D animations with Flash. These Flash animation classes are built with AS3.Â

FIVE3DÂ v2.1 includes Back face culling, Flat shading, Z-sorting, Space drawing functions, Bitmap3D class, Video3D class, Sprite 2D class, Letter spacing, Text widthÂ .

You can also download the free tool available at the website which enables you to create typography files.

Free, Customizable Flash Image Viewer!

2008-09-21T23:43:00.002-07:00

AutoViewer is a free, customizable Flash image viewer. AutoViewer is designed to display a linear sequence of images and captions. AutoViewer is easily customizable to display your images on your site, you can see instructions here.

Features:

Auto-Play allows you to view a gallery hands free.

Displays image captions and gallery title as a text overlay.

Intuitive image navigation via mouse and keyboard.

Interface rescales to fit any aspect ratio images and monitors.

Lightweight (11k).

Image pre-loading to prevent waiting for each image to load.

Cross platform - Windows/Macintosh (requires Flash 8 or higher).

Flash 8 detection. Users without Flash 8 are redirected to an upgrade page.

Free!

Free Flash World Clock For Your Web Pages Or Blogs

2008-09-21T23:43:00.001-07:00

ClockLink provides fashionable clocks that you can easily embed in your web page. All you need to do is simply paste the tag on your web page. Our clock will display the city name of your choice if you choose. You can also choose a time zone for your clock so it will show the correct time.

Open-Source 3D API For Flash Build On Action Script 2 And 3

2008-09-21T23:42:00.001-07:00

Sandy is an intuitive and user-friendly 3D open-source library developed in Actionscript 2.0 and now Actionscript 3.0 for Adobe Flash.

Sandy is an Actionscript library available for any AS compliant tools.

The are three main version of Sandy: 1.x, 2.x and 3.x. To make the choice between the different versions, we recommend you to look at the versions listing page.

This 3D engine main features are :

Viewing volume clipping for perfect rendering

Advanced shading effects such as (Phong, Gouraud, CelShading, flat shading).

Material system to easily change your objects appearance. Several material are available allowing to create transparent faces, bitmap texture and video texture as webcam video stream.

Advanced and easy object management allowing some fantastic possibilities during your creations (scaling, rotation, translation, tween, etc.)

Advanced camera management ( rotation, motion on linear or bezier-curve path, movements, etc.)

Complex object loading thanks to the .ASE and .WRL files parser , but also Collada and 3DS files for AS3, (files generated by several 3D object modeling packages such as 3D Studio Max or Blender)

Flash player 7 to 9 compatibility.

Both MTASC and Macromedia compilers compliant for AS2 and Flash CS3 and FlexBuilder for AS3 versions.

Several 3D primitives, allowing fast and parameterized object creation without any 3D modelisation knowledge.

Free And Easy To Integrate Flash Image Gallery

2008-09-21T23:41:00.000-07:00

Flash Gallery is a FREE, simple photo gallery built in Macromedia Flash 2004, that uses XML files to store the information about which images to display. The gallery is easy to configure and update since you need to change only the XML file. You can also check out the demo of this flash gallery.

Flash Gallery Features

Flash Gallery is 100% FREE!

Easy to implement in your site

Intuitive navigation

Cross platform - Windows/Macintosh/Linux

Supports Latin, Cyrilic, Chinese and any other language you can think of

Lightweight, only 11KB

Image preloader and effects

The Best Ajax Scripts Collection

2008-09-21T23:40:00.001-07:00

Ajax has changed the web. There’s no doubt about that. It’s made the internet a happier place to be (well, when it’s used well) and has helped fuel the Web 2.0 movement to make it what it is today. The Best Ajax Scripts Collection is a website from where you can find 190+ ajax scripts for your use.

The Best Ajax Scripts Collection website has a big collection of script from various categories like ASP.Net, Flash Scripts, CMS Scripts, Frameworks, Search Scripts, Wordpress Plugins, Joomla Scripts, Image Scripts, DHTML Scripts and Many more…

This is not enough, If you have any AJAX - JAVASCRIPT or DHTML script and you want to share it with others you can submit your script here.

Ajaxload - Free Ajax Loading Gif Generator

2008-09-21T23:39:00.001-07:00

Ajax Load is an online application providing the ability to easily create and download “ajax loading“ images for your website or application. More than 30 great indicators for loading image is available to choose from.

You can select indicator type, background color or even transparent, forground color for the loading image.

FancyUpload Using MooTools

2008-09-21T23:37:00.000-07:00

Swf meets Ajax for beautiful uploads. The release of the long awaited MooTools upload widget “Fancy Upload“thats allows queued multiple-file upload including progress bars. Try it out, the unobtrusive file-input replacement.

Example in the Playground which shows the full features and is good documented! The source for the example upload PHP-backend is here. Of course the script does not depend on PHP as server language, it works with every script language that can handle file uploads!

Fully compatible with all A-Grade Browsers and Flash 8+ (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)

Features

Select and upload multiple files

Filter files by type in the select dialog

Optional Events to add your own behaviour

Show and filter useful file information before the upload starts

Limit uploads by file count and/or file size

Platform and server independent, just needs Flash 8+ (> 95% penetration)

Unobtrusive, since the element is replaced after the swf loaded successfully

Cancel running uploads, add files during upload

Everything is optional, documented and easy editable

This script is licensed under the terms of the MIT-License.

LightForm - Free Stylish Ajax/PHP Contact Form

2008-09-21T23:36:00.000-07:00

LightForm is a free Ajax/PHP contact form. ItÂ also usesÂ FormCheck2 for fields validation and NiceForms to style text fields and textareas. Features of the form are listed below:

Form Validation using FormCheck2.

Spam Check.

Display user IP, user agent and referrer in the message.

Display a dialog box when message sent succesfully.

Inputs and textareas are styled with NiceForms.

Works in the most recent browsers (IE6+, Firefox, Opera, Safari and Netscape).

Use of this contact form is free of charge but the copyright notes in the footer must remain intact.

AJAX Image Gallery Powered By Slideflow

2008-09-21T23:35:00.001-07:00

AJAX Slideflow Control is an ajax based image gallery in which you can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation! Or better yet, try the fullscreen example.

The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions (included in the download).

poMMo, A Versatile Mass Mailing Free Software

2008-09-21T23:34:00.002-07:00

poMMo is versatile mass mailing software. It can be used to add a mailing list to your Web site or to organize stand alone mailings. Unique Features such as the ability to mail subsets of your subscribers set it apart from alternatives. poMMo is written in PHP and freely provided under the GPL.

poMMo designed to be easy to use and powerful, poMMo provides flexible Mailing Management that everyone needs — from Software Projects to Shoe Stores, to Marketing Firms, to pioneers of the Blogosphere.

It has simple 2 minute web based installation and can quickly import and export subscriber base. poMMo has a revolutionary AJAX based subscriber Management.

Online Web-based Ajax Document Viewer

2008-09-21T23:34:00.001-07:00

Are you having problems displaying documents, pdf’s, images, word documents? Do your customers have to download a reader to view a file? Do you need a fast pdf reader? Do you need a universal viewer for any kind of documents?

All these problems go away by using Ajax Document Viewer.

Ajax Document Viewer is a web based online document viewer and can embedded into any web page or linked from any page. It is fast, customizable and FREE.

A Free Ajax Based PHP Poll Script By Zoki!

2008-09-21T23:33:00.000-07:00

Zoki Poll is a simple and high-tech poll system, based on AJAX and XML. It can be simply integrated in almost every site. It is written in HTML, CSS and JavaScript with small backend files in PHP.

There are a lot of web recourses that allow users to create custom polls, tests and a lot of more websites that offer webmasters pretty dynamic polls and tests but do not share the code of them, only link to parent site. The main idea of this pack is to help creating independent systems. You can fit this pack for any task listed before. Tested in IE, Mozilla and Opera browser families.

FancyForm Is A Free Powerful Checkbox Replacement Script For Stylish Checkboxes And Radio Buttons

2008-09-21T23:31:00.002-07:00

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers. Thisis very quick to setup (only two lines of markup needed). It also numerous customization options.

The script itself is free. FancyForm uses the ultra-lightweight Mootools JavaScript framework and this is included with the download. Want to see the FancyForm in action here or download from here.

Free Live Form Validation As You Type with LiveValidation!

2008-09-21T23:31:00.001-07:00

LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields.

The naming conventions and parameters of the validations are similar to those found in the Ruby on Rails framework, and as such is the perfect client-side companion. Don’t worry if you dont use Ruby on Rails though, LiveValidation can be used anywhere you like, is simple to learn, and a joy to use.

Don’t just take my word for it though…take a look around, download it, and make some forms (for) fun! See LiveValidation in action here.

LiveValidation is licensed under the terms of the MIT License

Style Your Website’s Search Field with CssGlobe Search Field

2008-09-21T23:28:00.000-07:00

Now CSSGlobe presented Website’s Search Field with JS/CSS. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup. It features plug & play onfocus and onblur behaviors and auto suggestion like you’ve never seen before.

It features plug & play onfocus and onblur behaviors and auto suggestion. Search suggestion terms displayed as a dropdown box below the search field. You can navigate with up and down keys, or your mouse and you can edit your own keywords. All you need is two lines of code, links to JavaScript and CSS files and that would be it. Just take a look at the demo of this search field.

iCarousel - An Open-Source Free Javascript Tool For Creating Carousel Like Widgets

2008-09-21T23:27:00.000-07:00

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling.

Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.

Create Clear and Colorful “Flash-like” Effects With Javascript For Your Web Applications Using GlassBox!

2008-09-21T23:26:00.000-07:00

GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects.

The GlassBox library ..

is easy to use

is customizable and skinnable

comes with a coherent API (CSS based parameter) and a short introduction

includes a basic Ajax XHR for dynamic content loading

is tested with IE 6 + 7, Firefox 2, Opera 9 and Safari 3 (mac + win)

and is an open source project under MIT license

Image Manipulation With Javascript

2008-09-21T23:25:00.001-07:00

Aphototype, a client/server-side library, based on prototype, which supports all kinds of image manipulations.

On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. Let’s see how you can do it?

Vista-Like Ajax Calendar Version 2 With Mootools

2008-09-21T23:23:00.000-07:00

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the mootools javascript framework, AJAX, XHTML, CSS and PHP.

This Vista-like Ajax Calendar script is licensed under the Creative Commons Attribution- NonCommercial 3.0 License. You can use these files however you want, but don’t redistribute without the proper credits and do not use this for commercial purposes.

Free PHP, JavaScript And Ajax Based ShoutBox

2008-09-21T23:22:00.001-07:00

wTag is a shoutbox (chatbox or mini chat) that is written in JavaScript and PHP, and using Ajax to exchange data with the server without need to reload an entire page. It uses MySQL database as backend. Just take a look at demo here.

Replace URLs catched in a message with clickable links.

UTF-8 encoding for multilingual support.

Compliance with XHTML 1.0 Transitional and CSS.

Custom designs: it’s easy to change the chatbox look by editing the CSS files.

A form validation and warnings display system

Free Javascript 3D Carousel

2008-09-21T23:20:00.000-07:00

Carousel.us is a Javascript 3D carousel, using the prototype.js and scriptaculous.js frameworks. It also uses PHP Easy Reflections v3 by Richard Davey.

You will find a configuration file in which you can define the default parameters or you can also define them via URL using the GET method. Here are the some parameters :

includes

Directory where your files to include are

javascript

Directory where your javascript files are

css

Directory to your css file

path

Directory where your images are

opacity

Reflection opacity (0-100)

height

Reflection height (pixel)

radiusx

Horizontal spacing between opposite images (pixel)

raidusy

Vertical spacing between opposite images (pixel)

centerx

Position X of the carousel center (pixel)

centery

Position Y of the carousel center (pixel)

clickit

Add onclick event on each image (true or false)

base

Base speed (boolean)

speed

Carousel speed (boolean)

PhatFusion Free Horizontal Menu, Reveals More Of The Image As You Rollover It.

2008-09-21T23:18:00.000-07:00

Most of us see the image moving (left to right or right to left) navigation developed by Macromedia Flash on many famous website. But now its just build by the javascript.

Now we have another way to build this type of menu. PhatFusion has developed an image menu with the aid of Mootools framework. This meny looks really good and easy to use for everyone. You can also see the similar menu at Mootools Official Website. Salient features are :

2 optional onClick events - open & close

href passed to onClick events

stays open when clicked

closes when clicked

select item to pre-open

Horizontal Javascript Accordion Menu!

2008-09-21T23:16:00.000-07:00

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more.

The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

The front-end markup for the script is a simple unordered list as in the example belowâ€¦

To build the accordion call the function below onloadâ€¦

slideMenu.build('sm',200,10,10,1)

Click here to view the working sample.

Free 3D Effect And Glossy Style Web Application Icons Set By WebAppers

2008-09-21T23:14:00.000-07:00

WebAppers releasedÂ the free â€œWeb Application Icons Setâ€�? with 3D effect and glossy style. There are 20 icons designed specially for web applications (e.g. Charts, Profile, Search, Add, Delete, Email, Print, Warning and etcâ€¦). Icons come in 3 sizes; 48Ã—48 px, 32Ã—32 px, and 24Ã—24 px. All of them are in PNG format with transparent background. Web Application Icons Set is completely Free for both personal and commercial projects in any way you like. You can downloadÂ them here!

Free Psd Icons For Your Web Applications!

2008-09-21T23:13:00.000-07:00

Free clean and nice icons are most demanded free stuffs on the internet. Ganato DesignÂ releasedÂ Free Psd Icons for your webs or applications!Â You can find 24 beautiful icons set which you can use in your daily web application development projects

The sets include icons for applications, charts, databases, documents, emails, users, weather & more.

Download Hundreds of Free Artistic Patterns/Backgrounds For Your Web Designs!

2008-09-21T23:12:00.000-07:00

Free patterns/backgrounds are also most demanded free stuffs on the net. For web designers patterns/backgrounds are daily use graphics like icons, buttons etc. Today, we are introducing the free resource for hundreds of free patterns/backgrounds for you.

Squidfingers isÂ offeringÂ anyone to download hundreds of artistic patterns/backgrounds for daily use. Just check them here!

12 Free Glossy Blogging Icons Set for Bloggers

2008-09-21T23:11:00.000-07:00

BlogPerfume has released 12 Free Glossy Blogging Icons Set for Bloggers. These are nice and beautiful icons specially designed for bloggers but anyone can use it freely.

There are total 12 shiny and modern icons for your blogs. It comes with 3 sizes, 24Ã—24, 36Ã—36 and 48Ã—48 in png format. Please feel free to use it on your personal and commercial projects.

Download Free Web Development Icons From Icojoy

2008-09-21T23:10:00.000-07:00

Today, we are going to feature here their another icons set release. Its Free web development icons Part 4. They are very nice and professional and can be use for your web development project.

Ammount of icons: 60

Icon Sizes: 24×24

File Types: .png, .ico, .tif, .gif, .bmp

Colors: Colored with and without shadows, with a subtle gray shade and transparent

128 Completely Free And High Quality Icon Set By Function!

2008-09-21T23:09:00.000-07:00

Function web design and development released a set of completely free 128 high quality icons in png format. They are Function Icon Set.

These free icons are exactly that, free! You can use them anywhere. They are only available in 48×48px.

Quality Icons For Designers By pinvoke

2008-09-21T23:07:00.000-07:00

Searching for quality icon sets are not that much easy now a days. Today, we are going to introduce pinvoke who has recently released Fugue Icons. All the 502 icons are included in PNG format with 16×16 pixel size.

The icons can be used absolutely free for any personal or commercial projects. But to remove the attribution, please purchase the license.

Free Icons Sets For Websites and Web Application Use Available For Download At DryIcons!

2008-09-21T23:06:00.000-07:00

DryIcons are providing 15+ nice and beautiful free icons for icon lovers.

Free Web 2.0 Logo Creator

2008-09-21T23:04:00.002-07:00

Web 2.0 Logo Creatr is free logo creator with reflection. This helps you to create your logo in a new web 2.0 style and best of all the logo image will be stored on the site’s server so no need to ftp anything. You can just get the code and paste it where ever you want.

Edicy - Build And Edit Websites With Ease

2008-09-21T23:04:00.001-07:00

With edicy you can create a fresh site with great design and webspace on any domain in seconds. It’s seamless, all in one and unprecedentedly easy to use. And it’s free too.

Click here to see some examples and see how you can start with it. Now say goodbye to off-site editing, publishing and previewing, with Edicy everything happens on site. The results are right there, on the page.

Download Free And Nice Got It Icons Set

2008-09-21T23:03:00.001-07:00

We are continously searching for free and nice new icons set for our readers to introduce. Today, we are featuring here Got It Icons Set which is a free set of 205 icons Many of the icons are 32px exports made from 48px-optimized SVGs.

Download Facebook and YouTube Free Icons

2008-09-21T22:53:00.000-07:00

we are listing another nice and beautiful icons set. This is Facebook and YouTube Icons which is a free set of fresh Facebook and YouTube icons.

A Free Set With Curvy And Colorful Icons By DryIcons

2008-09-21T22:52:00.000-07:00

DryIcons’ released a new seductive free icon set. “Coquette Icons” will make sure to bring all attention and admiration to your software applications, websites, blogs. This playful free icon set contains curvy and colorful free icons made with one goal, to get all the affection to your projects.

These free icons flirt with style! “Coquette” free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format.

Download 150+ High Quality Free Photoshop Brushes At GetBrushes

2008-09-21T22:50:00.000-07:00

GetBrushes.com is free Adobe Photoshop brushes directory, featuring handpicked collection of the best brushes for Photoshop on the net, all free to download and use.

There you’ll find PS brushes for every style and taste, ranging from always popular decay & grunge brushes, over abstract and tech, to gothic, coffee spills, hair, or fractal inspired brushes for photoshop.

Turqua - 3D Isometric, A Free Vector Icon Set

2008-09-21T22:49:00.001-07:00

mono factor released a 3D Isometric Vector Icon set. These are the first 5 icons in a set. They are really nice and beautiful. This set contains 5 icons subjected as “lock”, “user”, “new user”, “newsletter” and “warning” icons. They are completely scalable vectors, so you can edit, change and use for printing or web purpose.

The set is licensed under Creative Commons License. Redistribution, Release for Download or Selling of these icons on an another site without permission is not allowed. You are though completely free to edit, change and/or directly use the icons in your site and in any kind of your projects.

Nice And Beautiful Free Icon Set Specially For Bloggers

2008-09-21T22:48:00.001-07:00

webtoolkit4.me presents their first icon set which consists of 18 icons. This set aims at bloggers as the icons represent some of the most used web applications such as: blogger, delicious, digg, facebook, feedburner, flickr, google, lastfm, linkedin, netvibes, newsvine, rss, stumbleupon, technorati, twitter, wordpress and yahoo. Icons come in 4 sizes, 62×62, 48×48, 32×32 and 24×24 in PNG format.

Icons can be used for both non or commercial projects.

Largest Collections Of Free Photographs For Non-Commercial Use On The Internet

2008-09-21T22:47:00.001-07:00

FreeFoto is the largest collection of free photographs on the Internet however link back and attribution is required. The comprehensive, yet easy to navigate site, offers images that are free for on-line use. Also non-commercial users may download our web size images to use off-line in school projects, church services, cards, leaflets, etc.

FreeFoto features exclusive images found nowhere else on the web with new pictures being added every week.

Design Jobs On The Wall

2008-09-21T22:46:00.001-07:00

Design Jobs on the Wall is a simple job board managed by Web Designer Wall where you can find and post design jobs. The pricing for posting a full-time job is only $75 and $50 for freelance jobs. Don’t miss out the opening special; enter the coupon code ‘promo’ to receive 50% off the first job listing. When you post a job opening, it will be instantly featured on Web Designer Wall as well as other design related websites (Best Web Gallery and N.Design Studio).

Free Quality Photoshop Brushes

2008-09-21T22:41:00.000-07:00

Qbrushes.com is a website from where you can download a good collection of free Quality Photoshop Brushes from around the net. They have categorized the brushes in these different category Abstract, Grunge, Misc, Nature, Objects, Plants, Splatter, Swirls

Animated Sortable Datagrid jQuery plugin

2008-09-21T22:30:00.001-07:00

The data grid above is a jQuery plugin jTPS that creates a table you can sort and page through, using nice animations, all via a simple call out.

Simple Save Message Using MooTools

2008-09-21T22:26:00.000-07:00

It's been awhile since we've put up an Ajaxian Featured Tutorial and so we're going to get back into the swing of things with a nice, simple tutorial using MooTools.

Giving users feedback during a "save" process is a very good idea. It allows the user to feel a sense of confidence that the site is responding and their data is being processed. While we're at it, why not make it look good as well? Antonio Lupetti has written a short tutorial which does just that.

My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.

In the image below, Antonio has described the sequence of effects:

To break it down, when the user submits the form, a message box will appear first giving the user an indicator that the save is in progress followed by a message to let them know that the save process has completed. The fade-out effect is very cool window dressing.

Antonio leveraged the MooTools JavaScript library for this tutorial which, apart from making the code a trivial task, already includes their "fx" module which makes adding nice effects very easy.

Antonio has created a demo to show off the results.

MooWheel: Unique Data Visualization

2008-09-21T22:24:00.000-07:00

Josh Gross, the creator of the Ajax-powered AjaxIM instant messenger, has come up with a unique way to visualize data:

The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the canvas object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise.

By using MooTools, CanvasText (for text support with canvas elements) and ExCanvas (for IE canvas support), he was able to produce an interesting UI for showing off data.

It's a very cool effect and I'm sure has applicability within applications. I'd like to hear from the Ajaxian community how this might be used. Thoughts?

CSS Animations via MooTools

2008-09-21T22:23:00.000-07:00

Chris Schneider has created a javascript implementation of CSS Effects using the MooTools JavaScript library. It basically parses the css and mimics the new Webkit css animations.

With the introduction of CSS we could seperate the presentation layer and the content layer, but we were not able to add animations via CSS. DHTML fixed this misbehavior, but now the presentation and behaviour layer were mixed.

First I tried the concept of adding something like â€œ-moofx-{property}: {from} {to};â€ to CSS. The disadvantage of this way is that you have to specify the change twice: First in regular CSS to serve the non-JavaScript-users, then for the animation.

After hearing about WebKitâ€™s CSS Animations I changed my concept of CSS animations. Instead of setting an additional target or starting value, both properties are specified â€normallyâ€. The only thing you have to add is a declaration.

The script uses MooTools soon to be release v1.2 and works in Safari 3, Firefox 2 and mostly Internet Explorer 7. The script degrades in Internet Explorer 6, because no dynamic pseudo-classes are supported.

You can see the script in action here.

BeSlimed: Mootools Gaming

2008-09-21T22:22:00.000-07:00

Markus Inger wanted to hone his Mootools skills, so he created a BeJewelled-like game, BeSlimed. Give it a Friday whirl!

Show/Hide Login Panel Built with MooTools

2008-09-21T22:21:00.000-07:00

Conserving screen real-estate while still providing good content to the user has always been a challenge for designers and developers and while larger screen dimensions are becoming more prominent, it’s still important to take full advantage of the space available to you. Jeeremie over at Web Kreation came up with a very cool method of display a login panel using MooTools v1.2’s built-in effects capabilities:

Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.

Jeeremie walks you through the steps of dropping this code into your site and provides the final source code as well to make the whole process painless. The end result is a very nice and intuitive slide down login panel which provides a nice balance of functionality and preserving screen real-estate.

Bomberman in MooTools

2008-09-21T22:20:00.000-07:00

Munteanu Gabriel has created today’s Friday JavaScript game. It is an old favourite…. Bomberman.

Munteanu has released the code as an open source project, and you can get going to bomb away now

Design Resource - 30 Sites to Download Free Stock and Royalty Free Images

2008-09-20T05:29:00.000-07:00

When you are designing a website,blog, brochures.., you mostly always want to add some stock images to it, to give a good looking feel, Mostly Images play a vital role in design, Here I’ve listed 30 best websites where you can download stock and royalty free images for free

1. Photocase

2. StockXchange

3. StockVault

4. Dreamstime

5. Open Photo

6. morgueFile

7. Every Stock Photo [ Search engine for free photo ]

8. Studio 25

9. Woophy

10. DexHaus

11. Photogen

12. About Pixels

13. FreeFoto

14. Free Photos Bank

15. Bancoimagenes

16. Pixel Perfect Digital

17. Pixelio

18. Pixel Galerie

19. Nations illustrated

20. Vintage Pixels

21. Free Picture Click

22. 9×13

23. Design Packs

24. Image* After

25. MIcro Shots

26. Turbo Photo

27. Free Digital Photos

28. Bluevertigo

29. FontPlay

30. Digital Dreamer

Art on a Board: Creative Skateboard-Arts by Emil

2008-09-20T05:27:00.000-07:00

Emil Kozak began at an early age to develop his skills, inspired by skateboard-art and the result today is a unique artist with brilliant ideas. The style is fresh and positive, but often with a message that digs deeper. He is a master of composition and has an eye for detail, that is not seen very often, His art works in skateboard are just amazing!!!, Hope dzineblog readers likes it

27 Best Photoshop Gadget Design Tutorials to Design Realistic Gadgets

2008-09-20T05:24:00.000-07:00

There are plenty of Photoshop tutorials out there, to improve Photoshop skills and techniques, actually you can improve your skills by designing a very realistic objects, as everyone says the design is in the details, In this post, you’ll find 27 Best Photoshop gadget Design Tutorials to Design realistic Gadgets like cell phones, Camera, Computers and more

1. Mobile Phone Styled Like HTC Touch Diamond

2. Designing loox Pocket PC

3. Mp3 Player Design

4. Shiny Photo Realistic Apple Remote

5. Realistic LCD HD-TV

6. Blackberry Style Mobile Phone From Scratch

7. iPod Shuffle From Scratch

8. Create a Sony PlayStation 3

9. A Slick iMac Pro in Photoshop

10. Sony Ericsson S500 Cell Phone Interface.

11. Nokia 5300 Cellphone Interaface

12. Design a Watch in PhotoShop

13. USB Stick Tutorial

14. Design a iPhone in Photoshop [ Video Tutorial ]

15. Black Spider Mp3 Player Design

16. Audio Receiver Illustration

17. LCD Monitor Design

18. Super Retro Style game Controler

19. Cute Strawberry Phone

20. 3D Mp3 Player

21. TV Aquarium

22. Custom Mp3 Player

23. Cute Little TV

24. Floating USB

25. Blackberry Phone

26. Design a Camera

27. XBox 360 Design

10 Websites with huge list of resources for web designers and developers

2008-09-20T05:22:00.000-07:00

These are the sites which have a huge list of links that are divided up into categories and then thrown together on one giant page of resources for web designers and developers, all these website covers mostly all topics is design and development, such as Icons, Templates, Fonts, Scripts, Color tool, CSS and more

1. Skout - Resource for Designers by Designers

2. Web Developer’s Handbook

3. For Web Designers - 673 Helpful links and Counting

4. Devlisting | Web Devoloper Resources

5. All Great Web Design gallery Roundup

6. Cork Dump | Customizable Resources for Designers and Devolopers

7. Resources for Web Design

8. Agency Tool | Web Design Dashboard

9. BLUE VERTIGO | Web Design Resources Links

10. N Design Studio - Links Section

TiltViewer - A 3D Flickr Image Browser

2008-09-20T03:03:00.000-07:00

TiltViewer allows you to browse Flickr’s most interesting images in a 3D space. Images are pulled from Flickr’s Interestingness list.

TiltViewer was built using Away3D, a branch of Papervision. Currently Away3D provides better handling of mouse events for nested 3D Objects. One limitation of Away3D is that there is no access to a 3D object’s sprite, so you can’t apply filter or alpha effects. I’m guessing that soon these features will be added to both engines.

Does a 3D UI give more functionality than the equivalent 2D interface? No, but its certainly a lot cooler! Part of the motivation to build this was to explore ways to make 3D interfaces simple and intuitive.

Being able to load Flickr images into a 3D engine was recently made possible when Flickr added crossdomain XMLs to it’s image servers. Thanks Flickr!

Click here for more about TiltViewer

Award winning Flash Websites of the year 2007

2008-09-20T02:58:00.000-07:00

The FWA Review is an ongoing series of articles providing a snapshot of each year , The FWA Review will act as a history of cutting edge webdesign and a reminder of those future-thinking sites ,who have paved the way so far.

2007 was definitely a year of renewed innovation, As budgets and bandwidth have grown agin this year, so has the quality and creativity witnessed on the web

Monoface

a simple idea executed perfectly made monoface a site you’d never forget

I Spy with my little eye>Avery creative campaign for an extremely worthy project which drew attention to the plight of children in the Netherlands

I want to see a ghost

A grat viral campgain which was also rather unnerving. Your cahnce to send your friends and foes some terror, Spanish styles

Nokia The PassengerA pioneering example of a first person driving game using actual video footage

Instinct

Wild and Wacky and delicious visuals drag and drop navigation giving the site an added edge

Get the Glass

This site is worth “site of The Year” award , Amazing levels of production and attention to detail

Michelin A etter Way Forward

Silck 3D fly-bys and clever contant managment brought Michelin in to the cool web world

Benny The Brave

Simple Idea and almost had a back to the oldschool flash4 feel but with 2007 creativity

A Massive and diverse site with something for everyone, even if you are not planning a holiday

UniqlockPossibly the most addictive website of the year, you have been warned!

Education is EverywhereOutstanding colors combined for a world calss innovative educational site

Using a mini-world view, this site for Nokia Embraces the nonstop living theme Perfectly

Good Things Should Never End

Loaded with gorgeous graphics, animation and content. Scroll to your heart’s content

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Actually there are 50 Of them Read the Full Article @ THEFWA.COM

CSS3 Opacity

2008-09-20T02:54:00.000-07:00

Need for Handling Transparency:

Before the introduction of features in CSS3 for handling transparency of images the web design though took over in various aspects had a great limitation embedded in it. That is the print design can handle overlaying of text on a background which could either be an image or color background.

This overlaying of text on background ability have the print design the ability of giving fading of text effect in the background and thereby handling the feature of transparency of images. But in contrast the web design lacked this powerful ability before the introduction of features in CSS3 which was handled in CSS3 by its powerful feature of opacity.

What is Opacity in CSS3:

Opacity is actually a property of CSS3 which gives its the ability to change the opacity of web design objects or elements and thereby make the element achieve the effect of fading and appearing thereby handling transparency of images. In short opacity is actually a property introduced in the version of CSS3 which would help users to define and handle the transparency of images on web screen with respect to its background.

Structure of Opacity in CSS3:

The general syntax of the powerful feature opacity in CSS3 is as below:

opacity: <alphavalue> | inherit

In the above the alphavalue denotes any value in the range from number 0.0 to 1.0 inclusive of both. In this the number 0.0 denotes fully transparent image which means that the background image to the element would be completely visible and number 1.0 denotes fully opaque which means that the background image to the element would be completely invisible. The default initial value is 1.0.

For example

opacity:1.0

The above example denotes the transparency of element to be completely opaque thereby making all the background images below the element defined to be completely invisible.

The option inherit is optional which if included denotes that the opacity property of the element defined should be maintained in the same way as that of its parent opacity. The opacity feature is handled and supported by Netscape browsers and is not supported by non-Mozilla browsers and is also not supported by Internet Explorer6 and Internet Explorer 7. The above statement may put the users feel that Internet Explorer being famous browser could not handle opacity property making it less powerful ability. But it is not so because though Internet Explorer does not support opacity property of CSS3 it supports an equivalent property alpha filter which is a property of Microsoft. The alpha filter property of Internet Explorer takes any value in the range from number 0 to 100 inclusive of both. In this the number 0 denotes fully transparent image which means that the background image to the element would be completely visible and number 100 denotes fully opaque which means that the background image to the element would be completely invisible. Thus it now clear from the alpha filter property that if one wants to handle transparency of images in CSS3 using Internet Explorer then they must multiply opacity by 100 and add the corresponding alpha filter.

So the general syntax for handling transparency of images in CSS3 using Internet Explorer property of alpha filter is as below:

filter: alpha(opacity=value);

The Mozilla-based browsers also support the property of opacity of CSS3 but some of the Mozilla-based browsers use the syntax with keywords as

-moz-opacity

for handling opacity property of CSS3

Apart from the above representation placement position also has to be specified along with the sytax of opacity definition. The placement position supported by Internet Explorer and Mozilla-based browsers is float:left

An example of the representation is given below:

<span style="float:left;filter:alpha(opacity=30);-moz-opacity:.30;opacity:.30;">

One more feature which makes using opacity property powerful is the way or syntax of opacity property is convenient to handle. This is because one can use the same value for rgb but still can achieve shades in images by using the opacity property defined in CSS3 instead of achieving different shades by giving different values for rgb which is inconvenient for users to handle. The example given below explains this in detail.

Defining using opacity property of CSS3 takes the below format:

<div style=" background: rgb(255, 0, 0) ; opacity: 0.1;"></div>

<div style=" background: rgb(255, 0, 0) ; opacity: 0.3;"></div>

<div style=" background: rgb(255, 0, 0) ; opacity: 0.5;"></div>

<div style=" background: rgb(255, 0, 0) ; opacity: 0.7;"></div>

<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

Instead of inconvenient way of handling using rgb without opacity property as shown below:

<div style=" background: rgb(241, 182, 178) ; "></div>

<div style=" background: rgb(243, 152, 132) ; "></div>

<div style=" background: rgb(247, 86 , 84) ; "></div>

<div style=" background: rgb(251, 35, 40) ; "></div>

<div style=" background: rgb(255, 0, 0) ; "></div>

The above concepts and effects of transparency which we applied for background images of elements defined can also be applied to elements transparency. That is the user can define the opacity in the same way for the image or element directly which will make the element to fade and appear in and out of the background. Let us see an example to understand this concept of handling transparency for background images in detail:

<img src="http://exforsys.com/sample/test/training.jpg"

style="opacity:0.3;filter: alpha(opacity=30) ;" />

Css3: Attribute Selection

2008-09-20T02:52:00.001-07:00

I was reading some things on Css today and came across Css3. After some research I found out that they added some cool things to Css in the new version. Something I really like is the Attribute Selection. Insted of having a choice to grab a Class, Id, or a Tag, now you can get more specific and grab a tag with only a certian attribute or that matches a certian letter pattern. Here is an example:

<style>

img[alt*=e] {

background-color: #593940;

}

</style>

What does this do? Well, it finds all the images (img). Next, I put the attribute and what I'm going to do in square brackets "[ ]". In the brackets what this says is: If anywhere (*) in an alt attribute you find an e. Then, you do your normal css to tell it what to do if it finds an e. Here is an outline of what the code is:

<style>

tag name[attribute*=string] {

code

}

</style>

Just so you understand it more . Hopefully you understand the basics of it, but what is it with the *? Well, that tells it where to find the string. Here is a list of them:

[attribute^=string] - This looks for the string at the Beginning of the Attribute.

[attribute$=string] - Looks for the string at the End of the Attribute.

[attribute*=string] - Looks for the string Anywhere in the Attribute.

Examples:

<style>

img[alt^=Ho] {

background-color: #593940;

}

</style>

<style>

img[alt$=me] {

background-color: #593940;

}

</style>

<style>

img[alt*=om] {

background-color: #593940;

}

</style>

Rounded Corner Boxes the CSS3 Way

2008-09-20T02:50:00.000-07:00

If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While these techniques are all very interesting, they do seem somewhat of a kludge. The goal of CSS is to separate structure from presentation, yet here we are adding superfluous mark-up to our code in order to create a visual effect. The reason we are doing this is simple. CSS2.1 only allows a single background image per element.

Thankfully this looks set to change with the addition of multiple background images into the CSS3 specification. With CSS3 you’ll be able to add not one, not four, but eight background images to a single element. This means you’ll be able to create all kinds of interesting effects without the need of those additional elements.

While the CSS working group still seem to be arguing over the exact syntax, Dave Hyatt went ahead and implemented the currently suggested mechanism into Safari. The technique is fiendishly simple, and I think we’ll all be a lot better off once the W3C stop arguing over the details and allow browser vendors to get on and provide the tools we need to build better websites.

To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.

.box {

background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);

}

We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat.

.box {

background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);

background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

}

Lastly, we need to define the positioning of each corner image.

.box {

background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);

background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

background-position: top left, top right, bottom left, bottom right;

}

And there we have it, a simple rounded corner box with no additional mark-up.

As well as using multiple background images, CSS3 also has the ability to create rounded corners without the need of any images at all. You can do this by setting the border-radius property to your desired value as seen in the next example.

.box {

border-radius: 1.6em;

}

This technique currently works in Firefox/Camino and creates a nice, if somewhat jagged rounded corner. If you want to create a box that works in both Mozilla and WebKit based browsers, why not combine both techniques and see what happens.

5 CSS3 Resources for Web Designers

2008-09-20T02:46:00.001-07:00

When Internet Explorer 7 for Windows (IE7) was released in early October of this year, the browser featured the hard work of many developers and engineers to bring the browser up to par in rendering CSS. Sure, there are some things missing, but overall it’s a solid rendering browser (with it’s fair share of bugs).

Yes, IE7 is the browser we should have had five years ago and because of that Web designers can finally do what they haven’t been able to do for quite a long time: start looking foreword. Namely, at CSS3.

I decided to cull together a short five item resouce list to help designers get on a good path for learning more about CSS3:

Jina Bolton’s presentation slides CSS3 and What Could Be (PDF) from her presentation at FoWD2007 is a good start to the potential of CSS3. (I wish there was audio to go along with it!)

Roger Johansson’s Web site is where I go to when I need a quick refresher on the upcoming CSS3 selectors when I want to stop getting cross-eyed reading the W3C documentation.

Cédric Savarese writes about the CSS3 Multi-Column Module at A List Apart:

“The W3C multi-column module is a CSS level-three working draft, proposed by the W3C to extend the current CSS box model. The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.”

Everyone likes rounded corners. I wrote up four different methods for pulling off the technique in the last edition of my CSS Cookbook. Fellow CSS author and speaker Andy Budd wrote about a pure CSS3 solution to tackle rounded corners that works in Firefox.

Check out a preview of CSS3 text effects, backgrounds, borders and more at CSS3.info.

Free Professional XHTML/CSS Website Templates For Download From NuvioTemplates

2008-09-20T01:51:00.001-07:00

NuvioTemplates is offering free professional XHTML/CSS website templates for download.

All the templates are valid according to XHTML 1.0 Strict, and use table-less layout only. The templates are carefully tested in all modern browsers (IE 6+, Opera 8+, FF 2.0+). The template source (including CSS code) is carefully commented and well-formed. The templates are created with emphasis on maximum accessibility. All the templates contain print style sheet.

Edit Your CSS Code Live In Both Internet Explorer And Firefox Simultaneously

2008-09-20T01:50:00.001-07:00

CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.

Download CSSVista (v0.15, Windows XP/Vista only, 8.9mb. Uninstaller included.)

Compress Your CSS With CSS Compressor For Speed-Up Your Website And To Save Bandwidth As Well

2008-09-20T01:49:00.001-07:00

CSS Compressor from CSS Drive is the utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two. It has ability to Strip ALL your comments. Just to safe-side keep your original CSS file.

CSS+Javascript Fancy Menu By Devthought!

2008-09-20T01:45:00.002-07:00

With the Â image below our most of the readers are already aware of this and had an idea about this css+javascript fancy menu but to have this great resource in the Smashing Apps list is very necessary that is why I am adding this. This fancy menu is also great for those who do not know about this and I believe there are alot of those guys as well often visits to SmashingApps.com.

In this article Guillermo Rauch’s will go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends and the visitors coming to your website.Â This custom navigation bar needsÂ Mootools library, this beauty is contained in 1.5kb. Not only that, but itâ€™s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible.

Edit Websites On The Fly With CSSFly!

2008-09-20T01:45:00.001-07:00

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.

Build Professional CSS/DHTML Menu For Your Website Just For Free!

2008-09-20T01:43:00.002-07:00

Now you can create professional looking CSS menus for your Website as easy as never before. Build your cool menu online, without writing a single line of code!

ThisÂ is IzzyMenu - it’s easy to use Menu Builder, which allows you to build your CSS & DHTML menu in minutes. Choose from dozens ready styles or create your own menu style.Â This online menu generator is the best solution for amateurs and professionals!

A New Way Of Linking With Scrollovers

2008-09-20T01:43:00.001-07:00

Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren’t expecting.

Integration of Scrollovers into your web site couldn’t be easier, even if youâ€™ve already built the site that you want to include Scrollovers on. In just minutes you will be able to have them appearing on your own pages.

Dynamic Drive CSS Library For Practical CSS Codes And Examples

2008-09-20T01:41:00.000-07:00

Dynamic Drive’s has a new CSS library where you’ll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.

There is a great collection of Horizontal CSS Menus, Vertical CSS Menus, Image CSS, Form CSS, DIVs and containers, Links & Buttons, Other.

Download Free XHTML-CSS e-commerce Website Template

2008-09-20T01:36:00.001-07:00

Most of us sometimes very much interested in finding a well designed theme which is free as well. CSS Creme has released a free css theme related to e-commerce website. The theme is really neat, clean and beautiful. There are Product listing template, detail template, contact us form template in it.

Funky Sliding Door Tabbed Menus By A BulletProof Idea

2008-09-20T01:35:00.000-07:00

This Tabbed sliding doors menus look funky and elegant as well as being scalable. You can add as much text as you want and the tabs just expand and don’t break apart, they also re-size nicely when you bump up the text in your browser. You can take a look at demo here!

In this tutorial John Stephen is going to show you how to create his own little twist on the very popular Sliding Doors of CSS menus by Douglas Bowman

The menu is working great with all standards compliant browsers (Firefox/Safari/IE7/Opera etc..) and also works as far back as IE5.5 and IE6!

21 Mindblowing Premium-Like Free Wordpress Themes

2008-09-20T01:33:00.000-07:00

We have been asked many time via email that we have to write a blog post about wordpress themes. So, this is the post in which we have listed down 21 Mindblowing Premium-Like Free Wordpress Themes. This is not the long list with all the available wordpress themes on the internet but its an exclusive collection of free wordpress themes which are not less than premium themes and you may consider any of these themes as per your need before going to purchase any paid premium theme.

You are welcome to share if you know more premium-like free wordpress themes which our readers may like.

Outdoorsy Wordpress theme is very unique, and quite graphics heavy and it’s perfect for the individual who wants something slightly different from your usual standard free theme.

Upstart Blogger Minim is very clean and easy to read.Its lightweight, for speed and the columns are sized specifically to accept standard ad formats.

A CSS Gallery Wordpress theme for webmasters who want to build CSS showcase or web gallery. Packed with built in Tagging, Google ads and a sidebar block with 125 x 125 banner ads. Theme is valid XHTML 1.0 transitional and valid CSS!

A grungy, two-column weblog theme, WordPress Fun is stylish and modern, and includes a neat featured posts list in the left-hand sidebar.

Mimbo magazine-style wordpress theme is a theme which makes extensive use of WP’s template tag system to create a non-traditional layout. It contains no images and only minimal CSS styling. Mainly it exists as a clean, grid-based starter layout for designers to install and style to their own liking.

Spotless is a Wordpress Theme designed specifically to be used for Photoblogs. Its a valid XHTML and CSS based theme.

The Unstandard WordPress theme comprised of a - grid aligned - images for forward facing pages, and clean textual presentation on the inner page.

Aspire is a valid XHTML and CSS free wordpress theme. This theme is widget ready, fixed width, 3 columns and works flawlessly in IE (6 and 7), Opera and FF.

WP Premium is an elegantly designed, 2/3 column, feature packed, widget ready theme that comes with three color-scheme options.

PerfecTOM Wordpress Theme is optimized for all browsers and XHTML/CSS valid. Fixed width, 2 columns, light blue colours scheme and fast loading.

Indomagz Premium Wordpress Theme is a magazine style, cross browser supported (tested on Firefox, Opera, Safari, IE7, IE6) Valid XHTML & CSS based free theme.

Brightness Wordpress Theme comes up with these big features. It’s magazine style, It’s Free and It’s noob ready.

Options WordPress Theme is free beatiful magazine style nice and attractive wordpress theme.

SubtlyMade is a free nice and beautiful wordpress theme.

WP-Gold is a free beatiful full CSS, widgetized and multiple sidebars theme. It´s called Conceditor WP Gold.

WP CODA WordPress Theme is a unique WordPress theme with a fluid slider providing navigation between key website pages, which could be useful for small business websites.

WP-Polaroid is a modern, funky design perfect for a personal website, with pink and blue versions. It offers widgetized sidebars and valid XHTML/CSS code

Monochrome Gallery is a free widgetized theme for Wordpress packaged with an author archives page, AJAX slideshow, categorized posts with thumbnails on the homepage and a CSS framework to aid in customization.

Night Whimsy theme is definitely feminine and is great for Spring. It’s customizable though, so if girly isn’t your thing, or you don’t like the colors - you can change the colors and images to something that better suits your taste.

Purple Fever is a fresh 2-column styled premium WordPress theme by WTM, created for sites that wish to establish a lasting impact with visitors. Users looking to maximize their Google adsense or affiliate revenue will also find this theme of great promise.

Notepad Theme is a simple, clean and sharp template designed for small business websites for personal branding that is ideal for personal coaches, consultants and independent professionals.

Porftolio Wordpress Theme is a wordpress theme designed for web portfolios. It is coming with an Administrative Panel from where you can edit the head quote text, you can edit all theme colors, font families, font sizes and you can fill a curriculum vitae and display it into a special page.

BlueGrey Wordpress Theme simple, clean and light wordpress theme for heavy traffic blogs.

300+ Latest Free CSS Templates For You To Download

2008-09-20T01:32:00.001-07:00

FreeCSSTemplates is a website from where you can download free standards compliant CSS templates.

All of the templates are free for any type of personal or commercial use (dont forget to read the license) so you do not have to pay anything to use them. All you just need that you link back to the FreeCSSTemplates.org website in some way. They also update the collection on the website with new templates regularly so check back for even more free CSS templates.

Features

Released for FREE under the Creative Commons Attribution 2.5 license

Very lightweight in terms of images

Tables-free (ie. they use no tables for layout purposes)

W3C standards compliant and valid (XHTML Strict)

Provided with public domain photos, generously provided by PDPhoto.org and Wikimedia Commons

Free Customizable CSS Menu For Everyone

2008-09-20T01:31:00.003-07:00

Are you searching for free, nice and easy to use CSS menu for your website? No need to worry about it! CSS Menu Builder is an online menu builder website from where you can create 30+ horizontal, 700+ vertical and our breadcrumb menus that consist of more than 200+ combinations.

The menu creation process and interface is very easy to use. This helps you to work fast and efficiently in less time with the amazing result of free css menu.

Simple And Free CSS Menu Designs For Your Website

2008-09-20T01:31:00.001-07:00

While designing a website designers want to see the inspiration or free design resources which can reduce their work on the project. We help those guys because we are always in the search of great free resources and list here. Below are the simple and free CSS menu design s for you to download and use any way you see fit.

You can download the complete set, or an individual menu by clicking the Download Menu button located on each menu from the original website.

Please feel free to download for commercial or private use, and modify to suit your needs.

More Than 90 Free CSS Layouts To Design Your Website

2008-09-20T01:29:00.000-07:00

As you know that our main focus is on providing you the access to fresh free stuffs available on internet which can reduce the working time of designers and developers. Today, we are listing another great resource for free css layout. This is Code Sucks, where you can find more than 90 free css layouts to design and to create your website in a more easiest way.

All markup has been validated against a strict Doctype. They have made these CSS Layouts for Screen resolutions for 1024 x 764. You can go and see layouts categorized in these 2 categories.

Fixed Width CSS Layouts

Faux Columns CSS Layouts

How To Create Tabbed Structure Menu Using CSS And jQuery

2008-09-20T01:28:00.000-07:00

Today, designers and developers has one of the biggest challenge is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently.

Nettuts is a website where you can find useful tutorials, tips and tricks for your web design and development challenges. There you can find a tutorial to Create a Slick Tabbed Content Area using CSS & jQuery. In this, you can learn in a step by step working in details to come up with your own designed and developed nice and beautiful tabbed content area. You can click here to see how it will look in action!

Discover The Best Of The Web In August 2008

2008-09-20T01:24:00.000-07:00

We are always in the search of great free resources, tips and tricks, etc for our readers. Every day, we work hard to find new resources and show them here for you. Today, we are starting another great section Discover The Best Of The Web on SmashingApps.com. In this, we will find and make a list for the best of the web for the whole month. Maybe, we cannot cover all of the best from around the web but we will try our best to cover as much as possible.

You are welcome to share if you know more best of the web in the month of august which our readers/viewers may like.

Design Tips, Tricks and Tutorial

”””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””

Colorful Glowing Text Effect

40 Dark and Futuristic Photoshop Effects

30+ Nicest Photoshop Photo Tutorials, Part II

35 Photoshop Tutorials for Designing Your Own Posters

Artwork, Digital Photography and Inspiration

”””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””

The Showcase of Brilliant Pattern Designs

Single-Page Portfolio Sites

Web Design: Illustration

50+ High-impact Illustrated Vector Posters

20 Stunningly Colorful Commercial Designers

30 Impressive Colour Spectrum and Rainbow Wallpapers

31 Websites Using Wood Elements

Javascript and Ajax

”””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””

A study in Ajax Web trends. What are the best Free Ajax Resources?

5 Useful Coding Solutions For Designers and Developers

xHTML and CSS

”””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””

19 CSS Menu Tutorials to Spice Up Your Web Designs

40+ CSS/JS Styling and Functionality Techniques

12 Great CSS Resources: From Inspiration to Implementation

Resources

”””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””

13 Sources for Background Patterns and Textures

Adobe AIR Apps for Web Designers

30 Free High Quality Wordpress Themes

Retro Photoshop Brushes And Vector Images - Giant Design Pack

200+ Photoshop Brushes for Light, Sparkles

10 Awesome typewriter fonts for web designers

Miscellaneous Articles

”””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””

14 of the Most Useful Web Design Blogs

Top 5 Graphic Design Forums

9 Of The Best Ways To Present A Website To A Client

10 Amazing Visualizations of Social Networks

9 Web Developers That MUST Be Followed On Twitter

Ajax Star Rating

2008-09-20T00:42:00.000-07:00

Minimal, yet complete. How a star rating system should be.

Our percentage based Star Rating function gives you 1,680% increase in accuracy — compared with the traditional 5 star system, it has 84 hotspots (84px wide), instead of 5 hot spots… let’s do the math: (84/5)*100=1,680%. Why restrict your users?

Download the .zip source code.

Code of creating vertical css menus

2008-09-18T21:05:00.014-07:00

Copy and Paste the following code in your html page. This code is tested in IE6, IE7 and firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

/* individual menu item styling */

#main-menu ul {

list-style: none;

}

#main-menu li {

list-style: none;

/*padding-bottom: 5px;*/

/*border-bottom: 1px solid #d9dbdc;*/

/*margin-bottom: 10px;*/

}

#main-menu a {

/*float: right;*/

display: block;

color: #231f20;

text-decoration: none;

border-bottom: 1px solid #d9dbdc;

padding: 5px 0px 5px 0px;

}

#main-menu a:hover {

/*padding-bottom: 5px;*/

display: block;

color: #231f20;

border-bottom: 1px solid #000000 ;

background-color:#33CC33;

}

/* menu item styling on mouse over */

#menu a:hover {

color: #6666CC;

background-color:#33CC33;

}

</style>

</head>

<body>

<div id="main-menu">

<ul>

<li><a href="#">Home</a></li>

<div></div>

<li><a href="#">About Us</a></li>

<div></div>

<li><a href="#">Services</a></li>

<div></div>

<li><a href="#">Products</a></li>

<div></div>

<li><a href="#">Consultation</a></li>

<div></div>

<li><a href="#">Contact Us</a></li>

<div></div>

<li><a href="#">Search</a></li>

</ul>

</div>

</body>

</html>

Printing in CSS

2008-09-18T21:05:00.013-07:00

CSS2 introduced a mechanism for closer control over printing web pages that are styled using style sheets. In this section, we'll look at how this works.

There are two aspects to consider with printing. The page, and the contents of the page.

For the page, we need to consider what size it is, whether it is oriented as a portrait or landscape, what printing marks might be required, and what margin it has.

For the content we need to worry about where pages break, and what is done with widow and orphan lines of text (we'll explain these terms below).

In CSS2, the page properties are defined by the @page rule, while several new properties help control page breaking.

The @page rule

At the heart of printing in CSS2 is the @page rule. This is similar to the @media rule, which you can learn about in the section on Media.

The @page rule defines a context for printing. Essentially it describes the paper sheet that the web page is going to be printed on.

@page rules work very much like the standard statements of a style sheet, though they take properties specific to pages that no other statement can use, and can also have margins specified using the familiar margin properties.

The properties of a page can be applied to every page, or differently to left and right hand side pages. When printing for bound publications, the margins on the left and right hand sides are usually different to take into account the center binding.

To specify properties for every page, the @page rule has the form @page {/* properties declared here */}

To specify the properties for left hand side pages, the @page rule has the form @page:left {/* properties declared here */}

To specify the properties for right hand side pages, the @page rule has the form @page:right {/* properties declared here */}

Named pages

@page rules can be named, which, in conjunction with the page property we will see below, allows particular elements to be printed on particular kinds of pages (that is pages set up in a particular way). For instance, its easy to set up an @page rule for printing figures. Suppose we want to print any figures in landscape format. We can set up a named page like this

@page figures {

size: landscape

}

The name of a page is simply placed after the @page keyword and before the properties for the rule. Below we will see how the page property tells the browser which @page rule to use to print an element.

Page specific properties

There are two sets of properties associated with how pages will actually be printed.

those that relate to the printed page itself, that is the margin properties. These can only be applied to @page rules. Here we will refer to these as Page properties.

Those that relate to how the content is displayed within those pages. These properties are the page-break-before, page-break-after, widows and orphans properties. These can be applied to any elements. Here we will refer to these as Page break properties.

margin, margin-left, margin-right, margin-top, margin-bottom

What it does

Margins are the only general properties from CSS that can be applied to pages.

The margin properties set the top, left, bottom, right and all margins respectively.

Possible values

Media in CSS

2008-09-18T21:05:00.012-07:00

An important assumption underlying CSS1 was that web pages were viewed using a personal computer with a monitor. But there are many more ways to access a web page than simply via computer and monitor. And each of these different media have their own characteristics. They may be monochrome, limited in size, they may be "aural" and read web page content aloud. They may be television based, like WebTV. And looking toward the future, we really have no idea what they will be like.

CSS2 provides a way to tailor a style sheet to the particular medium that is being used to display a page. Inside the same style sheet you can have different parts for printing, handheld devices, monitors and so on. Additionally, different style sheets can be imported depending on the medium used for browsing.

In this section we will take a look at how these work.

The @media rule

The @media rule is a subset of a style sheet specific to a particular type of medium, or group of media.

An @media rule specifies the medium or media to which it applies, then contains a number of statements, exactly like the statements we usually find in a style sheet. These statements apply only when a web page associated with this style sheet is being displayed using one of the media to which the @media rule applies.

@media rules are straightforward to construct. They comprise

the keyword @media

a list of media types, separated by commas

the statements to be applied to this group of media, contained inside curly braces "{" "}"

These statements are identical to the statements we have seen in previous sections.

For example, the following rule applies a white background and black text color to the body of page when it is being printed or when it is being displayed on a handheld device.

@media print, handheld {

background: white;

color: black

}

Types of media

CSS2 provides for the following media types, as described in the recommendation

all Suitable for all devices.

aural Intended for speech synthesizers.

braille Intended for braille tactile feedback devices.

embossed Intended for paged braille printers.

handheld Intended for handheld devices (small screen, monochrome, limited bandwidth).

print Intended for paged, opaque material and for documents viewed on screen in print preview mode.

projection Intended for projected presentations, for example projectors or print to transparencies.

screen Intended primarily for color computer screens.

tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.

tv Intended for television-type devices (low resolution, color, limited scrollability).

Media specific importing using @import

In addition to the media rule, CSS2 allows conditional importing of style sheets based on the current medium. This means that a style sheet will only be imported when a page is being displayed in a particular medium. This is particularly useful for low bandwidth media, like handhelds, which generally are wireless based. With an imported style sheet based on the medium, only the statements specific to the particular medium need to be downloaded.

To conditionally import a style sheet based on the current medium, create a standard @import rule, but add the names of the media that will cause the style sheet to be imported directly after the rule in a comma separated list.

For instance, to import a style sheet called monochrome.css when a page is to be printed or displayed on a handheld device you would create the following @import rule.

@import url(monochrome.css) print, handheld

For more on @import rules, see the section of on types of rules in CSS.

Hints and suggestions

Media specific importing essentially achieves the same outcome as using the @media rule described above. The difference is that if you use the @import rule the user agent does not even have to download the imported style sheet unless it is relevant. This will be a very powerful technique for designing for technologies such as handheld and mobile devices. It will be very important for these devices to support the @import rule.

Generated content in CSS

2008-09-18T21:05:00.011-07:00

If you cast your mind back you might recall our golden style sheets rule, separate appearance from content. Now, suddenly we are talking about generated content. You might be thinking, doesn't this introduce content into our style sheets? What about the golden rule? Well, it's a good question, and this area is one of controversy among style sheets experts. I won't buy into that debate here, but I want to cover the issue of generated content in CSS2 in this section.

Firstly, note that some kinds of generated content already exist in CSS1. Think about bulleted and numbered lists. These add numbering or bullets, so they do generate content to an extent. CSS2 adds more powerful ways of generating content. Here we learn how.

There are two aspects to generating content with CSS2.

Firstly we need to say where the content is to be inserted

Then we need to specify what the content to be inserted is

Where is the content to be inserted?

To answer this question we use the two new CSS2 pseudo classes we saw a little earlier. The :before and :after pseudo classes are appended to selectors, and allow the insertion of generated content before or after selected elements. For example, you might want to put something before all headings of level 1. The pseudo element selector to do this is h1:before.

What content is to be inserted?

To do this we use a new property, content.

The content property allows us to define the content that is to be inserted before or after selected elements. Content can comprise

strings of text

images and other resources

counters

keyword defined elements

the result of the unique attr() function (don't panic - more on this below!)

Let's take a look at the content property itself in detail, then we'll look at each of these different types of content as well.

content

What it does

The content property specifies the content to be added before or after an element selected by the :before and :after pseudo classes. It can only be used with these selectors.

Possible values

As mentioned above content can comprise a list of

strings of text

counters

keyword defined elements

the result of the unique attr() function

Let's look at each of these values in turn.

Strings of text

What it does

Surprisingly, using this value will insert a string of text before or after the selected element.

Syntax

Say we wanted to generate the content "Chapter " before every heading level 1.

h1:before

{content: "Chapter "}

All you need do then is place the string of text you want to be generated between double quote marks.

counter and counters

What it does

counter values are more than a little involved. Think of them as super-charged versions of numbered lists. Counters have a name, and a style. You create a counter using the counter function, then use them in conjunction with the content property to insert markers into a document. This isn't quite as confusing as it initially seems.

There are two forms of the counter function, the counter form and the counters form.

The counter function has the form counter(identifier, list-style). The identifier is the name of the counter whose value you want to insert, while the (optional) list-style specifies what style of counter you want (for instance lower-roman.) These styles are the same as those for elements of type list-style. When the browser encounters a counter function, it determines the value of that counter at this point of the document, then inserts it into the document in the nominated style. How does it determine this value? See the section on the counter property below for more detail and examples.

The counters form is very similar, but allows for multiple counters to be inserted simultaneously. The form is counters(identifier, string, list-style). This returns all counters with the name specified by the identifier at this point of the document in the given list style, separated by the string. For more on this rather sophisticated aspect of CSS2, with examples, see the counters property below.

Keyword defined elements

What it does

At the moment, keyword values are limited to allowing the insertion of various types of quote marks.

open-quote places the open quote string as defined by the quotes property for the elements

close-quote places the close quote string as defined by the quotes property for the elements

no-open-quote does not insert any content, but increments the level of nesting of the quotes

no-close-quote does not insert any content but decrements the level of nesting of the quotes

Basically it works like this. You use the content property with a keyword value to define, for example, that there should be an opening quote before a certain element. You then use the quotes property to define what type of quote marks you want to appear. If you don't define a value for the quotes property, the default is up to the user agent. This means that it may put in some sort of quote mark just because you have given content the value of open-quote, but it may not be exactly what you have in mind.

The attr() function

What it does

The last possible value for content, and unique to the content property is the attr() function. This returns the value of a named attribute of the selected element. The returned value is then inserted as a string. For example, with a link, the title of the link could be inserted after the link in the following way.

a:after {

content: attr(title)

}

This might be used in conjunction with an @media rule to specify that only when printing a page, the URL should be inserted after the link.

@media print

{a:after{

content: attr(href)

}

}

How is content added?

Now, after that long diversion, where we looked at the possible values that the content property can take, let's go back to just a couple more things about the content property itself.

Content is added as inline, block or marker elements. However the statement that creates the content can set the display of the content to be a block, or other kind of element, rather than an inline element. For example

body:after {

content: "The End";

display: block;

margin-top: 2em;

text-align: center;

}

places the text string "The End" at the foot of the page as a block, rather than as an inline element.

Default values

If no content is specified, the default value is an empty string.

Is it inherited?

An element does not inherit the content property of the element which contains it.

quotes

What it does

The actual quotation marks that will be drawn are defined by the new quotes property. This property allows different quotation marks to be created for different elements (for example when quoting different languages the correct quotation marks for that language will be inserted automatically.)

The quotes property specifies the quote marks to be used for different levels of quotation. It is used in conjunction with a keyword value for the content property we saw above. When content takes a value of open-quote and close-quote, the open and close quotes inserted are those defined by the quotes property.

Possible values

quotes are defined as a list of pairs of strings. Each pair defines respectively the opening and the closing quotation mark. The pairs are separated by spaces, as is each element of a pair. For example the following statements create different quotes for different languages, including what should happen when quotes are nested.

/* Specify pairs of quotes for two levels in two languages */

q:lang(en) { quotes: '"' '"' "'" "'" }

q:lang(fr) { quotes: "«" "»" "<" ">" }

In English, according to this statement, first level quotes are double quoted, while second level quotes are single quoted. In French, first level quotes use "«" and "»" while second level quotes use "<" and ">".

Default values

If no value for quotes is specified, the default value is determined by the browser.

Is it inherited?

An element inherits the quotes property of the element which contains it.

Counters and counter properties

counter

Counters are sophisticated and powerful, and not surprisingly more than a little complex. But be not afraid, a little thinking and they are manageable. Here's how they work.

Counters are used exclusively by the content property to insert numbering (e.g. "1.5") before or after an element. You don't need to "create" a counter, just by referring to them they come into existence. For instance, let's suppose you created the simple rule below

h1:before {content: counter(chapter)}

This tells the browser to add the value of the counter called "chapter" before every heading of level one. But what value is that? Well, if we don't set the value using the properties we will discuss in a minute, the counter value will be 0. So every heading of level one will be preceded by a 0. We don't really want that. We want something along the lines of the first heading to be preceded by a 1, the second by a 2, and so on. To do this, we use the counter-increment property. This increments the value of a counter by a given value (you can jump up by 2, down by 1 (using the value of -1), as well as simply incrementing by one.)

To use counter-increment, name the counter you want to increment using the identifier for the counter, and then the value you want to increment by. (Again, simply using the property "creates" a counter with that identifier if it doesn't already exist). In the following example, we increment the value of the counter with an identifier "chapter" for each <h1> element.

h1 {counter-increment: chapter 1}

You can of course combine the two rules into this simple rule

h1:before {content: counter(chapter);

counter-increment: chapter 1

}

This increments the counter then adds it before the <h1> element. Note the special case that if you increment and use a counter in the same rule, it is incremented before being inserted even if the content property comes before the increment property.

What does this let us achieve? Well, now, instead of marking up the headings of each chapter in our HTML based document like this

<h1>1. Abstract</h1>

...

<h1>2. Introduction</h2>

We leave out the numbering and it is done automatically. This aids the editing and writing processes, because moving sections, subsections and so on, or deleting them, or inserting new sections doesn't necessitate re-entering every number! It's particularly useful where a document might be served up in pieces based on the user's needs, or the medium they are using.

Let's look at a more complex example, using subsections. Here we will also take a look at the counter-reset property. Any nontrivial piece of documentation will almost certainly be divided into sections and subsections. We've seen how to number the top level sections (we called them chapters), but what about subsections? The particular problem is resetting the counter at the beginning of a new subsection.

Here is what we do

h1:before {content: counter(chapter);

counter-increment: chapter 1

/* this is the same as the example above */

counter-reset: subsection 0

}

In this example, we reset the counter called subsection to 0 each time we start a new section (assuming the h1 is the start of a new section). Now we need to increment the subsection counter for each subsection (heading of level 2), then insert the subsection content so that our subsections are correctly numbered. Let's take a look.

h2:before {content: counter(chapter) "." counter(subsection);

counter-increment: subsection 1

}

This increments the counter called subsection, then inserts numbering of the form "2.5" before the text of the heading.

counters

The last thing we need to learn about counters is a little more involved again. Think about lists in HTML. These can contain other lists, which can contain others, and so on ad infinitum. It's not possible in advance to know how many levels there will be, so how do we take care of this situation? Fortunately those smart people at the W3C thought of this, and provide a solution. It's a little tricky, but not rocket science. Counters have a particular "scope". When a counter is created its scope is the level at which it was created, and all that level's children. However, where a counter of the same name is created inside the scope of the initial counter, then this is treated as a separate counter, which now takes over the counting. Confusing? Let's take a look at an example, taken from the CSS2 specification.

Here's the style sheet rule that creates the counter

  ol { counter-reset: item }  li { display: block }  li:before { content: counter(item) ". "; counter-increment: item }

And here is the HTML

  <ol>                 <!-- (set item[0] to 0          -->      <li>item         <!--  increment item[0] (= 1)   -->      <li>item         <!--  increment item[0] (= 2)   -->        <ol>           <!--  (set item[1] to 0         -->          <li>item     <!--   increment item[1] (= 1)  -->          <li>item     <!--   increment item[1] (= 2)  -->          <li>item     <!--   increment item[1] (= 3)  -->            <ol>       <!--   (set item[2] to 0        -->              <li>item <!--    increment item[2] (= 1) -->            </ol>      <!--   )                        -->            <ol>       <!--   (set item[3] to 0        -->              <li>     <!--    increment item[3] (= 1) -->            </ol>      <!--   )                        -->          <li>item     <!--   increment item[1] (= 4)  -->        </ol>          <!--  )                         -->      <li>item         <!--  increment item[0] (= 3)   -->      <li>item         <!--  increment item[0] (= 4)   -->    </ol>              <!-- )                          -->    <ol>               <!-- (reset item[4] to 0        -->      <li>item         <!--  increment item[4] (= 1)   -->      <li>item         <!--  increment item[4] (= 2)   -->      </ol>              <!-- )                          -->

Each <ol> "creates" a counter called "item". Every list item inside the <ol> increments the counter, then inserts the number before itself. However, when we get to an <ol> inside another, a new counter called "item" is created. The other ones don't go away, they simply remain unchanged until their scope is again relevant. Note that they all have the same name. You might think this is a recipe for disaster, but there is a good reason for this.

Here's one last string to the counters and content bow. Imagine you want to insert the "full" number for every list item (for example 2.5.1). With the counter function you can only insert the value for one named counter. In this case it would be the value for the counter named item at the level you are currently at. How do we get all of the counters with that name which are relevant at the level we are at? With the counters function. We saw this in the section on content above, but let's revisit it. It has the form counters(identifier, string, list-style), (where the list-style is optional) and it does exactly what we want. It returns every counter in the document relevant at the point it is called, separated by the string you give, in the style specified. What do I mean by "relevant at this point?" Remember that the scope of a counter is inside the element in which it is created, including all of its children. Basically, a counter is relevant inside any of the children of the element which created it.

To cut a long story short, it's as simple as counters(item, ".")

counter-reset

What it does

The counter-reset property sets the value of a named counter.

Possible values

counter-reset takes the name of the counter to reset. Counter names are identifiers, and comprise letters, numerals and hyphens. They cannot, however, begin with numerals or hyphens. It also takes an optional integer, to which it sets the value of the identified counter.

counter-reset can also take a list of identifiers and optional integers, to set the value of several counters simultaneously. This is no mere luxury. Because of cascading, the following will set only the counter named counter2.

h1 { counter-reset: counter1 -1 }

h1 { counter-reset: counter2 99 }

In order to reset both, the following must be used.

h1 { counter-reset: counter1 -1 counter2 99 }

counter-reset can also be set to none.

Default values

If no counter-reset is specified, the default value is none.

Is it inherited?

An element does not inherit the counter-reset property of the element which contains it.

counter-increment

What it does

The counter-increment property increments the value of a named counter by a certain amount.

Possible values

counter-increment takes the name of the counter to increment. Counter names are identifiers, and comprise letters, numerals and hyphens. They cannot, however, begin with numerals or hyphens. It also takes an optional integer, by which it increments the value of the identified counter. If no integer is specified, the counter is incremented by one.

counter-increment can also take a list of identifiers and optional integers, to set the value of several counters simultaneously. This is no mere luxury. Because of cascading, the following will set only the counter named counter2.

h1 { counter-increment: counter1 -1 }

h1 { counter-increment: counter2 99 }

In order to reset both, the following must be used.

h1 { counter-increment: counter1 -1 counter2 99 }

counter-increment can also be set to none.

Default values

If no counter-increment is specified, the default value is none.

Is it inherited?

An element does not inherit the counter-increment property of the element which contains it.

Values in CSS

2008-09-18T21:05:00.010-07:00

A glance at any of the properties sections of this guide will tell you that different properties can have different kinds of value.

You probably don't really need to know all of the following, but we include it for completeness. You might like to treat it as a reference, or read through it now to get an understanding of the basic issues, then refer for more detail when you need to.

The major kinds of value are:

length

percentage

color

url

keyword

shape

Any given property will be able to take some appropriate subset of the values described below. Sometimes they will not be able to take all aspects of a given type of value, for example, not all properties that can take length values can take negative as well as positive length values.

Note that any property can also take the value inherit. This forces a selected element to inherit the given property from its parent, even when that property is not usually inherited.

Length values

Length values can be positive or negative, have a numerical value, and must be followed by a unit of measurement. Note that while length values can be either positive or negative, several properties cannot have negative length units.

There are two basic kinds of length unit, relative and absolute. As a rule of thumb, absolute units should be used only when the physical characteristics of the output device are known. This means that units like points and pixels should be avoided for monitors (because we cannot be sure of the logical resolution (Macintoshes default to 72 dpi, Windows to 96 dpi, or screen sizes). We discuss some implications of this for design and implementation of web pages in our real world CSS section of the guide. As a starting point though, you should try to use relative length values wherever it is at all possible.

It is worth learning a little bit about each of these, as there are benefits and pitfalls in the use of each. The links section of the House of Style has pointers to a number of interesting discussions about the use of different units. A very thorough and useful coverage of these issues is given by Tod Fahrner. This is a must read for those who want to use style sheets correctly. We also discuss the issue of the appropriate use of various units in more detail in our real world CSS section.

Percentage values

Instead of using a unit of measurement many properties can also take percentage values. You'll remember that an element is contained within another element (for example, a <paragraph> will be inside the <body>). Usually percentage values specify a percentage of the parent.

For example, specifying a width property with a percentage value means the width of an element will be the given percentage of the element which contains it. For instance, p {width: 75%} means that paragraphs will be 75% the width of their container. Often this will mean the body element.

Percentages are very valuable with positioning, as when a user resizes their window, the same basic layout can be achieved for the new window size.

The form of a percentage unit is a positive or negative sign (no sign means positive units), followed by a number, followed by the percentage sign: %. For example -25%, +15% or 15%.

Color values

Backgrounds, text and borders can be assigned colors. Color values can be specified in one of three ways:

color keywords

hexadecimal colors

rgb colors

Color keywords

There are 17 color keywords, which have the following values.

These keywords are

aqua (00ffff)

black (000000)

blue (0000ff)

fuchsia (ff00ff)

gray (808080)

green (008000)

lime (00ff00)

maroon (800000)

navy (000080)

olive (808000)

purple (800080)

red (ff0000)

silver (c0c0c0)

orange (ffa500)

teal (008080)

white (ffffff)

yellow (ffff00)

CSS2 introduced 26 keywords for system colors. These specify colors that the user interfaces of various operating systems such as the MacOS or Windows 98 use for drawing objects. These colors are

activeborder Active window border.

activecaption Active window caption.

appworkspace Background color of multiple document interface.

background Desktop background.

buttonface Face color for three-dimensional display elements.

buttonhighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source). Shadow color for three-dimensional display elements.

buttontext Text on push buttons.

captiontext Text in caption, size box, and scroll bar arrow box.

graytext Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.

highlight Item(s) selected in a control.

highlighttext Text of item(s) selected in a control.

inactiveborder Inactive window border.

inactivecaption Inactive window caption.

inactivecaptiontext Color of text in an inactive caption.

infobackground Background color for tooltip controls.

infotext Text color for tooltip controls.

menu Menu background.

menutext Text in menus.

scrollbar Scroll bar gray area.

threeddarkshadow Dark shadow for three-dimensional display elements.

threedface Face color for three-dimensional display elements.

threedhighlight Highlight color for three-dimensional display elements.

threedlightshadow Light color for three-dimensional display elements (for edges facing the light source).

threedshadow Dark shadow for three-dimensional display elements.

window Window background.

windowframe Window frame.

windowtext Text in windows.

Hexadecimal RGB colors

For whatever reason, the original web palette (now sRGB) used hexadecimal numbers (base 16 not base 10 numbers, and if you don't know, don't worry about it) for specifying colors. In short, these RGB colors are specified as a combination of Red Green and Blue. There can be 256 different hues of each color, (from 00 to ff - that's 0 to 255 in human speak).

CSS allows you to specify colors using this method, in the following forms:

1) The # symbol, followed by three hexadecimal numbers in the range 00 to ff. For example, #ffcc11. This is the way HTML developers know how to specify color. In this example, the red value is ff, the green value is cc and the blue value is 11.

2) The # symbol followed by three hexadecimal numbers, this time using a single digit. For example, #fc1. This is the same number as the one in the previous example, not the same as #f0c010.

Decimal RGB colors

Because humans are generally more comfortable counting to base 10 than base 16, CSS lets us use decimal rgb values. The color gamut (the total range of colors) is exactly the same, we are just specifying it in a different way.

There are two forms of this value, a numerical and a percentage form. They are interchangeable.

1) The numerical form of the color value is the following rgb(255, 255, 0). There are three numerical values, in the range from 0 to 255, one each for red, green and blue.

2) The percentage form of the rgb color value replaces the values in the range from 0 to 255 with a percentage value from 0 to 100%. For example, the above value would be written rgb(100%, 100%, 0%).

To recap, the following values are all equivalent:

green

#00ff00

#0f0

rgb(0, 255, 0)

rgb(0%, 100%, 0%)

URL values

Background images and list item images are specified with a URL. This url can be either absolute (that is, the full URL, e.g http://www.westciv.com/gifs/main.gif) or a relative path. But relative to what? If you were to think about it for a moment, you'd realize that it must be relative to the style sheet. Otherwise, the style sheet would only work for web pages in the same directory as it is. The problem is that Netscape Navigator 4.x gets this wrong, and treats the URL as relative to the web page! This is rectified in Netscape 6, but needs to be kept in mind when working with Netscape 4. This bug can actually be used to advantage to "hide" style sheets from Netscape 4, but have them accessible to any other browsers.

URLs have a straightforward form:

url(the url)

So, Absolute URLs are written like this:

url(http://www.westciv.com/gifs/main.gif)

Relative URLs, similarly, are written:

url(../gifs/main.gif)

Keyword values

Many different properties can take keyword values. A keyword value is simply a single word that is translated into a numerical value by a browser. The keywords available for a specific property will be appropriate to that particular property.

Some keyword values are relative (to the parent element). For example

bold and bolder for font-weight

small and smaller for font-size

Shape values

The uncommon shape value (it is only used currently for the clip property, introduced as part of CSS2) defines a shape. At present, there is simply a rectangle shape.

The form of the rectangle shape is:

rect( top left bottom right )

Each of top, left, bottom and right can be either a length value, or the keyword auto. auto means, at least in the clipping context, that the value of this position of the clip is the same as that of the element itself.

This value is probably going to be redefined because it doesn't follow the same basic model as the box model of CSS1, where element positions are defined by a top and left corner, along with a width and a height.

In addition, further shapes are planned.

User interface properties in CSS

Element type properties in CSS

2008-09-18T21:05:00.008-07:00

If you have delved deeply into HTML, you will know that there are a number of different types of element. The main types are inline, block and list item. By default, all elements are one of these types. For example, a paragraph is a block element, while a link is an inline element. With CSS, your style sheet can redefine the display type of an element. So, if you wish, you can make a paragraph display as an inline element, or link display as a block.

In addition, you can specify the display properties for different types of element. For example you can set the type of bullet for a list item.

The element type properties are:

display

white-space

list-style-type

list-style-image

list-style-position

list-style

CSS 2 introduced a number of new properties which control how tables and their captions are drawn.

border-collapse

border-spacing

caption-side

empty-cells

table-layout

display

What it does

If no table-layout is specified, it is treated as being auto.

Is it inherited?

An element does not inherit the table-layout of its parent.

Page layout properties in CSS

2008-09-18T21:05:00.007-07:00

Introduction to positioning with CSS

One of the most significant limitations of HTML has been the inability to lay pages out in the same way they are laid out on paper. It can be possible, although not always, to lay out pages using tables and transparent 1 pixel gifs, but this both violates our principle of separating content from appearance, and is guaranteed to cause maintenance headaches until the end of time, as new browser versions fail to lay out the pages exactly as they worked in older browsers. This method really is something to be avoided, and now that we have page layout properties courtesy of CSS, there really is no excuse for using it.

So how are page layout and style sheets related? The original cascading style sheets recommendation included very little related to page layout. With CSS1

the width and height of an element could be specified

margin and padding could be specified on an element

text-indent could be applied to the first line of an element

float and clear provided the means to create columnar layout (up to a point)

Definitely lacking from this list is the ability to specify where the top or left hand side of an element should be, either relative to where it would otherwise be in the flow of the document, or in relation to the top left hand corner of the page.

To address this lack of positioning, CSS2 provided far more sophisticated positioning properties. We cover all these, as well as some background concepts and terms here.

The big picture

So what is missing from HTML when it comes to page layout? Let's think about desktop publishing for a moment. Software like Quark Express and PageMaker (and even less powerful page layout applications) generally allows the user to take blocks of content (text and or images) and place them directly on a page at any location. Blocks can overlap one another, and the front most block obscures blocks underneath it. With HTML, we can't do these things.

CSS2 provides the ability to do these kinds of "page layout" things.

A note about "layers"

Before we continue, it's best that we address an important source of misunderstanding, namely the idea of layers. Most developers will have heard of layers, and many will have developed some erroneous ideas about them. Let's try to clarify matters a little.

In the simple sense, there is no such thing as a layer. In a more complex sense, a layer is a metaphor, but layers themselves don't exist. But if you include Netscape's proprietary extensions to HTML, then yes Virginia, there is such a thing as a layer. Let me try and explain all this mess.

When we use the term layer, we generally mean an HTML container (or element) that can be placed at some specific location on a web page. Applications such as DreamWeaver use the term in this way. The first confusion that arises about layers in this sense is that it's often thought that a layer is a div and can only be a div . This isn't so. A layer in the sense of an HTML element placed somewhere on a web page can be any kind of element (a paragraph, a list item, whatever). Well at least in theory. In practice, Netscape Navigator 4 will let you position paragraphs and some other elements using CSS2, while Internet Explorer 4 and 5 really does think that a layer is a div. But more of this later.

So, hopefully we've cleared up the first and second causes of uncertainty. There is no such thing as a layer HTML element, rather, layer is a term for any HTML element that is positioned on a web page using CSS2.

However, if you take Netscape's word for it, there is such a thing as an HTML layer, namely the <layer> element. This was a Netscape extension to HTML, that has never been adopted by Internet Explorer, and is certainly not recommended HTML. Simply ignore it, and it should go away. Indeed it has already done so, as Netscape 6 does not support this element.

Having hopefully cleared up these possible stumbling blocks, let's get down to understanding how positioning works.

And <div>s?

The <div> is the generic block element. You can place other elements such as <paragraph>s inside <div>s, and then the whole block can easily be positioned on the page. But just because you use a <div> does not mean you have to give this <div> position properties at all. And, on the other hand, you don't need to use a <div> in order to use positioning - you can use positioning for any HTML element. Note though that some older browsers only supported positioning properties when they were applied to the <div> element.

Ways of positioning

The CSS2 recommendation provides a model for how elements can be positioned. Essentially there are four different ways in which an element can be positioned on a page, with a couple of complicating factors.

Static positioning

Static positioning is easy. It's how pages are already laid out by a web browser. A web browser takes an HTML file, parses it into its elements, applies style from a style sheet (or if there is none, from a default style sheet) and then "flows" the elements onto the page. The position that an element, say a paragraph, has in this flow is its static position. We'll need to remember static positioning when we get to relative positioning below.

Absolute positioning

Absolute position is what we are all so excited about. In a nutshell, it lets a developer say where the top left hand corner of an element should be located with respect to its parent element. It is not with respect to the window. Don't get absolute positioning confused with relative positioning, which we'll look at below.

Fixed positioning

Fixed position is closely related to absolute position. When an element is absolutely positioned, it's positioned with respect to the element which contains it. When the page is scrolled, the element also scrolls. Wouldn't it be nice if we could position elements with respect to the top of the window, so that regardless of how the page is scrolled, the elements remain fixed? You guessed it, fixed positioning provides precisely this feature. With fixed positioning and the <object> element in HTML 4, we can do away with frames forever, yet gain all the advantages, with none of the disadvantages of the FRAME construct.

Relative positioning

Relative positioning is probably a little unfortunately named. Positioning relative to what? A lot of people jump to the conclusion that relative positioning is when you specify a position with respect to the parent element, and absolute positioning is when the position is specified with respect to the top left hand corner of the page. But as we have just seen, this is not how it works at all.

OK, so what is relative? In essence, relative positioning places an element with respect to where it would statically be positioned. When you relatively position an element, as a developer you are saying to a browser: "hey, take this paragraph, and put it 10 pixels down and 10 pixels to the right of where it would normally be."

There is another complicating factor. What if we have a relatively positioned parent element, with an absolutely positioned child element? By analogy with absolute positioning you'll probably guess that the absolutely positioned child element will be placed with respect to the top left hand corner of the parent element.

The issue of positioning isn't particularly difficult, I trust, but it is a bit tricky. I hope this irons out the issue of the different kinds of positioning available in CSS2. Below we'll look at how to put these into practice.

Positioning enables very sophisticated page layout, but as with any powerful technology, it is complicated at times.

The page layout properties are:

position

top

left

bottom

right

width

min-width

max-width

height

min-height

max-height

z-index

visibility

overflow

float

clear

clip

position

What it does

If you want to position an element you have to specify not just a set of coordinates that say where you want it to be, you also have to specify what these coordinates are with respect to. The position property is used to determine what the coordinates are with respect to, or how the element will be drawn. The actual position (the where) is specified using the top, left, bottom and right properties which we cover below.

Possible values

Elements can be positioned in one of four ways: statically, relatively absolutely or fixed. The value is specified by one of four keywords: static, relative, absolute and fixed.

These values are explained in detail above, but to recap:

When the position of an element is static, the browser will draw the element in the usual place. Essentially, this is the traditional positioning used with HTML.

When the position of an element is relative, it is placed with respect to its natural position, that is, with respect to where it would be if statically positioned.

For example, with a relative position, a top of 20px and a left of 20px (we'll look at the top and left properties very shortly), an element is placed 20px to the right and 20px down from where it would naturally, or statically be located.

With absolute positioning, an element is placed in a specified location with respect to its parent element. If the parent element is the <body>, the location of the element may appear to be with respect to the window. However, when the page is scrolled it should be apparent that it is not: the element will move so it is no longer (for example) 20px from the top of the window. However, it is in fact still 20px from the top of the <body>.

fixed positioning is different. Here the element really is positioned with respect to the window. This means if the page is scrolled, the element remains onscreen, fixed with respect to the top and left of the window.

Applications like Dreamweaver and GoLive create <div>s with absolute positioning, plus values for top and left, width and height, to build page layout. This is because, as you'll see in the browser support information on this page, for a long time this was the only way you could use CSS positioning and expect support in even the most recent browsers. The level of support, however, has improved.

Default values

When no position property is specified, an element has a static position.

Is it inherited?

An element does not inherit the position property of its parent.

Hints and suggestions

Take some time to consider the differences between the different types of positioning.

top

What it does

The top property specifies where the top of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

top is an offset from either

the top edge of the natural location of the element (for position: relative)

the top of the parent element (for position: absolute)

the top of the window (for position: fixed)

See position above for more on what the individual values mean.

Negative top values move an element up the page, positive top values move the element down the page.

For elements with a position: static, top has no effect.

Possible values

The top of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When the top is specified using a length value, the element is offset up or down the page with respect to a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When top is specified as a percentage value, the element is offset up or down the page by this percentage of the height of its parent element.

We cover percentage values in detail in our section on values.

Auto

A top of auto places the element with no offset up or down the page.

Default values

If no top is specified, the top of the element is auto.

Is it inherited?

An element does not inherit the top of its parent, however, an element may be affected by the positioning of its parent element.

Hints and suggestions

top specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

left

What it does

The left property specifies where the left of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

left is an offset from either

the left edge of the natural location of the element (for position: relative)

the left of the page or the left of the parent element (for position: absolute)

the left of the window (for position: fixed)

See position above for more on what the individual values mean.

Negative left values move an element leftwards along the page, positive left values move the element rightwards.

For elements with position: static, left has no effect.

Possible values

The left of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When left is specified using a length value, the element is offset to the left or to the right along the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When left is specified as a percentage value, the element is offset to the left or to the right along the page by this percentage of the width of its parent element.

We cover percentage values in detail in our section on values.

Auto

A left of auto places the element with no offset leftwards or rightwards on the page.

Default values

If no left is specified, the left of the element is auto.

Is it inherited?

An element does not inherit the left of its parent. However, the left of an element can be affected by the position of its parent.

Hints and suggestions

left specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

bottom

What it does

The bottom property specifies where the bottom edge of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

bottom is an offset from either

the bottom edge of the natural location of the element (for position: relative)

the bottom of the parent element (for position: absolute)

the bottom of the window (for position: fixed)

See position above for more on what the individual values mean.

For elements with a position: static, bottom has no effect.

Possible values

The top of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When the top is specified using a length value, the element is offset up or down the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When bottom is specified as a percentage value, the bottom edge of an element is offset up or down the page by this percentage of the height of its parent element.

We cover percentage values in detail in our section on values.

Auto

A bottom of auto places the element with no offset up or down the page.

Default values

If no bottom is specified, the bottom of the element is auto.

Is it inherited?

An element does not inherit the bottom of its parent.

Hints and suggestions

bottom specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

right

What it does

The right property specifies where the right edge of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

right is an offset from either

the right edge of the natural location of the element (for position: relative)

the right of the parent element (for position: absolute)

the right of the window (for position: fixed)

See position above for more on what the individual values mean.

For elements with a position: static, right has no effect.

Possible values

The right of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When right is specified using a length value, the right edge of the element is offset to the left or to the right along the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When right is specified as a percentage value, the right edge of the element is offset to the left or to the right along the page by this percentage of the width of its parent element.

We cover percentage values in detail in our section on values.

Auto

A right of auto places the right edge of an element with no offset leftwards or rightwards on the page.

Default values

If no right is specified, the right of the element is auto.

Is it inherited?

An element does not inherit the right of its parent.

Hints and suggestions

right specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

width

What it does

Not surprisingly, this property specifies how wide an element will appear on the page.

Possible values

Padding properties in CSS

2008-09-18T21:05:00.006-07:00

With cascading style sheets, any element can have padding. Padding is the space between the edge of an element (its border) and its contents. There can be padding to the left, top, bottom and right of any element. The padding properties are:

padding

padding-top

padding-left

padding-bottom

padding-right

padding, padding-top, padding-left, padding-bottom, padding-right

What it does

The padding properties set the size of the top, left, bottom, right and all paddings respectively.

Possible values

Padding can be specified as either a percentage, a length or using the keyword auto.

Padding can not take negative values. If you want to do this, you probably should be using the margin properties.

Percentages

A percentage padding value sets the affected padding to that percentage of the width of the parent element. For instance, a padding-right: 20% sets the width of the right padding to 20% of the width of the element which contains the element. This is true even for padding-top and padding-bottom.

Length values

We cover length values in detail in our section on values. Essentially though there are two types of length value. There are absolute values such as px. If you use one of these, the actual length of the padding will always be the same. You design much more flexible pages if you use a relative value, like em. If you use a relative value the size of the padding will always be proportional to the calculated size of the content of the element. This is to be encouraged.

Default values

If no padding value is specified, the padding of an element is 0. That is, there is no space between the edge of an element and the contents of the element.

Is it inherited?

An element does not inherit the padding property of the element which contains it.

Hints and suggestions

Padding can be used to achieve similar effects to the positioning properties and margins.

Margin properties in CSS

2008-09-18T21:05:00.005-07:00

With cascading style sheets, any element can have a margin. A margin is the space between an element and the elements to its top, left, bottom and right. The margin properties are:

margin

margin-top

margin-left

margin-bottom

margin-right

margin, margin-top, margin-left, margin-bottom, margin-right

What it does

The margin properties set the size of the top, left, bottom, right and all margins respectively.

Possible values

Margins can be specified as either a percentage, a length or using the keyword auto.

Margins can be negative values.

Percentages

A percentage margin value sets the affected margin to that percentage of the width of the parent element. For instance, a margin-right: 20% sets the width of the right margin to 20% of the width of the element which contains the element. Note that this is true even for margin-top and margin-bottom.

Length Values

We cover length values in detail in our section on values. Essentially though there are two types of length value. There are absolute values such as px. If you use one of these, the actual length of the margin will always be the same. You design much more flexible pages if you use a relative value, like em. If you use a relative value the size of the margin will always be proportional to the calculated size of the content of the element. This is to be encouraged.

Default values

If no margin value is specified, the margin of an element is zero. That is, there is no space between an element and adjacent elements. Unfortunately most browsers do tend to set default margins on elements such as paragraphs. You can overcome this by specifically setting the margin for these types of element to 0.

Is it inherited?

An element does not inherit the margin property of the element which contains it.

Hints and suggestions

Margins can be used to achieve similar effects to the positioning properties which we discuss below and padding (we talk about padding next).

You can center an element in its parent, without using text-align on the parent element by giving the element a left-margin and a right-margin of auto.

Using percentage values for your margins is highly recommended for the design of flexible, accessible web pages. A percentage value for a margin ensures that the actual drawn size of the margin will always remain proportional to the size of the viewing portal.

Border properties in CSS

2008-09-18T21:05:00.004-07:00

The default values of each type of property are discussed in the relevant sections above.

Is it inherited?

None of the border values of a parent element are inherited by child elements.

Hints and suggestions

Keep in mind that not all styles are supported by each browser, nor do all browsers fully support different values on different edges of each border.

Background properties in CSS

Pairs of keywords and individual keywords

Rather than relying on length values, or percentage values, keyword values can be used. Keywords have a similar effect to percentages.

The keywords which can be used to specify position are

top

left

center

right

bottom

Rather than go into laborious detail, here is the explanation from the recommendation

'top left' and 'left top' both mean the same as '0% 0%'.

'top', 'top center' and 'center top' mean the same as '50% 0%'.

'right top' and 'top right' mean the same as '100% 0%'.

'left', 'left center' and 'center left' mean the same as '0% 50%'.

'center' and 'center center' mean the same as '50% 50%'.

'right', 'right center' and 'center right' mean the same as '100% 50%'.

'bottom left' and 'left bottom' mean the same as '0% 100%'.

'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.

'bottom right' and 'right bottom' mean the same as '100% 100%'.

Default values

If no background-position is specified, this is the equivalent of a background-position of 0% 0%, that is, the top left of the background image is placed in the top left of the element.

Is it inherited?

An element does not inherit the background-position of its parent.

Hints and suggestions

The background-position property lets you create watermark effects by placing a single image in the center of an element, for example in the center of a page. It is a tricky, but powerful property.

Not every type of element can have a background-position, even though any type of element can have a background-image. Only block elements and replaced elements can have this property. For more on the different types of element, see Types of Element.

background

background is a shorthand property that lets you set any or all background properties at once.

The background property takes exactly the same types of values as the properties described in this section. To specify more than one property using the background shorthand, the various background values are separated simply by spaces.

As a simple example, this background property

background: url(http://www.westciv.com/gifs/bg1.gif) fixed no-repeat top center

is the equivalent of

background-image:url(http://www.westciv.com/gifs/bg1.gif);

background-attachment: fixed;

background-repeat: no-repeat;

background-position: top center;