CSS3 is echt begint te momentum te verzamelen met veel van de commando's die in het CSS3 te werken ontwerp wordt ondersteund door Firefox, Safari en Google Chrome. We dachten dat we samen een aantal van onze favorieten. Voordat we aan de slag CSS3 commando's vereisen browser specifieke syntax voor hen te werken.

Voor Mozilla Firefox moeten we de-moz-prefix, bijvoorbeeld het gebruik:

-Moz-border-radius:

En voor de Safari-webkit-prefix, bijvoorbeeld:

-Webkit-border-radius:

1. Border radius

De CSS3 border radius opdracht maakt afgeronde hoeken op een element. In plaats van het gebruik van vier of meer foto's te maken afgeronde hoeken gebruik maken van de volgende opdrachten:

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

/ * Voor Safari en Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Box schaduw

Een schaduw kan worden toegepast op elementen met behulp van de CSS3 box schaduw commando. De box schaduw accepteert drie numerieke waarden plus een kleur aan dit effect toe te passen. Deze nummers zijn:

1. Afstand van de horizontale verschuiving van schaduw - Een positieve waarde betekent dat de schaduw werpt naar rechts en een negatieve waarde aan de linkerkant
2. Afstand van de verticale verschuiving van de schaduw van - Een positieve waarde betekent dat de schaduw hieronder cast en een negatieve waarde boven
3. Hoe wazig je wilt dat de schaduw

Met de toevoeging van een kleur waarde van de schaduw is compleet:

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

/ * Voor Safari en Google Chrome * /
-Webkit-box-shadow: 5x 5px 5px # b6ebf7;

3. Transparantie of RGBA

Transparantie is altijd lastig. Verschillende browsers het verleden hebben toegepast transparantie met behulp van verschillende opdrachten. Voortzetting van deze cross-browser inconsistentie we de toevoeging van de nieuwe CSS3 RGBA achtergrond een onroerend goed, maar in principe deze opdracht is meer logisch. De opdracht bestaat uit vier waarden - de eerste, tweede en derde zijn de rode, groene en blauwe waarden (0-255) respectievelijk gevolgd door de alpha-kanaal of de transparantie (0-1).

Voor de RGBA bevel van de browser specifieke voorvoegsels (-moz-,-webkit-) zijn niet vereist:

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

De achtergrondkleur commando voegt een mooie blauw-grijze achtergrond op 0,5 of 50% dekking in browsers die de CSS3 RGBA eigendom te begrijpen.

Helaas Internet Explorer zal ook proberen om de achtergrond kleur opdracht geven, maar niet begrijpen RGBA. Om ervoor te zorgen dat de achtergrond kleur ook is ingesteld in IE een IE-only hack is vereist. In het volgende voorbeeld de: laatste-kind pseudo-selector, die Internet Explorer niet begrijpt wordt gebruikt om het te sluiten.

lichaam: last-child # BOX3 {
/ * Sluiten alle IE browsers met: last-child * /
background-color: RGBA (110, 142, 185, 0.5) van belang;
}

4. Columns

De mogelijkheid om kolommen toe te voegen is toegevoegd aan CSS3. In plaats van zwevende elementen binnen de containers kunnen we de kolomnummer, breedte en regel:

/ * Voor Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-gap: 20px;
-Moz-column-regel: 1px solid # 6e8eb9;

/ * Voor Safari en Google Chrome * /
-Webkit-column-count: 2;
-Webkit-column-gap: 20px;
-Webkit-column-regel: 1px solid # 6e8eb9;
}

5. Meerdere achtergrondafbeeldingen

Achtergrond beelden is altijd restrictief als het gaat om CSS te wijten aan het feit dat je kan slechts een achtergrondafbeelding per element toe te passen. Dit is niet het geval is met CSS3 die meerdere afbeeldingen per element kan door simpelweg door komma's gescheiden.

Om een ​​beeld op zowel de linker-en rechterkant van een element dat u kunt gebruik maken van de volgende opdrachten, met een beetje styling:

padding: 0 20px;
}

Deze opdracht zal worden mis-weergegeven door Internet Explorer als het niet twee achtergrondafbeeldingen te accepteren op een enkel element. Een sluiten alle IE hack is vereist.

# Box5 blockquote {
/ * Voor alle browsers, maar een open offerte * /
achtergrond: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

lichaam: last-child # box5 blockquote {
/ * Sluiten alle IE browsers met: last-child * /
/ * Vervolgens worden de twee beelden * /
achtergrond: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Achtergrond gradiënten

CSS3 achtergrond hellingen zijn zeer flexibel en kan worden gebruikt om complexe patronen te creëren. Op zijn eenvoudigst de CSS-lineaire gradiënt kan een gradiënt te worden toegepast op een element van boven naar beneden en van links naar rechts.

Dit voorbeeld van een CSS3 gradiënt in Mozilla Firefox geldt een licht blauw kleurverloop op de bodem van een doos voor slechts 20% van de vakken 'hoogte

Safari maakt gebruik van een minder intuïtief, maar meer flexibele benadering met behulp van kleur te stoppen waarden. Een voorbeeld van de Safari-specifieke code volgt (let op de lineaire is opgenomen tussen haakjes in plaats van buiten):

# Box8 {
achtergrond:-webkit-gradiënt (lineair, links onder, links boven, kleur-stop (0, # b6ebf7), kleur-stop (0.20, # fff));
}

7. Omwenteling

CSS3 maakt het ook mogelijk de rotatie van elementen met behulp van de opdracht te transformeren, met het draaien woning te accepteren graden als een parameter.

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

8. Hoofdlijnen

Outilines zijn opgenomen in de CSS3-specificatie en laat zowel een grens en een overzicht te worden toegepast op een enkel element.

De omtrek woning is identiek aan de grens commando. De extra offset eigenschap maakt het mogelijk maar de grens naar verder naar binnen of buiten van het element worden verplaatst.

Geplaatst onder: Css door admin