CSS3 tényleg kezd lendületet sok a parancs körvonalazott CSS3 munka tervezetet támogatja Firefox, Safari és a Google Chrome. Azt hittük összerakni néhány kedvenc. Mielőtt belevágnánk CSS3 parancsok szükség böngésző konkrét szintaxis számukra, hogy munkát.

A Mozilla Firefox meg kell használni a-moz-előtag, például:

-Moz-border-radius:

És Safari WebKit-a-előtag, például:

-WebKit-border-radius:

1. Border sugár

A CSS3 határ sugara parancs ívelt sarkok egy elemet. Használata helyett 4 vagy több kép létrehozásához ívelt sarkok használja a következő parancsokat:

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

/ * A Safari és a Google Chrome * /
-WebKit-border-radius: 20px;
}

2. Box árnyék

Egy árnyék lehet alkalmazni elemek segítségével CSS3 box shadow parancsot. A doboz árnyék elfogadja three számértékek, plusz egy színes, hogy ezt a hatást. Ezek a számok a következők:

1. Távolsága vízszintes eltolását árnyéka - A pozitív érték azt jelenti, az árnyék leadott jobbra, negatív érték balra
2. Távolsága függőleges eltolás pedig árnyék - A pozitív érték azt jelenti, az árnyék öntött alábbi negatív értéket a fenti
3. Hogy homályos szeretne az árnyék

Azzal a kiegészítéssel, egy szín érték az árnyék teljes:

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

/ * A Safari és a Google Chrome * /
-WebKit-box-shadow: 5x 5px 5px # b6ebf7;

3. Átláthatóság és RGBA

Átláthatóság mindig is trükkös. A különböző böngészők történelmileg is alkalmazzák az átláthatóságot a különböző parancsokat. Folytatva a cross-böngésző ellentmondás van a mellett az új CSS3 RGBA háttér ingatlan, de elvileg ez a parancs logikusabb. A parancs áll 4 értékek - az első, második és harmadik a vörös, zöld és kék érték (0-255) volt, majd az alfa-csatorna vagy átláthatóság (0-1).

A RGBA parancsot a böngésző egyedi prefixek (-moz-,-WebKit-) nem szükséges:

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

A háttér színe parancs hozzáad egy szép kék-szürke háttér a 0,5 vagy 50%-os fedőképesség a böngészőkben, hogy megértsék a CSS3 RGBA tulajdonság.

Sajnos az Internet Explorer is törekszik arra, hogy a háttér színe parancsot, de nem értem RGBA. Annak érdekében, hogy a háttér színe is meg az IE egy IE-only hack van szükség. A következő példában a: az utolsó gyermek ál választó, amely az Internet Explorer nem érti használják kizárhatja.

szervezet: az utolsó gyermek # box3 {
/ * Kizárása IE böngésző segítségével: az utolsó gyermek * /
background-color: RGBA (110, 142, 185, 0,5)! fontos;
}

4. Oszlopok

A képes felvenni oszlopok bővült CSS3. Ahelyett, lebegő elemek belül konténerek tudjuk beállítani az oszlop száma, szélessége és szabály:

/ * A Mozilla Firefox * /
-Moz-oszlop-száma: 2;
-Moz-oszlop-rés: 20px;
-Moz-oszlop-szabály: 1px solid # 6e8eb9;

/ * A Safari és a Google Chrome * /
-WebKit-oszlop-száma: 2;
-WebKit-oszlop-rés: 20px;
-WebKit-oszlop-szabály: 1px solid # 6e8eb9;
}

5. Több háttérképek

Háttér képek mindig szigorú, amikor a CSS annak a ténynek is csak akkor kell alkalmazni egy háttér képet elemenként. Nem ez a helyzet a CSS3, amely lehetővé teszi több kép elemenként egyszerűen vesszővel elválasztva őket.

A hely, egy kép a bal és jobb egy elem akkor a következő parancsokat, egy kis styling:

padding: 0 20px;
}

Ez a parancs lesz hibás tette az Internet Explorer, mert nem fogadja el a 2 háttér képek egy elemet. A kizár minden IE hack van szükség.

# Box5 p {
/ * Minden böngészőben, csak nyitott quote * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

szervezet: az utolsó gyermek # box5 blockquote {
/ * Kizárása IE böngésző segítségével: az utolsó gyermek * /
/ * Majd a két kép * /
background: url (/ i / quotel.gif) meg nem ismételt 0 0, url (/ i / quoter.gif) meg nem ismételt 100% 0;
}

6. Háttér gradiensek

CSS3 háttér gradiens rendkívül rugalmasak és lehet használni, hogy bonyolult mintákat. A legegyszerűbb a CSS lineáris gradiens segítségével színátmenetet alkalmazni kell eleme fentről lefelé és balról jobbra.

Ez a példa a CSS3 gradiens Mozilla Firefox alkalmaz világoskék gradiens alján a doboz csak 20%-a dobozok "magassága

A Safari egy kevésbé intuitív, de rugalmasabb megközelítést színes megállítani értékeit. Egy példa a Safari egyedi kódot a következő (Megjegyzés: A lineáris szerepel zárójelben, hanem kívül):

# Box8 {
háttér:-webkit-gradiens (lineáris, bal alsó, bal felső, színes-stop (0, # b6ebf7), színes-stop (0.20, # fff));
}

7. Forgás

CSS3 is lehetővé teszi forgását elemek segítségével átalakítják parancs, a forgatás ingatlan elfogadja fok paraméterként.

<code> # box9 {
-Moz-transzformáció: forgatás (2deg);
-WebKit-transzformáció: forgatás (2deg);
} </ Code>

8. Körvonalazza

Outilines szerepelnek a CSS3 specifikáció, és lehetővé teszi mind a határ, és egy vázlatot kell alkalmazni egy elemet.

A körvonal tulajdonság megegyezik a határ parancsot. A kiegészítő offset tulajdonság azonban lehetővé teszi a határon kell mozgatni további belül vagy kívül az elem.

Kategória: Css admin