Прості CSS3 техніки, які Ви повинні знати
За 13 років існування CSS ця мова перетворилася на потужний інструмент, який дозволяє розробляти більш продуктивні та красиві сайти. Багато нових властивостей в останній версії CSS (CSS3) дуже корисні і ними не варто нехтувати при створенні сучасних сайтів.
Ми розглянемо кілька необхідних речей, які Ви повинні знати про CSS3. Використовуючи всі ці нововведення, важливо наголошувати на найважливіших. Навіть незважаючи на те, що поки що не всі браузери підтримують цей стандарт, це чудовий час для любителів експериментів.
Багато фонів
CSS3 дозволяє використовувати безліч фонових зображень для елемента, використовуючи кілька властивостей. Ці властивості такі: background-image, background-repeat, background-position та background-size. Для того, щоб увімкнути кілька фонів усередині одного елемента, Ви повинні визначити правильні властивості через кому.
Селектори
CSS3 селектори дозволяють Вам вибирати елементи для застосування властивостей стилю точніше, даючи Вам можливості вибору складних груп елементів. Нові селектори не тільки заощаджують Вам час, а й зводять HTML розмітку до мінімуму. Скорочення використовуваних класів та ID неминуче :), що дозволить краще організувати таблицю стилів.
Загальний комбінатор елементів одного рівня
Новий тип комбінаторів з'явився CSS 3 - загальний комбінатор елементів одного рівня. Цей селектор орієнтований на всі елементи одного рівня певного елемента. Наприклад, якщо Ви хочете націлитись на абзаци в тій самій ієрархії як заголовки 1-го рівня, Вам необхідно:
Селектор вище працюватиме (робити червоним) першому елементі p під елементом h1. Але не працюватиме на другому p елементі, тому що він не на тому ж рівні.
Нові псевдокласи для вищої специфічності без скриптів
Ось приклади нових псевдо класів:
- :last-child - вибирає лише останній дочірній елемент. - :nth-child(n) - вибирає n-ний дочірній елемент (наприклад, для створення таблиць-зебр). - :not(e) - вибирає все, крім е.
Повний перелік CSS3 псевдо класів доступний тут.
Ресайз (зміна розмірів) елементів
За допомогою CSS3 властивості resize Ви можете змінювати розмір елементів. Непогано - чи не так? Підступ: працює поки що тільки в Сафарі. Наступний блок коду дозволить маленькому трикутнику розміститися в нижньому правому куті елемента, за допомогою якого можна змінювати розмір.
Краще шрифти
Текстові тіні
Властивість text-shadow дозволяє додати тінь під текстовими HTML елементами. Ви повинні завжди перевіряти, щоб текст був читабельним на випадок, якщо браузер користувача не розуміє CSS3.
У наступному прикладі ми застосовуємо темно-синю тінь, яка зміщена вправо на 2 пікселі, вниз - 5 пікселів, має розмиття радіусом 2 пікселя для всіх заголовків 1-го рівня.
Закруглені кути
Закруглити кути не так просто. Однак, за допомогою CSS3 це зробити дуже легко, використовуючи нову властивість border-radius.
Наприклад, код нижче зробить 10-ти піксельне закруглення для div а:
У коді вище, - moz для Файрфокса та - webkit для Сафарі та Хрому.
Висновок
CSS3 дає нам більший контроль над HTML елементами, відкриваючи можливості створення складних та гнучких дизайнів, які не так сильно залежать від графіки та скриптів.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.sixrevisions.com Переклав: Максим Шкурупій Урок створений: 18 Березня 2010 Переглядів: 38788 Правила передруку
5 останніх уроків рубрики "CSS"
Смішні ефекти для літер
Невеликий ефект з інтерактивною анімацією букв.
Реалізація кумедних підказок
Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.
Анімовані літери
Експеримент: анімовані букви SVG на базі бібліотеки anime.js.
Сонцезахисні окуляри від першої особи
Прикольний експеримент веб-сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Навігація, що розкривається
Експериментальний скрипт навігації, що розкривається.