Best CSS Directories or Galleries

You can also submit your site to 150+ CSS Directories to showcase. Here are the two sites who does this job for you.
1. Easy CSS Gallery List
2. CSS Galleries Submission Helper

New Properties of CSS3



1. border-color
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

2. border-image

3. border-radius
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;

4. box-shadow
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;


1. background-origin and background-clip
-webkit-background-origin / -moz-background-origin
-webkit-background-clip / -moz-background-clip

2. background-size

3. layering multiple background images
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;


1. HSL colors
<div style=”background-color: hsl(0,100%, 50%);”> </div>
<div style=”background-color: hsl(120,100%, 50%);”> </div>
<div style=”background-color: hsl(240,100%, 50%);”> </div>

2. HSLA colors
<div style=”background-color: hsla(0,100%,50%,0.2);”> </div>
<div style=”background-color: hsla(0,100%,50%,0.4);”> </div>
<div style=”background-color: hsla(0,100%,50%,0.6);”> </div>
<div style=”background-color: hsla(0,100%,50%,0.8);”> </div>
<div style=”background-color: hsla(0,100%,50%,1);”> </div>

3. RGBA colors
<div style=”background: rgba(255, 0, 0, 0.2);” > </div>
<div style=”background: rgba(255, 0, 0, 0.4);” > </div>
<div style=”background: rgba(255, 0, 0, 0.6);” > </div>
<div style=”background: rgba(255, 0, 0, 0.8);” > </div>
<div style=”background: rgba(255, 0, 0, 1) ;” > </div>

4. opacity
<div style=” background: rgb(255, 0, 0) ; opacity: 0.2;“ > </div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.4;“ > </div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.6;“ > </div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.8;“ > </div>
<div style=” background: rgb(255, 0, 0) ; opacity: 1;“ > </div>


1. text-shadow
text-shadow: 2px 2px 2px #000;

2. text-overflow
text-overflow: ellipsis-word;

3. word-wrap


1. box-sizing

2. resize
resize: both;

3. outline
outline: 2px solid blue;

4. nav-top, nav-right, nav-left ,nav-bottom


1. attribute selectors
p[title^=”ho”] {background: green;}

Basic box model

1. Overflow-x
2. Overflow-y

Generated Content

1. content


1. media queries
@media all and (min-width: 640px) {
#media-queries-1 { background-color: #0f0; }

@media screen and (max-width: 2000px) {
#media-queries-2 { background-color: #0f0; }

2. multiple column layout
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

3. Web fonts
@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);

@font-face {
font-family: Delicious;
font-weight: bold;
src: url(‘Delicious-Bold.otf’);
h3 { font-family: Delicious, sans-serif; }

4. speech
#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; }
#voice-balance { -xv-voice-balance: left; }
#speech-cue { cue-after: url(ding.wav); }
#voice-rate { -xv-voice-rate: x-slow; }
#voice-family { voice-family: female; }
#voice-pitch { -xv-voice-pitch: x-low; }
#speech-speak { speak: spell-out; }

CSS3: Ready to hit

CSS3 offers a variety of new ways to create an impact with your designs, with quite a few important changes. The development of CSS3 is going to be split up into ‘modules’. The old requirement was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:

1. The Box Model
2. Lists Module
3. Hyperlink Presentation
4. Speech Module
5. Backgrounds and Borders
6. Text Effects
7. Multi-Column Layout

Several of the modules have now been finished, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon. It is very difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to. New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted. It will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2. The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and get present design features in a much easier way (e.g. using columns).

Using Web Standards in Web Pages

WWW is a common space where users can share information to work together, play, and socialize. But in this period of tremendous growth, the Web needs guidance to realize its full potential. Web standards provide the necessary guidance and help to ensure that everyone has access to the information we are providing, and also make web development faster and more enjoyable.

Standards compliance makes it easier for the people with special needs to utilize the Web to its fullest. Blind people may have their computer read web pages to them. People with poor eyesight may have pages rearranged and magnified for easier reading. And people using hand-held devices can browse the Web just as easily as those using high-end workstations.

W3C standards

HTML 4.0 – HyperText Markup Language
XML 1.0 – Extensible Markup Language
XHTML 1.0, 1.1, and Modularization
CSS – Cascading Style Sheets
DOM 1 – Document Object Model Level 1

HTML/XHTML as a standard

HTML has evolved during its development, and is available in several versions. All of these versions are standards, and you can select one that meets your requirement. Most of the time, the latest version will be the best choice, unless you target a very specific audience, or older, broken browsers. The version you choose defines the elements and attributes you can use.

For example, in HTML 4.01, you will find the list of elements and the list of attributes you are allowed to use in your pages. You can edit your pages manually, a means usually referred to as “hand-coding” or “writing the source”.

List of elements:

List of attributes

Advantages of Using Web Standards:

  1. Greater visibility in web searches.
  2. Gives opportunity of validating your page with a validation service.
  3. Compliant documents can easily be migrated for devices such as TVs and PDAs.
  4. Enables Kids to enjoy the web surfing using graphical browsers used to enhance high-end graphics and animations views.
  5. Enables people with disabilities (using Braille or voice browsers) to browse the Internet with ease.
  6. Compatibility with the future browsers.
  7. Cross browser compatibility.

Cascading Style Sheets 2.0

CSS2 builds on CSS1, integrating several intermediate CSS syntax proposals (Aural CSS, printing and positioning extensions) aiming for full backward compatibility, which it comes close to achieving. CSS2 still somehow manages to introduce radical new rendering capabilities as well. As use of web documents becomes ubiquitous, alternate rendering paradigms have proliferated (and are expected to increase in usage.) CSS2 allows the author to tailor their pages to these different rendering modes (such as Braille, handheld devices, printers, and aural devices.)

Other changes from CSS1:

  1. Did we mention the new media capabilities? They are really cool.
  2. A complex visual rendering mechanism, including the concept of Absolute and Relative positioning of elements.
  3. Powerful mechanisms for specifying font characteristics for improved matching.
  4. A vastly improved Selector specification system now exists, allowing a finer granularity of document specificity while also generalizing the syntax for non-HTML languages.
  5. Properties and rules controlling International features.
  6. New properties allowing control over cursors, outlines, and table display.
  7. Automatically generated content capabilities.