CSS3 är verkligen börjar ta fart med många av de kommandon som beskrivs i CSS3 Working Draft stöds av Firefox, Safari och Google Chrome. Vi trodde att vi skulle sätta ihop några av våra favoriter. Innan vi börjar CSS3 kommandon kräver att webbläsaren speciell syntax för dem att arbeta.

För Mozilla Firefox måste vi använda-moz-prefix, till exempel:

-Moz-border-radius:

Och för Safari-webkit-prefix, till exempel:

-Webkit-border-radius:

1. Border radie

Den CSS3 gränsen radie kommando skapar rundade hörn på ett element. Istället för att använda fyra eller fler bilder för att skapa böjda hörn använda följande kommandon:

/ * För Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * För Safari och Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Box skugga

En skugga kan tillämpas på element med CSS3 kommandot rutan skugga. Lådan skuggan accepterar tre numeriska värden plus en färg för att tillämpa detta. Dessa nummer är:

1. Avstånd horisontell förskjutning av skugga - Ett positivt värde betyder att skugga kasta åt höger och ett negativt värde till vänster
2. Avstånd vertikala förskjutningen av skugga - Ett positivt värde betyder att skugga kommer att kasta nedan och ett negativt värde över
3. Hur suddig du vill skuggan

Med tillägg av ett färgvärde skuggan är klar:

/ * För Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * För Safari och Google Chrome * /
-Webkit-box-shadow: 5x 5px 5px # b6ebf7;

3. Öppenhet eller RGBA

Öppenhet har alltid varit knepigt. Olika webbläsare historiskt har ansökt öppenhet med olika kommandon. Fortsätter detta olika webbläsare inkonsekvens vi har tillägg av den nya CSS3 RGBA bakgrund egendom, men i princip detta kommando är mer logisk. Kommandot består av 4 värden - första, andra och tredje är de röda, gröna och blå värden (0-255) respektive följt av alfa-kanal eller transparens (0-1).

För RGBA kommandot webbläsaren specifika prefix (-moz-,-webkit-) behövs inte:

# Box3 {
bakgrundsfärg: RGBA (110, 142, 185, 0,5);
}

Bakgrundsfärgen kommando lägger till en fin blå-grå bakgrund på 0,5 eller 50% opacitet i webbläsare som förstår CSS3 RGBA fastigheten.

Tyvärr Internet Explorer kommer också att försöka göra kommandot bakgrundsfärgen men inte förstår RGBA. För att säkerställa att bakgrundsfärgen också ligger i IE en IE-bara hacka krävs. I följande exempel: är sista barnet pseudo väljare som Internet Explorer inte förstår används för att utesluta det.

kroppen: sista barn # box3 {
/ * Uteslut alla IE-webbläsare med: sista barn * /
background-color: RGBA (110, 142, 185, 0,5) viktigt;
}

4. Kolumner

Möjligheten att lägga till kolumner har lagts till i CSS3. I stället för flytande element inom kärl vi kan ställa kolumnnumret, bredd och regel:

/ * För Mozilla Firefox * /
-Moz-kolonn-count: 2;
-Moz-kolonn-gap: 20px;
-Moz-kolonn-regeln: 1px solid # 6e8eb9;

/ * För Safari och Google Chrome * /
-Webkit-kolonn-count: 2;
-Webkit-kolonn-gap: 20px;
-Webkit-kolonn-regeln: 1px solid # 6e8eb9;
}

5. Flera bakgrundsbilder

Bakgrund bildspråk har alltid varit restriktiv när det gäller CSS eftersom du bara kan använda en bakgrundsbild per element. Detta är inte fallet med CSS3 som tillåter flera bilder per element genom att helt enkelt komma-separera dem.

För att placera en bild på både vänster och höger av ett element kan du använda följande kommandon, med lite styling:

padding: 0 20px;
}

Detta kommando kommer att mis-återges av Internet Explorer som den inte accepterar 2 bakgrundsbilder på ett enda element. En utesluta alla IE hacka krävs.

# Box5 blockquote {
/ * För alla webbläsare, bara ett öppet citat * /
bakgrund: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

kroppen: sista barn # box5 blockquote {
/ * Uteslut alla IE-webbläsare med: sista barn * /
/ * Sedan två bilder * /
bakgrund: url (/ i / quotel.gif) ingen upprepning 0 0, url (/ i / quoter.gif) inga-repeat 100% 0;
}

6. Bakgrund gradienter

CSS3 bakgrunden gradienter är extremt flexibla och kan användas för att skapa komplexa mönster. I sin enklaste CSS-linjär gradient gör en lutning som skall tillämpas på ett element från topp till botten och vänster till höger.

Detta exempel på en CSS3 gradient i Mozilla Firefox tillämpar en ljusblå lutning på botten av en låda för bara 20% av rutorna höjd

Safari använder en mindre intuitivt men mer flexibel inställning med hjälp av färg stopp värden. Ett exempel på Safari-specifika koden följer (observera den linjära ingår i parentes istället för utanför):

# Box8 {
Bakgrund:-webkit-gradient (linjär, vänster nedre, vänstra övre, färg-stop (0, # b6ebf7), färg-stop (0,20, # FFF));
}

7. Rotation

CSS3 tillåter också rotation av element med kommandot Omforma med roterar egendom acceptera grader som en parameter.

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

8. Konturer

Outilines ingår i CSS3-specifikationen och att både en gräns och en förlaga som skall tillämpas på ett enskilt element.

Skissen Fastigheten är identisk med gränsen kommandot. Den extra offset egenskapen kan dock gränsen ska flyttas vidare inom eller utanför elementet.

Filed under: Css av admin