CSS3 е наистина започва да набира скорост с много от командите, очертани в CSS3 работен проект, подкрепен от Firefox, Safari и Google Chrome. Смятахме, че бяхме поставени заедно някои от нашите любими. Преди да започнем CSS3 команди изискват браузър специфичен синтаксис за тях да работят.

За Mozilla Firefox е необходимо да използваме най-moz-префикс, например:

-Moz-гранично-радиус:

И за Safari на WebKit-префикс, например:

WebKit-граница-радиус:

1. Гранична радиус

Командата CSS3 граница радиус създава извити краища на елемент. Вместо да се използват 4 или повече снимки, за да създадете извити ъгли използват следните команди:

/ * За Mozilla Firefox * /
-Moz-гранично-радиус: 20px;

/ * За Safari и Google Chrome * /
-WebKit-граничен радиус: 20px;
}

2. Box сянка

Сянка могат да бъдат приложени на елементи с помощта на CSS3 команда кутия сянка. Кутия сянка приема три числови стойности плюс цвят, за да прилагат този ефект. Тези числа са:

1. Разстояние на хоризонталното отместване на сянка - Положителна стойност означава, че сянката ще хвърли право и отрицателна стойност на ляво
2. Разстояние на вертикалното отместване на сянка - Положителна стойност означава, че сянката ще хвърли по-долу и отрицателна стойност над
3. Как размазани, който бихте искали сянка

С добавянето на цвят стойност на сянка е пълна:

/ * За Mozilla Firefox * /
-Moz-кутия сянка: 5px 5px 5px # b6ebf7;

/ * За Safari и Google Chrome * /
WebKit-бокс-сянка: 5x 5px 5px # b6ebf7;

3. Прозрачност или RGBA

Прозрачността винаги е труден. Различните браузъри исторически са кандидатствали прозрачност, използването на различни команди. Продължавайки този кръст браузър непоследователност имаме добавянето на нов фон CSS3 RGBA собственост, но по принцип тази команда е по-логично. Командата се състои от 4 стойности - първа, втора и трета са червени, зелени и сини стойности (0-255), последвана от алфа канал или прозрачност (0-1).

За команда RGBA браузъра специфични представки (moz-, WebKit) не се изискват:

# Box3 {
фон-цвят: rgba (110, 142, 185, 0,5);
}

Командата на фоновия цвят добавя хубаво синьо-сив фон на 0,5 или 50% непрозрачност в браузъри, които разбират CSS3 RGBA собственост.

За съжаление Internet Explorer също ще се опита да направи командата на цвета на фона, но не разбирам RGBA. За да се гарантира, че на фона на цвета също е установена в IE IE само хак се изисква. В следващия пример: последната дете псевдо селектор, Internet Explorer не разбира се използва, за да я изгонят.

тялото: последно дете # box3 {
/ * Изключи всички IE браузъри: последно дете * /
фон-цвят:! rgba (110, 142, 185, 0.5) важно;
}

4. Колони

Способността да добавите колоните е добавен в CSS3. Вместо да плаващи елементи в контейнери, ние можем да настроите номера на колоната, ширина и правило:

/ * За Mozilla Firefox * /
-Moz-колона: 2;
-Moz-колона дефицит: 20px;
-Moz-колона правило: 1px твърди # 6e8eb9;

/ * За Safari и Google Chrome * /
WebKit-колона: 2;
WebKit-колона дефицит: 20px;
WebKit-колона-правило: 1px твърди # 6e8eb9;
}

5. Множество фонови изображения

Контекст образност винаги е била ограничителен, когато става въпрос за CSS дължи на факта, че може да се прилага само един фоново изображение на елемент. Това не е случаят с CSS3, което позволява на множество изображения на елемент, като просто ги запетая разделяща.

За да поставите изображение, както на ляво и дясно на елемент, можете да използвате следните команди, с малко стайлинг:

подложка: 0 20px;
}

Тази команда ще бъде погрешно, предоставяни от Internet Explorer, тъй като не приема 2 фонови изображения върху един елемент. Един изключват всички хак IE се изисква.

# Box5 Текстов блок {
/ * За всички браузъри, просто отворена цитат * /
фон: URL (/ / quotel.gif) 0 0 без повтаряне;
подложка: 0 20px;
}

тяло: последно дете # box5 Текстов блок {
/ * Изключи всички IE браузъри: последно дете * /
/ * След това двете изображения * /
фон: URL (/ / quotel.gif) не 0 0, URL (/ / quoter.gif) не се повтаря 100% 0;
}

6. Контекст градиенти

CSS3 фон градиенти са изключително гъвкави и могат да бъдат използвани за създаване на сложни модели. В най-опростен линеен градиент на CSS позволява градиент да се прилагат до един елемент от горе до долу и от ляво на дясно.

Този пример за градиент CSS3 в Mozilla Firefox прилага светло синьо наклон в долната част на кутия за само 20% от височината на кутии "

Safari използва по-малко интуитивен, но по-гъвкав подход, използвайки различни цветове ценности спирка. Пример за специфичен код Safari следва (имайте предвид, линейна е включена в скоби, вместо извън):

# Box8 {
фон: WebKit-наклон (линейни, долу вляво, горе в ляво, цвят спиране (0, # b6ebf7), цвят-стоп (0.20, # FFF));
}

7. Въртене

CSS3 също позволява завъртане на елементи, с помощта на командата по трансформация, собственост на завъртане приемане градуса като параметър.

<code> # box9 {
-Moz-трансформация: завъртане (2deg);
WebKit-трансформация: завъртане (2deg);
} </ Код>

8. Очертава

Outilines са включени в CSS3 спецификацията и ще позволи едновременно граница и схемата да се прилага за един елемент .

Очертанията имот е идентичен с командата границата. Допълнителните компенсира имот, обаче, позволява да бъде преместен на границата допълнително вътре или извън елемента.

Пила под: Css от администратор