Сѕѕ3 властивості

2

Від автора: я вітаю вас на нашому блозі Webformyself, присвяченому створенню сайтів. Сьогодні ми говоримо про технології CSS3, а саме хотілося б розглянути, що нового в ній з’явилося. Отже, сьогодні я опишу деякі css3 властивості.

Невеликий відступ

Роботу всіх властивостей, які ми сьогодні розглянемо, я буду демонструвати на простому блочному елементі. Я задав йому ширину 300 пікселів і висоту 200.

Закруглення кутів

Отже, почнемо з цього дуже корисного параметра, яке дозволяє закруглити кути і блоків. Адже за замовчуванням вони прямокутні, а це не завжди потрібно по дизайну. Раніше подібні заокруглення реалізовувалися за допомогою додаткових фонових картинок. Що ж, тепер можемо радіти, що все так помітно спростився. Тепер достатньо записати наступне:

border-radius: 35px;

Відповідно, чим більше значення, тим більше закруглення. Його необов’язково ставити в пікселях – можна також у відсотках або em-одиницях. Також залежить від розмірів блоку. Якщо елемент квадратний, то його можна перетворити в коло. Для цього потрібно задати закруглення в 50% або в половину пікселів від його ширини.

Закруглювати можна для кожної окремої сторони. Для цього використовуються правила border-top-left-radius, border-bottom-right-radius і т. д. Особисто мені не подобається ними користуватися, тому що запис виходить громіздкою, хоча коли потрібно визначити закруглення тільки з одного боку, це може бути доречно.

Інший варіант визначити значення окремо для кожного кута, це записати чотири значення в border-radius. Значення по черзі встановлюються для верхнього лівого, верхнього правого, нижніх лівого і правого кутів. Мабуть, це єдине, що вам слід запам’ятати.

Звичайно, оскільки властивість є частиною специфікації CSS3, для кросбраузерності розумно використовувати його з вендорными префіксами. Можливо, ви самі знаєте їх. Це –moz, -o, -і ms –webkit. Відповідно, для підтримки в мозилле, опері, IE і Хромі, а точніше, в старих версіях цих браузерів, тому що нові браузери вже розуміють властивість і без префіксів. Ці ж самі префікси можна використовувати і з усіма іншими властивостями з версії CSS3, тому далі я на цьому питанні зупинятися не буду.

Градієнти: лінійні і радіальні

Ще одне велике нововведення CSS3, про який можна було б написати окрему книгу, бо у градієнтів дуже багато різних параметрів. Але вони не створюються якимось новим властивістю, вони всього лише розширюють можливості фону. Щоб їх використовувати, досить властивості background або background-image написати: linear-gradient() або radial-gradient().

Загалом, ось приклад найпростішого градієнта:

background: linear-gradient(to right, aqua, yellow);

Сѕѕ3 властивості

Відповідно, ми тут задали напрямок градієнта (вправо) і також два кольори. Перехід відбувається від блакитного до жовтого, що ми і бачимо на цьому прикладі. Зазвичай колір задаються hex-кодом або в режимі rgb. Якщо використовувати rgba, то градієнт можна зробити напівпрозорим. До речі, напівпрозорість є ще однією особливістю css3.

Прозорість

Властивість opacity дозволяє задати прозорість потрібного елемента. Приймаються значення від 0 до 1, де 1 – повна непрозорість. При значенні 0, відповідно, елемент не видно на сторінці, але він залишається на своєму місці і займає його. Застосуємо до блоку це властивість:

opacity: 0.22;

Сѕѕ3 властивості

Тепер його ледь видно. Потрібно сказати, opacity діє на весь елемент в цілому, а не тільки на фон. Тобто, якби в нашому блоці був текст, то він теж став би нечитабельним, а цього допускати не можна. Тому в текстових блоках зазвичай використовують колірний режим rgba як альтернативу. Opacity ж зручно застосовувати для приховування/появи елементів.

Тіні

Звичайно, потрібно згадати також тіні, тому що для їх додавання в css3 передбачається аж 3 властивості, і кожне має свої особливості. Всі тіні мають загальні параметри, такі, як зсув по горизонталі, по вертикалі, розмиття і колір. Розтягнення задається тільки для box-shadow. Ах так, а тепер я перерахую всі:

Box-shadow – зазвичай використовують для блоків.

Text-shadow – тінь для тексту. Має однакові параметри з попередньої, але їй не задається розтягнення. Варто відзначити, що розмиття є необов’язковим параметром для обох властивостей, його можна опустити.

Filter: drop-shadow() – мабуть, про це властивості знають найменше, і воно гірше підтримується браузерами. Взагалі-то, якщо ви спробуєте застосувати без префіксів, то, швидше за все, нічого не вийде.

-webkit-filter: drop-shadow(5px 5px green);

Сѕѕ3 властивості

Тут я прописав префікс –webkit і тепер в Хромі все працює. Без префікса нічого не відображало. Drop-shadow також не підтримує розтягнення. Як бачимо, ніяких відмінностей в цьому випадку з box-shadow немає, але якщо ви спробуєте застосувати цей фільтр до png зображень, то зможете отримати тінь, ідентичну їм по контурах, а не просто квадратну. Ось тут і полягає основна перевага, залишається дочекатися нормальної підтримки.

Трансформації

Так, це ще одна окрема група нових властивостей css3. Вірніше, навіть параметрів, а не властивість, тому що воно використовується одне (transform), а от можливостей дає багато. Працює transform приблизно так само, як і filter, але має більш повну підтримку. Основні можливості трансформацій:

Зміщення елемента по горизонталі, вертикалі, з допомогою transform: translateX (translateY для зміщення по вертикалі). Поворот елементів на потрібну кількість градусів – transform: rotate(45deg). Приймаються значення від 0 до 360 і негативні.

Нахил елементів з допомогою skew. Теж визначається в градусах.

Можливість управління розмірами блоків з допомогою scale. Можна задавати тільки ScaleX або scaleY для збільшення елемента тільки по ширині або висоті відповідно. Зазвичай використовується у поєднанні з плавними переходами.

Плавні переходи

Раз вже ми їх зачепили, то скажу, що для їх реалізації достатньо використовувати одну властивість – transition, якому вказати час, протягом якого відбудеться зміна стилів. Зазвичай ставлять 0.5-2 секунди, хоча можна і в мілісекундах.

Насправді transition підтримує набагато більше параметрів, які можна визначити, але про це я не буду вам розповідати, аж надто багато тексту це може зайняти.

Отже, ми розглянули якщо не всі, то більшість основних властивостей. Крім них, у CSS3 з’явилися і нові селектори. Про все це більш детально ви можете дізнатися в нашому преміум курсі з CSS3, де також піднімається питання про кросбраузерності нових властивостей.