Category: CSS

В цій категорії ми будемо публікувати корисні матеріали. що стосуються сучасних можливостей мови програмування CSS. Вся теоретична частина в постах буде підкріплена практичними прикладами.

Огляд властивості line-height у CSS-стилях

За допомогою властивості line-height в CSS встановлюється величина простору між рядками. У блокових елементах властивість впливає на мінімальну висоту рядків усередині елемента. Для вбудованих елементів ця властивість впливає на висоту, яка використовується для обчислення висоти коробки (блоку) рядка. Але, перш ніж ми почнемо розглядати властивість line-height більш детально, ми повинні дати пояснення двом важливим моментам: область вмісту елемента (content-area) і коробка рядка (line-box).   Область вмісту елемента (content-area) – це обчислена висота області вмісту елемента....

Розбираємо властивість display в CSS

Властивість display є однією з найбільш важливих властивостей CSS, які використовуються верстальниками для побудови макету. Найпопулярнішими значеннями цієї властивості є block, inline та none. Значення table та inline-block також досить поширені. Але крім цих значень є ще маса інших, які можна і потрібно використовувати, і про які ви, можливо, не знали. Тому, цей пост присвячений розгляду різних значень властивості display в CSS-стилях.     Перш ніж ми поговоримо про властивість display, ми повинні згадати «дерево...

Розширені селектори CSS, про які потрібно знати

За допомогою CSS можна створювати дійсно приголомшливі сайти. А правильний підхід до використання стилів дозволяє реалізувати практично будь-які ідеї у веб-дизайні. І одним з головних моментів тут є ефективне використання селекторів. За допомогою селекторів можна надати унікальні стилі навіть самим «віддаленим» елементам в DOM. Але іноді буває так, що звичайні селектори не підходять для вирішення цього завдання. Наприклад, коли код, і відповідно елементи DOM, генерується динамічно. На щастя для верстальників, доступ до деяких динамічних селекторів...

Використання різних властивостей розміру шрифту в CSS-стилях

В CSS є маса різних властивостей, які дозволяють впливати на розмір шрифту. Крім цього розмаїття, у даних властивостей фактична величина їх значення часто обчислюється браузерами по-різному. Все це обумовлено історично та в міру розвитку технологій. Одні властивості застарівають, а інші з’являються і стають популярними. Наприклад, сьогодні деякі властивості вже вважаються застарілими (ex, pt, pc та ін.), а інші навпаки стають все більш популярними (vh, vw, vmin і vmax). Останні властивості завоювали любов веб-дизайнерів завдяки своїй...

Прискорюємо свій CSS

Ви коли-небудь думали про розмір файлів CSS-стилів на своєму сайті? Адже якщо ці файли мають велику вагу, це негативно позначиться на завантаженні (відображенні) сторінки. Хоча CSS-файли сайту в основному важать небагато, вони дуже важливі в момент завантаження сайту в браузері. Оскільки браузер блокує відображення сторінки до повного завантаження CSS, ці файли повинні бути максимально легкими. У сьогоднішній статті ми розглянемо декілька порад, які допоможуть вам зменшити розмір CSS-файлів, а також прискорити рендеринг сторінок сайту.  ...

Псевдокласи в CSS – мінімальний набір знань

Псевдоклас в CSS стилях – це ключове слово, яке при додаванні до селектора визначає його особливий стан. Наприклад, псевдоклас :focus дозволяє застосовувати особливі CSS-стилі для елементів, які знаходяться в фокусі (наприклад, можна підсвічувати фокусне поле введення форми кольором, відмінним від інших використовуваних кольорів форми).   Синтаксис: селектор:псевдоклас {властивість: значення; } приклад .content:hover {background-color: #06a79d; }     Основні псевдокласи CSS: :active – надає стиль активному посиланню :checked – використовується для елементів (наприклад, checkbox і radio),...

Використання Flexbox в CSS3 для адаптивного дизайну

У цій статті ми хочемо більш детально зупинитися на використанні flexbox в CSS3, в якості одного з просунутих способів досягнення адаптивності на сайті. При створенні CSS складність макетів була не такою, якою вона буває в наші дні. Раніше макети були з фіксованою шириною і невеликими варіаціями розташування блоків, а сьогодні макети сайтів можуть набувати практично будь-яких обрисів. Все це змушує розробників придумувати хаки для CSS, щоб контент відображався більш-менш правильно.   Flexbox (гнучкі коробки) –...

Основні способи вертикального вирівнювання елементів в CSS

Одна з найпопулярніших проблем, з якими стикаються веб-дизайнери – це вертикальне центрування елементів в CSS і правильне їх відображення на девайсах з різними розмірами екрану. І складність не в тому, що це важко зробити, а в тому, що існує кілька різних способів для цього і всі вони мають право на життя. У цій статті ми розглянемо сім найпопулярніших і, що найголовніше, — робочих методів вертикального вирівнювання елементів за допомогою CSS.     7 основних способів...

Основні трюки CSS стилів для вебмайстрів початківців

Бувають ситуації при веб-розробці, коли потрібні швидкі рішення і найбільш простим виходом буде використання легких, але ефективних CSS-трюків. Деякі трюки настільки прості, що веб-дизайнери про них і не замислюються і використовують їх в автоматичному режимі. А для використання деяких CSS-трюків доводиться трохи «погуглити», щоб переконатися, що той, чи інший спосіб використовується вірно. Ми вирішили зібрати основні способи програмування CSS в одному місці. Тому, в цьому пості ви знайдете найбільш часто використовувані рішення при роботі зі...

Скошені краї блоків за допомогою CSS-масок і трансформацій

За допомогою вузлуватих, скошених країв у різних html-елементів (картинок, блоків, цілих секцій) можна надати унікальний вигляд будь-який веб-сторінці. У цій статті ми розглянемо практичні приклади того, як легко можна додати скошені краї будь-якому html-елементу за допомогою простих методик CSS-масок і CSS-трансформацій.     Щоб створити кути для країв елементів за допомогою CSS трансформацій зазвичай доводиться «перекошувати» батьківський елемент, а потім «відв’язувати» дочірній елемент, але такий метод має ряд зайвих обмежень. А що робити, якщо потрібно...

Ознайомлення із CSS-анімацією (animation)

У минулій статті ми робили короткий огляд CSS-переходів, а в цьому пості проведемо ознайомлювальний рейд по корисним, як я сподіваюся, питанням CSS-анімації. Ці дві нові властивості в CSS3 дозволяють створювати на сайті привабливу і «магічну» інтерактивність, навіть без використання JavaScript. Також, в сьогоднішньому пості, розглянемо практичний приклад застосування властивості animation в CSS.   Анімація в CSS3 вже сьогодні використовується практично всіма сучасними веб-дизайнерами, незважаючи на більш високі стандарти і вимоги до браузерів. Оскільки ці нововведення...

Основи адаптивного дизайну в HTML5 і CSS3

Коли почали з’являтися перші смартфони і планшети, багато веб-майстрів почали розроблювати під ці пристрої окремі сайти. Трохи згодом почали з’являтися методи по впровадженню на сайті адаптивного дизайну. І тоді більшість веб-майстрів підхопило цю ідею, цим самим реалізовуючи принцип DRY (Don’t repeat yourself – не повторюй себе), яка полягає в тому, що інформація будь-якого вигляду не повинна дублюватись. Є багато причин, чому адаптивний веб-дизайн перейшов від того, щоб називатись тенденцією, до того, щоб бути синонімом кращих веб-практик. Це...

Ознайомлення з CSS-переходами (transition)

В сьогоднішній статті ми проведемо ознайомлювальний рейд по корисним, як я сподіваюся, питанням CSS-переходів. Ця нова властивість в CSS3 дозволяє створювати на сайті привабливу і «магічну» інтерактивність, навіть без використання JavaScript. Розглянемо також деякі практичні приклади застосування цієї властивості в CSS.     Розвиток мови CSS в останні роки зробив можливою реалізацію деяких дійсно дивовижних нововведень. Якщо ще 5 років тому для створення якоїсь інтерактивності на сайті була потрібна така програма, як, наприклад, Adobe Flash,...

Медіа-запити в CSS для респонсивного дизайну

В одній із минулих статей ми вже розглядали способи досягнення адаптивності в веб-дизайні за допомогою медіа-запитів CSS3. За допомогою CSS медіа-запитів веб-дизайнери можуть створювати стилі для певних пристроїв, а також при виконанні певних умов (наприклад, при певній ширині, висоті або орієнтації екрану пристрою). У цій публікації ми розглянемо приклади найбільш часто використовуваних медіа-запитів в веб-дизайні.   /* ----- Настільні комп'ютери та ноутбуки ----------- */ @media only screen and (min-width: 1224px) { /* ваші CSS-стилі тут...