CSS3 дійсно починає набирати обороти з багатьма командами, викладені в CSS3 робочий проект підтримується Firefox, Safari і Google Chrome. Ми думали, що ми зібрали деякі з наших фаворитів. Перш ніж почати CSS3 команди вимагають браузер певний синтаксис, щоб вони працювали.

Для Mozilla Firefox ми повинні використовувати-МОЗ-префікс, наприклад:

-МОЗ кордону радіусу:

А для Safari WebKit-префіксом, наприклад:

-WebKit-межі радіусу:

1. Прикордонна радіусом

Радіус CSS3 кордону команда створює закруглені кути на елементі. Замість того щоб використовувати 4 або більше зображень, щоб створити закруглені кути за допомогою наступних команд:

/ * Для Mozilla Firefox * /
-МОЗ кордону радіуса: 20px;

/ * Для Safari і Google Chrome * /
WebKit-межі радіусу: 20px;
}

2. Коробка тіні

Тінь може бути застосований до елементів з використанням CSS3 вікно тінь команди. Вікно тінь приймає три числових значень плюс колір застосувати цей ефект. Ці цифри є:

1. Відстань горизонтальне зміщення тіні - позитивне значення означає, тінь буде приведений до правої і негативні значення в ліву
2. Відстань вертикальне зміщення тіні - позитивне значення означає тінь відкидає нижче, а негативне значення вище
3. Як розмито ви хотіли б тінь

З додаванням значення кольору тіні завершення:

/ * Для Mozilla Firefox * /
-МОЗ-поле-тінь: 5px 5px 5px # b6ebf7;

/ * Для Safari і Google Chrome * /
-WebKit-поле-тінь: 5x 5px 5px # b6ebf7;

3. Прозорість або RGBA

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

Для команди RGBA браузер конкретних префікси (-МОЗ-,-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 * /
-МОЗ-стовпців фото: 2;
-МОЗ-стовпців пробіл: 20px;
-МОЗ-стовпців правило: 1px твердих # 6e8eb9;

/ * Для Safari і Google Chrome * /
-WebKit-стовпців фото: 2;
-WebKit-стовпців пробіл: 20px;
-WebKit-стовпців правило: 1px твердих # 6e8eb9;
}

5. Кілька фонових зображень

Фон зображення завжди було обмежувальних коли справа доходить до CSS пов'язано з тим, Ви можете застосувати тільки один фонове зображення в елементі. Це не випадок з CSS 3, який дозволяє кілька зображень для кожного елемента просто комою між ними.

Щоб помістити зображення на обох ліворуч і праворуч від елемента, який ви можете використовувати наступні команди, з невеликим стиль:

оббивка: 0 20px;
}

Ця команда буде неправильно надаються Internet Explorer, оскільки воно не приймає два фонових зображень для одного елемента. Виключити всі хак IE не потрібно.

# {Box5 цитати
/ * Для всіх браузерах, просто відкриті цитати * /
Довідкова інформація: URL (/ я / quotel.gif) 0 0 не повторювати;
оббивка: 0 20px;
}

тіла: остання дитина # box5 BLOCKQUOTE {
/ * Виключити всі 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
-МОЗ-перетворення: поворот (2DEG);
-WebKit-перетворення: поворот (2DEG);
} </ Код>

8. Контури

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

Контур властивості ідентична кордоні команди. Додаткове зміщення власності однак дозволяє кордон перенести подальше всередині або поза елемента.

Рубрики: Css від адміністратора