CSS3 Series Tutorials

Source: Internet
Author: User

First, prefix:
-moz (e.g.-moz-border-radius) for Firefox
-webkit (for example:-webkit-border-radius) for Safari and Chrome.

Second, CSS3 fillet (All)
-moz-border-radius:15px;
-webkit-border-radius:15px;

Three, CSS3 fillet (individual)
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:15px;

Four, the border color in CSS3:
Using the CSS3 Border-radius property, if you set the border width to x px,
Then you can use the X color on this border, each color shows the width of 1px.
If the width of your border is 10 pixels, but only 5 or 6 colors are declared, the last color will be added to the remaining width.

Currently only Firefox supports the CSS3 border-colour attribute, so we only need to use the-MOZ prefix here.


-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;

V. Shadows
It's been around since CSS2, but only Safari has a browser that supports it, and that's still the case now.
CSS3 's Box-shadow and Textshadow can be written: box-shadow:apx Bpx Cpx #xxx;
Apx = x-Axis
Bpx = y-Axis
Cpx = projection length
#XXX = like the usual color

#boxShadow {
border:5px solid #111;
-webkit-box-shadow:5px 5px 7px #999;
-webkit-border-bottom-right-radius:15px;
padding:15px 25px;
Height:inherit;
width:590px;
}

Six, simple text shadow
. textshadowsingle {
Font-size:3.2em;
Color: #F5F5F5;
text-shadow:3px 3px 7px #111;
Text-align:center;
}

Seven, multiple text shadow:
. textshadowmultiple {
Font-size:3.2em;
Color: #FFF;
text-shadow:0px-11px 10px #C60, 0px-3px 9px #FF0;
Text-align:center;
padding:10px 0px 5px 0px;
Background: #151515;
}

Viii. Background Images/textures
CSS3 background image size can be written as background-size:apx Bpx;
-APX = x-axis (picture width)
-bpx = y-axis (picture height)

Browsers that best support CSS3 background size are safari and opera, so we only need to use the-O and-webkit prefixes.  
#backgroundSize {
border:5px solid #bd9ec4;
Background:url (image_1.extention) bottom right no-repeat;
-o-background-size:150px 250px;
-webkit-background-size:150px 250px;
padding:15px 25px;
Height:inherit;
width:590px;
}
nine, multi-background picture
Background:url (image_1.extention) Top right no-repeat, url (image_2.extention) bottom right no-repeat;  
#backgroundMultiple {
border:5px solid #9e9aab;
Background:url (image_1.extention) top left no-repeat,
URL (image_2.extention) bottom left no-repeat,
URL (image_ 3.extention) bottom right no-repeat;
padding:15px 25px;
Height:inherit;
width:590px;
}

Ten, CSS3 Multi-column (width)
#multiColumnWidth {
text-align:justify;
-moz-column-width:20em;
-moz-column-gap:2em;
-webkit-column-width:20em;
-webkit-column-gap:2em;
}
Xi. CSS3 Multiple columns (number of columns)
#multiColumnCount {
text-align:justify;
-moz-column-count:3;
-moz-column-gap:1.5em;
-moz-column-rule:1px solid #dedede;
-webkit-column-count:3;
-webkit-column-gap:1.5em;
-webkit-column-rule:1px solid #dedede;
}


12. CSS3 Embedded Fonts
@font-face {
Font-family:qianduannet;
Src:url ("Sketchrockwell.ttf");
}
. fontface{
Font-family:qianduannet;
Font-size:3.2em;
letter-spacing:1px;
Text-align:center;
}

13, CSS3 Transparent (example 1: layer)
Div.opacityl1 {background: #036; opacity:0.2; width:575px; height:20px;}
Div.opacityl2 {background: #036; opacity:0.4; width:575px; height:20px;}
Div.opacityl3 {background: #036; opacity:0.6; width:575px; height:20px;}
Div.opacityl4 {background: #036; opacity:0.8; width:575px; height:20px;}
Div.opacityl5 {background: #036; opacity:1.0; width:575px; height:20px;}
14, CSS3 RGBA color
Div.rgbal1 {Background:rgba (153, 134, 117, 0.2); height:20px;}
Div.rgbal2 {Background:rgba (153, 134, 117, 0.4); height:20px;}
Div.rgbal3 {Background:rgba (153, 134, 117, 0.6); height:20px;}
Div.rgbal4 {Background:rgba (153, 134, 117, 0.8); height:20px;}
DIV.RGBAL5 {Background:rgba (153, 134, 117, 1.0); height:20px;}

The

15, CSS3 HSL
HSL declaration uses Hue Hue (H), saturation saturation (s), and luminance lightness (L) to set the color. The
hue is derived from the color dial: 0 and 360 are red, close to 120 is green, and 240 is blue. The
Saturation value is a percentage: 0% is grayscale, 100% saturation is the highest
lightness value is also a percentage: 0% is the darkest, 50% mean, and 100% brightest.
Div.hsll1 {BACKGROUND:HSL (100%, 50%); height:20px;}
Div.hsll2 {BACKGROUND:HSL (50%, 50%); height:20px;}
Div.hsll3 {BACKGROUND:HSL (100%, 75%); height:20px;}
Div.hsll4 {BACKGROUND:HSL (202, 100%, 50%); height:20px;}
Div.hsll5 {BACKGROUND:HSL (202, 50%, 50%); height:20px;}
Div.hsll6 {BACKGROUND:HSL (202, 100%, 75%); height:20px;}
16, CSS3 HSLA
Div.hslal1 {background:hsla (165, 35%, 50%, 0.2); height:20px;}
Div.hslal2 {background:hsla (165, 35%, 50%, 0.4); height:20px;}
Div.hslal3 {background:hsla (165, 35%, 50%, 0.6); height:20px;}
Div.hslal4 {background:hsla (165, 35%, 50%, 0.8); height:20px;}
Div.hslal5 {background:hsla (165, 35%, 50%, 1.0); height:20px;}

Http://www.blueidea.com/tech/web/2009/6460.asp

CSS3 Series Tutorials

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.