CSS3 er virkelig begynner å samle fart med mange av de kommandoene som er skissert i CSS3 arbeide utkast støttes av Firefox, Safari og Google Chrome. Vi tenkte vi skulle sette sammen noen av våre favoritter. Før vi komme i gang CSS3 kommandoer krever nettleser-spesifikk syntaks for dem å arbeide.

For Mozilla Firefox må vi bruke den-moz-prefiks, for eksempel:

-Moz-border-radius:

Og for Safari-WebKit-prefiks, for eksempel:

-WebKit-border-radius:

1. Border radius

I CSS3 grensen radius kommandoen oppretter buede hjørner på et element. I stedet for å bruke 4 eller flere bilder til å lage buede hjørner bruk følgende kommandoer:

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

/ * For Safari og Google Chrome * /
-WebKit-border-radius: 20px;
}

2. Box skygge

En skygge kan brukes på elementer bruke CSS3 boksen skyggen kommando. Boksen skygge godtar tre tallverdier pluss en farge å bruke denne effekten. Disse tallene er:

1. Avstand horisontal forskyvning av skyggen - En positiv verdi betyr skyggen skal kaste til høyre og en negativ verdi til venstre
2. Avstand vertikal forskyvning av skyggen - En positiv verdi betyr skyggen vil kaste nedenfor og en negativ verdi over
3. Hvordan uskarpe du ønsker skyggen

Med tillegg av en farge verdi skyggen er fullført:

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

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

3. Åpenhet eller RGBA

Åpenhet har alltid vært vanskelig. Forskjellige nettlesere historisk har søkt gjennomsiktighet ved hjelp av forskjellige kommandoer. Fortsetter dette kryss-nettleser inkonsekvensen har vi tillegg av den nye CSS3 RGBA bakgrunn eiendom, men i prinsippet denne kommandoen er mer logisk. Kommandoen består av fire verdier - første, andre og tredje er de røde, grønne og blå verdier (0-255) henholdsvis etterfulgt av alfakanalen eller gjennomsiktighet (0-1).

For RGBA kommandoen nettleser-spesifikk prefiksene (-moz-,-WebKit-) er ikke nødvendig:

# Box3 {
background-color: RGBA (110, 142, 185, 0.5);
}

Bakgrunnsfargen kommandoen legger en fin blå-grå bakgrunn på 0,5 eller 50% opasitet i nettlesere som forstår CSS3 RGBA eiendommen.

Dessverre Internet Explorer vil også forsøke å gjengi bakgrunnsfargen kommandoen, men ikke forstår RGBA. For å sikre at bakgrunnsfargen er også satt i IE en IE-only hack er nødvendig. I det følgende eksempel: siste barnet pseudo velgeren som Internet Explorer ikke forstår er brukt for å utelukke det.

body: siste barnet # box3 {
/ * Ekskluder alle IE nettlesere bruker: siste barnet * /
background-color: RGBA (110, 142, 185, 0.5) viktig;
}

4. Kolonner

Muligheten til å legge til kolonner har blitt lagt til CSS3. Snarere enn flytende elementer innen containere kan vi sette kolonnenummeret, bredde og regelen:

/ * For Mozilla Firefox * /
-Moz-kolonne-count: 2;
-Moz-kolonne-gap: 20px;
-Moz-kolonne-regelen: 1px solid # 6e8eb9;

/ * For Safari og Google Chrome * /
-WebKit-kolonne-count: 2;
-WebKit-kolonne-gap: 20px;
-WebKit-kolonne-regelen: 1px solid # 6e8eb9;
}

5. Flere bakgrunnsbilder

Bakgrunn bildebruk har alltid vært restriktiv når det kommer til CSS fordi du bare kan bruke én bakgrunnsbilde per element. Dette er ikke tilfelle med CSS3 som lar flere bilder per element ved å komma skille dem.

Å plassere et bilde på både venstre og høyre for et element, kan du bruke følgende kommandoer, med litt styling:

padding: 0 20px;
}

Denne kommandoen vil bli mis-rendret av Internet Explorer som den ikke godtar to bakgrunnsbilder på ett enkelt element. En utelukke alle IE hack er nødvendig.

# Box5 blockquote {
/ * For alle nettlesere, bare et åpent sitat * /
bakgrunn: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

body: siste barnet # box5 blockquote {
/ * Ekskluder alle IE nettlesere bruker: siste barnet * /
/ * Så de to bildene * /
bakgrunn: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

Seks. Bakgrunn gradienter

CSS3 bakgrunn graderinger blir ekstremt fleksibelt og kan brukes til å lage komplekse mønstre. På sitt enkleste CSS-lineær gradient tillater en gradient som skal anvendes på et element fra topp til bunn og venstre til høyre.

Dette eksempelet på en CSS3 gradient i Mozilla Firefox gjelder en lyseblå gradient på bunnen av en boks for bare 20% av boksene 'høyde

Safari bruker en mindre intuitiv, men mer fleksibel tilnærming ved hjelp av farger stoppe verdier. Et eksempel på Safari spesifikk kode følger (merk lineære inngår i parentes i stedet for utenfor):

# Box8 {
bakgrunn:-WebKit-gradient (lineær, venstre bunn, venstre topp, farge-stop (0, # b6ebf7), farge-stop (0,20, # FFF));
}

7. Rotasjon

CSS3 tillater også rotasjon av elementer bruke transform kommandoen, med den roterer eiendommen akseptere grader som parameter.

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

8. Outlines

Outilines inngår i CSS3 spesifikasjonen og tillater både en kant og en skisse som skal anvendes på en enkelt element.

Skissen eiendommen er identisk med grensen kommandoen. Den ekstra offset eiendom kan imidlertid grensen til å bli flyttet videre innsiden eller utsiden av elementet.

Filed under: Css av admin