CSS3 jest naprawdę zaczyna nabrać rozpędu z wielu poleceń opisanych w CSS3 projekt pracy wspierane przez Firefox, Safari i Google Chrome. Myśleliśmy, że możemy połączyć kilka z naszych ulubionych. Zanim zaczniemy CSS3 poleceń wymaga przeglądarki specyficzną składnią ich do pracy.

Mozilla Firefox musimy użyć-moz-prefiks, na przykład:

-Moz-border-radius:

I Safari-webkit-prefiks, na przykład:

-Webkit-border-radius:

1. Promień Granicznej

Granicy CSS3 polecenia promień tworzy zaokrąglone rogi na elemencie. Zamiast używać 4 lub więcej obrazów w celu zaokrąglone rogi następujące polecenia:

/ * Dla przeglądarki Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * Dla Safari i Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Cień Box

Cień może być stosowany do elementów za pomocą polecenia CSS3 cień pudełka. Cień pole przyjmuje trzy numeryczne wartości plus kolor do zastosowania tego efektu. Te liczby są:

1. Odległości poziome przesunięcie cienia - wartość dodatnia oznacza cień będzie rzutować na prawo i ujemna w lewo
2. Odległość pionowe przesunięcie cienia - wartość dodatnia oznacza cień rzuci poniżej i powyżej wartości ujemnej
3. Jak rozmyte chcesz cieniu

Z dodatkiem koloru wartość cień jest kompletny:

/ * Dla przeglądarki Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

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

3. Przejrzystość lub RGBA

Przejrzystość zawsze było trudne. Różne przeglądarki historycznie stosowane przejrzystości za pomocą różnych poleceń. Kontynuując tę ​​cross-browser niespójność mamy dodanie nowego własności CSS3 background RGBA, jednak w zasadzie to polecenie jest bardziej logiczne. Polecenie składa się z 4 wartości - pierwszy, drugi i trzeci są koloru czerwonego, zielonego i niebieskiego (0-255), odpowiednio po kanału alfa lub przejrzystości (0-1).

Dla polecenia RGBA przeglądarki prefiksów (-moz-,-webkit-) nie są wymagane:

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

Komenda kolor tła dodaje ładny niebiesko-szarym tle na 0,5 lub 50% krycia w przeglądarkach, które rozumieją CSS3 własności RGBA.

Niestety Internet Explorer również próbę oddania polecenia kolor tła, ale nie rozumiem RGBA. Aby zapewnić, że kolor tła jest również ustawić w IE IE tylko hack jest wymagane. W poniższym przykładzie: last-child pseudo wyboru co Internet Explorer nie rozumie, jest używany do wyłączenia go.

ciała: last-child {# box3
/ * Wykluczenie wszystkich IE przeglądarki za pomocą: last-child * /
background-color: rgba (110, 142, 185, 0.5) ważne;
}

4. Kolumny

Możliwość dodawania kolumn został dodany do CSS3. Zamiast elementy pływające w pojemnikach możemy ustawić numer kolumny, szerokość i zasady:

/ * Dla przeglądarki Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-gap: 20px;
-Moz-column-rule: 1px solid # 6e8eb9;

/ * Dla Safari i Google Chrome * /
-Webkit-column-count: 2;
-Webkit-column-gap: 20px;
-Webkit-column-rule: 1px solid # 6e8eb9;
}

5. Wiele obrazów tła

Obrazów tła zawsze restrykcyjne, jeśli chodzi o CSS ze względu na fakt można tylko stosować jedną tle obraz na element. To nie w przypadku CSS3, który pozwala wielu obrazów na element, po prostu przecinkami oddzielając je ma.

Aby umieścić obraz zarówno na lewej i prawej elementu można użyć następujących poleceń, a przy odrobinie stylizacji:

padding: 0 20px;
}

Polecenie to zostanie nieprawidłowo świadczonych przez Internet Explorer, ponieważ nie zaakceptować 2 obrazów tła na jeden element. Wykluczyć włamać IE jest wymagane.

# Box5 blockquote {
/ * Dla wszystkich przeglądarek, wystarczy otworzyć cytatem * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

ciała: last-child # box5 blockquote {
/ * Wykluczenie wszystkich IE przeglądarki za pomocą: last-child * /
/ * Następnie oba obrazy * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Gradienty tle

Gradienty CSS3 tle są bardzo elastyczne i mogą być wykorzystywane do tworzenia skomplikowanych wzorów. W najprostszej wersji CSS liniowego gradientu pozwala gradient być stosowane do elementu od góry do dołu i od lewej do prawej.

Ten przykład CSS3 gradientu w przeglądarce Mozilla Firefox stosuje niebieski gradient na dole pole do zaledwie 20% wysokości pola "

Safari używa mniej intuicyjny, ale bardziej elastyczne podejście przy użyciu koloru wartości stop. Przykładem konkretnych Safari kod następująco (uwaga liniowego jest w nawiasach zamiast na zewnątrz):

# Box8 {
background:-webkit-gradient (liniowa, na dole po lewej, u góry po lewej, kolor-stop (0, # b6ebf7), kolor-stop (0,20, # fff));
}

7. Obrót

CSS3 również umożliwia obracanie elementów za pomocą polecenia transformacji z właściwością obracać stopni przyjmując jako parametr.

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

8. Konspekty

Outilines są zawarte w specyfikacji CSS3 i pozwolić obu granicę i zarys być stosowane do jednego elementu.

Właściwość outline jest identyczne z poleceniem granicy. Dodatkowe przesunięcie własności jednak pozwala granicy do przeniesienia dalszego wewnątrz lub na zewnątrz elementu.

Filed under: Css przez admin