CSS3 zaista počinje da se okupe zamah s mnogim naredbe navedene u CSS3 radni nacrt podržava Firefox, Safari i Google Chrome. Mislili smo da bismo sastaviti neki od naših favorita. Prije nego što počnemo CSS3 naredbe zahtijeva preglednik specifične sintakse za njih da rade.

Za Mozilla Firefox moramo koristiti-moz-prefiks, na primjer:

-Moz-border-radius:

A Safari-WebKit-prefiks, na primjer:

-WebKit-border-radius:

1. Granični radijus

Radijus CSS3 granice naredbu stvara zaobljeni kutovi na elementu. Umjesto korištenja 4 ili više slika za izradu zakrivljenih uglova koristiti sljedeće naredbe:

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

/ * Za Safari i Google Chrome * /
-WebKit-border-radius: 20px;
}

2. Okvir sjena

Sjena se može primijeniti na elementima koristeći CSS3 naredbu okvir sjena. Okvir Sjena prihvaća tri brojčane vrijednosti uz boju za primjenu u tom smislu. Ti brojevi su:

1. Udaljenost horizontalnog pomaka u sjeni - pozitivnu vrijednost znači da će baciti sjenu na desnoj strani, a negativnu vrijednost s lijeve strane
2. Udaljenost od vertikalnog odmaka od sjene - pozitivnu vrijednost znači da će baciti sjenu dolje i negativne vrijednosti iznad
3. Kako mutno želite sjene

Uz dodatak boje vrijednosti sjena je završena:

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

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

3. Transparentnost ili RGBA

Transparentnost je uvijek bio lukav. Različiti preglednici povijesno su se prijavili transparentnost koristeći različite naredbe. Nastavljajući ovaj cross-preglednik nedosljednosti smo dodavanje novih CSS3 RGBA pozadine nekretnina, no u načelu ove naredbe je logično. Naredba se sastoji od 4 vrijednosti - prvi, drugi i treći su crvene, zelene i plave vrijednosti (0-255), odnosno slijedi alfa kanala ili transparentnosti (0-1).

Za RGBA naredbu preglednik specifične prefiksi (-moz-,-WebKit-) nije potrebna:

# Box3 {
pozadine-boja: rgba (110, 142, 185, 0,5);
}

Naredba boja pozadine dodaje lijepa plavo-sivom pozadinom na 0,5 ili 50% neprozirnost u preglednicima koji razumiju vlasništvo CSS3 RGBA.

Nažalost, Internet Explorer će pokušati uzvratiti naredbu boju pozadine, ali ne razumijem RGBA. Kako bi se osiguralo da se boja pozadine je također postavljen u IE IE samo hack je potrebno. U sljedećem primjeru: posljednji dijete pseudo birač koji Internet Explorer ne razumije se koristi za to isključiti.

Tijelo: posljednji dijete # box3 {
/ * Isključi sve preglednike IE pomoću: posljednji dijete * /
pozadine-boja: rgba (110, 142, 185, 0,5) važno;
}

4. Stupci

Mogućnost dodavanja stupaca je dodan u CSS3. Umjesto plutajući elementi unutar posude možemo postaviti broj stupca, širina i pravilo:

/ * Za Mozilla Firefox * /
-Moz-stupca-count: 2;
-Moz-stupca-jaz: 20px;
-Moz-stupca-pravilo: 1px solid # 6e8eb9;

/ * Za Safari i Google Chrome * /
-WebKit-stupca-count: 2;
-WebKit-stupca-jaz: 20px;
-WebKit-stupca-pravilo: 1px solid # 6e8eb9;
}

5. Više pozadinske slike

Pozadina slike je uvijek bio ograničavajući kada je u pitanju CSS zbog činjenice možete samo primijeniti jedan pozadinsku sliku po elementu. To nije slučaj s CSS3 koji omogućava više slika po elementu, jednostavno ih zarezom odvajanje.

Za mjesto na obje slike lijevo i desno od elementa možete koristiti sljedeće naredbe, uz malo styling:

padding: 0 20px;
}

Ova naredba će biti pogrešno donosi Internet Explorer jer ne prihvaća 2 pozadini slika na jedan element. Isključiti sve IE hack je potrebno.

# Box5 blockquote {
/ * Za sve preglednike, samo otvoreni citat * /
Pozadina: url (/ i / quotel.gif) 0 0 ne-ponavljanja;
padding: 0 20px;
}

Tijelo: posljednji dijete # box5 blockquote {
/ * Isključi sve preglednike IE pomoću: posljednji dijete * /
/ * Nakon toga dvije slike * /
Pozadina: url (/ i / quotel.gif) bez ponavljanja 0 0, url (/ i / quoter.gif) bez ponavljanja 100% 0;
}

6. Pozadina gradijenti

CSS3 pozadini gradijenti su vrlo fleksibilne i mogu se koristiti za stvaranje složenih uzoraka. Na najjednostavniji gradijent CSS linearni gradijent omogućava da se primjenjuju na element od vrha do dna i lijeva na desno.

Ovaj primjer CSS3 gradijenta u Mozilla Firefox primjenjuje svjetlo plava gradijent na dnu okvira za samo 20% polja "visine

Safari koristi manje intuitivni no fleksibilniji pristup pomoću boje zaustaviti vrijednosti. Primjer Safari specifičan kod na sljedeći način (imajte na umu linearna je uključen u zagradi umjesto izvan):

# Box8 {
pozadine:-WebKit-gradijenta (linearni, lijevo dolje, lijevo gore, boja-stop (0, # b6ebf7), boja-stop (0.20, # FFF));
}

7. Rotacija

CSS3 također omogućuje rotaciju elemenata pomoću transformacija naredbe, s rotirati imovine prihvaćanje stupnjeva kao parametar.

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

8. Rubovi

Outilines su uključeni u CSS3 specifikaciji i dopustiti i granice i strukture će se primijeniti na jedan element.

Pregled imovine je identičan granice naredbu. Dodatni pomak imovine, međutim omogućuje granice da se preselio dalje unutar ili izvan elementa.

Varalica pod: Css admin