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; }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s