CSS3 er virkelig begyndt at samle momentum med mange af de kommandoer, der er skitseret i CSS3 arbejder udkastet understøttes af Firefox, Safari og Google Chrome. Vi troede, vi havde samlet nogle af vores favoritter. Før vi går i gang CSS3 kommandoer kræver browser specifik syntaks for dem at arbejde.

For Mozilla Firefox vi nødt til at bruge de-moz-præfiks, for eksempel:

-Moz-border-radius:

Og for Safari-WebKit-præfiks, for eksempel:

-WebKit-border-radius:

1. Border radius

Den CSS3 grænsen radius kommandoen opretter buede hjørner på et element. I stedet for at bruge 4 eller flere billeder for at skabe buede hjørner bruge følgende kommandoer:

/ * Til Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * Til Safari & Google Chrome * /
-WebKit-border-radius: 20px;
}

2. Box skygge

En skygge kan anvendes på elementer ved hjælp af CSS3 kassen skyggen kommando. Boksen skyggen accepterer tre numeriske værdier plus en farve for at anvende denne effekt. Disse numre er:

1. Afstand af horisontal forskydning af skyggen - En positiv værdi betyder, at skyggen vil kaste til højre og en negativ værdi til venstre
2. Afstand af lodret forskydning af skyggen - En positiv værdi betyder, at skyggen vil kaste nedenfor og en negativ værdi over
3. Hvordan uskarpe du gerne vil skyggen

Med tilføjelsen af ​​en farve værdi skygge er komplet:

/ * Til Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Til Safari & Google Chrome * /
-WebKit-box-shadow: 5x 5px 5px # b6ebf7;

3. Gennemsigtighed eller RGBA

Åbenhed har altid været svært. Forskellige browsere historisk har anvendt gennemsigtighed ved hjælp af forskellige kommandoer. Fortsat denne cross-browser inkonsistens vi har tilføjelsen af ​​nye CSS3 RGBA baggrund ejendom, dog i princippet denne kommando er mere logisk. Kommandoen består af 4 værdier - den første, anden og tredje er de røde, grønne og blå værdier (0-255) henholdsvis efterfulgt af alpha kanal eller gennemsigtighed (0-1).

For RGBA kommandoen browseren specifikke præfikser (-moz-,-WebKit-) er ikke påkrævet:

# Boks 3 {
background-color: RGBA (110, 142, 185, .5);
}

Baggrundsfarven kommando tilføjer en flot blå-grå baggrund på 0,5 eller 50% opacitet i browsere, der forstår CSS3 RGBA ejendom.

Desværre Internet Explorer vil også forsøge at gøre baggrundsfarven kommandoen, men ikke forstår RGBA. For at sikre, at baggrundsfarven også er sat i IE en IE-only hack er påkrævet. I det følgende eksempel: sidste barn pseudo Selector, som Internet Explorer ikke forstår bliver brugt til at udelukke den.

krop: sidste barn # boks 3 {
/ * Ekskluder alle IE browsere bruger: sidste barn * /
background-color:! RGBA (110, 142, 185, .5) vigtige;
}

4. Kolonner

Evnen til at tilføje kolonner er blevet tilføjet til CSS3. I stedet for flydende elementer inden for containere vi kan sætte kolonnen antal, bredde og reglen:

/ * Til Mozilla Firefox * /
-Moz-kolonne-tæller: 2;
-Moz-kolonne-kløften: 20px;
-Moz-kolonne-reglen: 1px solid # 6e8eb9;

/ * Til Safari & Google Chrome * /
-WebKit-kolonne-tæller: 2;
-WebKit-kolonne-kløften: 20px;
-WebKit-kolonne-reglen: 1px solid # 6e8eb9;
}

5. Flere baggrundsbilleder

Baggrund billedsprog har altid været restriktiv, når det kommer til CSS skyldes, at du kun kan anvende én baggrundsbillede pr element. Dette er ikke tilfældet med CSS3, der tillader flere billeder pr element ved simpelthen komma-adskiller dem.

For at placere et billede på både venstre og højre for et element, kan du bruge følgende kommandoer, med lidt styling:

padding: 0 20px;
}

Denne kommando vil blive mis-afsagt af Internet Explorer, da den ikke acceptere 2 baggrundsbilleder på et enkelt element. En udelukke alle IE hack er påkrævet.

# Box5 blockquote {
/ * For alle browsere, blot et åbent tilbud * /
Baggrund: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

krop: sidste barn # box5 blockquote {
/ * Ekskluder alle IE browsere bruger: sidste barn * /
/ * Så de to billeder * /
Baggrund: url (/ i / quotel.gif) ikke-repeat 0 0, url (/ i / quoter.gif) ikke-repeat 100% 0;
}

6. Baggrund gradienter

CSS3 baggrund gradienter er yderst fleksibel og kan bruges til at skabe komplekse mønstre. På sin simpleste CSS lineær gradient giver en gradient der skal anvendes på et element fra top til bund og venstre mod højre.

Dette eksempel på en CSS3 gradient i Mozilla Firefox anvender en lyseblå gradient i bunden af ​​en kasse for kun 20% af kasserne 'højde

Safari bruger en mindre intuitiv, men mere fleksibel tilgang med farvestop værdier. Et eksempel på Safari-specifik kode følger (bemærk den lineære indgår i parentes i stedet for udendørs):

# Box8 {
Baggrund:-WebKit-gradient (lineær, nederst til venstre, øverst til venstre, farve-stop (0, # b6ebf7), farve-stop (0,20, # fff));
}

7. Rotation

CSS3 giver også mulighed for rotation af elementer ved hjælp af transformere kommandoen, med den rotere ejendom acceptere grader som en parameter.

<code> # box9 {
-Moz-transform: rotere (2deg);
-WebKit-transform: rotere (2deg);
} </ Code>

8. Konturer

Outilines indgår i CSS3 specifikation og giver både en grænse og en skitse, der skal anvendes til et enkelt element.

Skitsen ejendom er identisk med grænsen kommandoen. Den yderligere offset ejendom dog tillader grænsen skal flyttes yderligere inden for eller uden for elementet.

Filed under: Css af admin