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