Бувають ситуації при веб-розробці, коли потрібні швидкі рішення і найбільш простим виходом буде використання простих, але ефективних CSS-трюків. Деякі трюки настільки прості, що веб-дизайнери про них і не замислюються і використовують їх в автоматичному режимі. А для використання деяких CSS-трюків доводиться трохи «погуглити», щоб переконатися, що той, чи інший спосіб використовується вірно. Ми вирішили зібрати основні способи програмування CSS в одному місці. Тому, в цьому пості ви знайдете найбільш часто використовувані рішення при роботі зі стилями CSS.
центрування елементів
Центрування елементів - це один з найскладніших трюків в CSS, який можна провернути по-різному. Рішення може приймати різні обриси і в основному залежить від того, що саме вам потрібно відцентрувати. Нижче розглянуті основні варіанти рішень для центрування різних елементів на сторінці.
Текст вирівнюється по центру сторінки (або окремого блоку) за допомогою стилю text-align: center; .
Тег (контейнер або блок)
Елемент div (або будь-який інший елемент) можна відцентрувати, якщо, наприклад, задати йому властивість block. а потім використовувати автоматичний горизонтальний відступ (ліворуч і праворуч).
У прикладі використовується ширина в 100% від розміру блоку (або сторінки), а також відступ (margin) зверху і знизу 0. а зліва і справа auto. що дозволяє браузеру вираховувати центр контейнера і, відповідно, по ньому центрировать.
Вертикальне вирівнювання (центрування по вертикалі)
Це теж досить поширений трюк в CSS і він заслуговує розгляду. Головне завдання при вертикальному центруванні - використовувати однакові значення стилів line-height і height. Це також дозволяє браузеру вираховувати висоту елемента і, відповідно, знаходити його центральну вісь. Якщо вам потрібно вирівняти щось всередині блоку по вертикальній центральній осі, тоді використовуйте властивість vertical-align: middle; .
абсолютне позиціонування
Якщо вам потрібен повний контроль над розташуванням будь-якого блоку на сторінці, тоді вам потрібно використовувати абсолютне позиціонування (position: absolute;). Абсолютне позиціонування дозволяє з точністю до 1 пікселя розташувати блок в потрібному місці. За допомогою властивостей top. right. bottom і left (це свого роду відступи з відповідної сторони сторінки) можна вказати точні «координати» потрібного блоку.
У цьому прикладі блок з класом blok має відступ від верхнього краю браузера (сторінки) в 25px, а з лівого краю відступ в 50px. Якщо у батьківського блоку позиціонування відмінне від static. тоді відлік відступів ведеться від країв цього батьківського елемента. Наприклад, якщо блок з класом blok вкладений в інший блок (наприклад, з position: relative;), у якого заданий відступ зверху в 35px, тоді у blok буде загальний відступ зверху 60px (35px + 25px).
Вибір прямих дочірніх елементів
Досить часто потрібно вказувати не тільки загальні стилі для всього блоку, але і окремі стилі для прямих нащадків (дочірніх елементів, вкладених елементів). Для цього є відповідний трюк в CSS - досить використовувати>. щоб вказати прямі дочірні елементи.
Цей стиль дозволить вибрати всі елементи a (посилання), які знаходяться безпосередньо під блоком з класом blok і задати їм розмір шрифту в 33px. Якщо, наприклад, тег a вкладений в тег p. тоді він вже не буде прямим дочірнім елементом блоку blok. і зміна розміру шрифту його не зачепить.
Вибір певного дочірнього елемента
Цей трюк теж може вам стати в нагоді. Щоб застосувати стиль певного дочірньому елементу, використовуйте селектор виду
В наведеному вище прикладі ми застосовуємо потрібні стилі для другої за рахунком картинки, яка є дочірнім елементом для блоку blok. Інших картинок в цьому блоці вказаний стиль не торкнеться.
Підгонка розмірів зображення під розміри блоку
Іноді потрібно вмістити картинку в блок, який має інші розміри. Наприклад, в блок з шириною 250px вмістити картинку розмірами 500х500px. Якщо не вказати стилі для таких ситуацій, картинка буде «вилазити» за краю блоку, або навпаки, не заповнювати повністю потрібний блок (якщо блок ширше за розміри картинки). Найпростіший спосіб для цього - використовувати динамічну ширину для відображення картинки.
Такі стилі дозволяють зображенні повністю заповнювати всю ширину батьківського блоку, а висота картинки при цьому буде вираховуватися і змінюватися автоматично.
Псевдоелемент: before
За допомогою цього псевдоелемента можна вставляти потрібний контент перед вмістом певного блоку. Дуже часто за допомогою цього трюку веб-майстри вставляють якісь міні-іконки перед потрібними тегами. Наприклад, щоб стилізувати певним чином маркований список (ul). Для цього використовується властивість content. Контентом може бути, наприклад, певний текст або картинка. Дуже часто для цього використовуються також іконічні шрифти (наприклад, FontAwesome).
Приклад коду для використання картинки в якості контенту:
Приклад коду для використання тексту в якості контенту:
Псевдоелемент: after
Подібним псевдоелементу: before чином працює і псевдоелемент: after. Відмінність полягає в тому, що контент при цьому вставляється після потрібного елемента.
Зміна елементів за допомогою CSS-фільтрів
У стилях CSS3 з'являються вже більш просунуті методики, які дозволяють без яваскрипт змінювати потрібні елементи. Наприклад, за допомогою CSS-фільтрів можна змінювати картинки, не застосовуючи навіть програми редагування зображень. Наприклад, дуже просто можна знебарвити кольорову картинку використовуючи тільки пару рядків коду в стилях CSS.
Приклад коду для знебарвлення картинки:
Цікавим рішенням буде, наприклад, повертати колір зображенні при наведенні мишки на неї. Для цього використовуйте псевдоклас: hover. який може перевизначати стилі елементу при наведенні мишки на нього.
Приклад коду для повернення кольору знебарвленою зображенні:
Параметри CSS-фільтрів працюють практично у всіх сучасних браузерах (крім Internet Explorer).