CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
CSS3 transitions are effects that let an element gradually change from one style to another.

Shorthand:
transition: property_name duration timing_function delay;

To do this, you must specify two things:

• Specify the CSS property you want to add an effect to
• Specify the duration of the effect

Transition effect on the width property, duration: 2 seconds:

.moduleDefault {
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 and above */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

Note: If the duration is not specified, the transition will have no effect, because default value is 0.

The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

.moduleDefault:hover {
width: 300px;
}

Multiple changes:
You can also add a transitional effect for more than one style, add more properties, separated by commas.

Add effects on the width, height, and the transformation:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Note: These properties are not supported in IE

CSS3 – Substring matching attribute selectors

[att^=val] : Represents an element with the att attribute whose value begins with the prefix “val”.

[att$=val] : Represents an element with the att attribute whose value ends with the suffix “val”.

[att*=val] : Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.

Assume that we have an HTML document that contains the following markup structure:
<div id=”nav-primary”></div>
<div id=”content-primary”></div>
<div id=”content-secondary”></div>
<div id=”tertiary-content”></div>
<div id=”nav-secondary”></div>

By using the substring matching attribute selectors we can target combinations of these structural parts of the document.

The following rule will set the background colour of all div elements whose id begins with “nav”:
div[id^=”nav”] { background:#ff0; }

In this case the selector will match div#nav-primary and div#nav-secondary.

To target the div elements whose id ends with “primary”, we could use the following rule:
div[id$=”primary”] { background:#ff0; }

This time the selector will match div#nav-primary and div#content-primary.

The following rule will apply to all div elements whose id contain the substring “content”:
div[id*=”content”] { background:#ff0; }

The elements that will be affected by this rule are div#content-primary, div#content-secondary, and div#tertiary-content.

The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Chrome, Firefox, Safari and Opera.

Reference: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Best CSS Directories or Galleries

www.cssbeauty.com
www.cssdrive.com
www.stylegala.com
www.cssmania.com
www.cssremix.com
www.cssvault.com
www.bestwebgallery.com
www.csselite.com
www.screenalicious.com
www.unmatchedstyle.com
www.designlinkdatabase.net
www.screenfluent.com
www.designsnack.com
www.cssheaven.com
www.cssimport.com
www.cssglobe.com
www.cssreboot.com
www.mostinspired.com
www.thebestdesigns.com
www.cssbloom.com
www.csscollection.com
www.csstux.com
www.cssbased.com
www.css-website.com
www.designshack.co.uk
www.ceeses.com
www.cssclip.com
www.my3w.org
www.csshazard.com
www.artnetz.de
www.css-design-yorkshire.com
www.css11.com
www.cssimpress.com
www.e-motionaldesign.com
www.cssprincess.com
www.cssgaleri.com
www.cssblast.ru
www.creative-pakistan.com
www.netzfruehling.de
www.najdizajn.com
www.edustyle.net
www.csssmoothoperator.com
www.coolsitecollection.com
www.cssgalaxy.com
www.per.fectio.net
www.cssflavor.com
www.onepixelarmy.com
www.piepmatzel.de
www.cssbrain.hu
www.w3c-compliance.com
www.stylegrind.com
www.submitcss.com
www.cssgallery.ro
www.cssgreen.com
www.csszengarden.com
www.webcreme.com
www.prowebart.net
www.designexpanse.com
www.csssnap.com
www.menthe-fresh.fr
www.csscoosite.com
www.csscool.cn
www.csstown.com
www.cssleak.com
www.divinecss.com
www.cssloggia.com
www.cssstyle.me
www.cssperk.com
www.cssgallery.com
www.cssshowcases.com
www.cssglance.com
www.cssmix.nl
www.css-design.fr
www.designawardsgallery.com
www.addesignlink.com
www.cssfreshblend.com
www.cssenvy.com
www.nicestylesheet.com
www.wowcss.com
www.css-imagine.com
www.cssfights.com
www.cssluxury.com
www.cssdepot.com
www.csswebsites.nl
www.cssarts.com
www.csscutie.com
www.cssdance.com
www.csskid.com
www.cssbay.com
www.wooki.es
www.beautiful2.com
www.swellcss.com
www.noonewebdesign.com
www.cssvote.com
www.pixelcss.es

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 – http://www.thecssgallerylist.com
2. CSS Galleries Submission Helper – http://www.meecss.com

New Properties of CSS3

 

Borders

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
border-top-image
border-right-image
border-bottom-image
border-left-image
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-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;

Backgrounds

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

2. background-size
-o-background-size
-webkit-background-size
-khtml-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;

Color

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>

Text

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

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

3. word-wrap
word-wrap:break-word;

User-Interface

1. box-sizing
box-sizing:border-box;
-moz-box-sizing:border-box;

2. resize
resize: both;

3. outline
outline: 2px solid blue;

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

Selectors

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

Basic box model

1. Overflow-x
2. Overflow-y

Generated Content

1. content

Format

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).