Tag: CSS3

Огляд властивості 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). Останні властивості завоювали любов веб-дизайнерів завдяки своїй...

Які елементи можна (і потрібно) розміщувати у футері сайту

Розробка оптимального футеру (підвалу, нижньої частини, нижнього колонтитулу) сайту не завжди є у списку пріоритетів веб-дизайнера. З огляду на те, що футер знаходиться в самому низу веб-сторінки, легко припустити, що більшість відвідувачів сайту його майже не помічають, і тому не всі розробники приділяють йому достатньо уваги. Хоча футер, насправді, є дуже важливою частиною будь-якого сайту. За даними спеціального дослідження, приблизно 70% відвідувачів можуть прокручувати сайт до футеру, а приблизно 25% відвідувачів завжди будуть прокручувати сайт...

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

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

Кращі практичні рекомендації по веб-дизайну

Якщо ви фрілансер, а ваша робота залежить від дизайну, значить ви іноді стикалися з поганим веб- дизайном. Дизайн – це важливий аспект в кожному проекті з веб-розробки. І неважливо, наскільки якісний код на сайті, якщо ваш макет змушує відвідувачів нервово здригатися. У цій статті ми детально розглянемо кращі практичні рекомендації по дизайну, які поліпшать ваші навички і розширять ваш кругозір.     Стежте за сучасними тенденціями Якщо ви періодично переглядаєте різні сайти в Інтернеті, ви...

Поради щодо оптимізації мобільного веб-дизайну

В останні роки мобільний трафік значно зріс і ця тенденція зберігається. Тому важливо приділяти особливу увагу оптимізації своїх проектів під мобільні пристрої. У цій статті ми розглянемо практичні поради щодо оптимізації веб-дизайну під мобільні пристрої.     №1: Використання декількох зображень в поєднанні з медіа-запитами Сподіваємося, що ви вже знайомі з медіа-запитами. Для мобільного дизайну медіа-запити є майже основними. В даний час проблема з медіа-запитами полягає в тому, що багато дизайнерів і розробники створюють сайти...

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

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

Соціальний проект – сайт-візитка кожній школі Житомира

Наша команда вирішила створити сайт мережі шкіл у м.Житомирі в якості соціального експерименту. На даний момент не у кожної школи Житомира є сайт, а ті що є або застарілі, або використовують старі технології та CMS. До того ж практично кожен другий старий сайт містить віруси, що шкодить не тільки іміджу школи, а й відвідувачам таких сайтів. Інформація на сайтах розміщується часто хаотично, довго не оновлюється і викликає сумніви. Тож ми вирішили змінити цю ситуацію, та...

Використання 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 вже сьогодні використовується практично всіма сучасними веб-дизайнерами, незважаючи на більш високі стандарти і вимоги до браузерів. Оскільки ці нововведення...