Tag: CSS3

Як домогтися багатоколірного фону тільки за допомогою CSS

Вже понад 5 років в веб-дизайні лідируючі позиції займає плаский дизайн (flat design). Після того, як в 2010 році корпорація Microsoft випустила ОС Windows 8, в якій користувацький інтерфейс витриманий в стилі плаского дизайну, цей дизайн почав стрімко набирати популярність. Flat design представлений у вигляді протилежності реалізму і, за задумом, повинен підкреслювати ефект «чарівної простоти» і витонченості. Крім цього плаский дизайн привніс барвистість в традиційний дизайн. Сьогодні яскраві кольори відіграють основну роль у всіх сучасних...

Як домогтися адаптивності картинок з допомогою CSS

У сьогоднішній статті ми на практиці розглянемо техніку, за допомогою якої зможемо досягти адаптивності для картинок на своєму сайті. Ми розглянемо 2 способи, які дозволять зробити картинки адаптивними з використанням невеликої кількості CSS.     Побудова адаптивного макета картинок Для початку припустимо, що у нас є така проста HTML розмітка: <div class="images-box"> <a href="image-URL"> <figure> <img src="image-URL" alt="альтернативний текст картинки"> </figure> </a> <!-- наступні картинки ... --> </div>     На великих екранах наша галерея...

Як створити прості кнопки за допомогою CSS3

У сьогоднішньому уроці ми на практиці зробимо кілька класних, але простих, кнопок за допомогою CSS3 стилів. Ви можете їх використовувати для красивого оформлення користувацького інтерфейсу своїх проектів. Отже, приступимо…   Крок №1 – HTML код (каркас) Каркасний HTML-код дуже простий, ми створимо 3 тега для посилання (<a>) з класом button, і, оскільки ми будемо використовувати три різних колірних стилів, дамо кожному посиланню свій клас для кольору. <html> <body> <div id="buttons"> <a href="#" class="button green">кнопка 1</a>...

9 онлайн платформ, на яких можна швидко поділитися кодом

Програмісти, в основному, використовують IDE (інтегроване середовище розробки) для своєї роботи і написання коду. Це досить потужні інструменти, в яких є інтуїтивно зрозумілий та зручний інтерфейс, включені передвстановлені бібліотеки, є підтримка безлічі мов, генератори коду, інструменти для спільної роботи та інші. Але, іноді, є потреба в тому, щоб можна було швидко поділитися з іншими сніпетами коду, який робочий і доступний онлайн. Наприклад, вам потрібно розмістити на своєму сайті шматок робочого коду і показати демо його...

Приклад використання функції calc() для зміни розміру шрифту в CSS

Раніше ми робили короткий огляд функції calc() в CSS. Сьогодні ми хочемо розглянути невеликий практичний приклад, який дасть рішення для плавного масштабування розміру шрифта в залежності від розміру екрана. Якщо раніше подібні завдання вирішувалися за допомогою jQuery, то з появою функції calc(), це можна зробити за допомогою чистого CSS. Функція calc() дозволяє робити прості математичні обчислення прямо в CSS. А це дозволяє легше створювати адаптивні макети сайтів. Давайте розглянемо один невеличкий реальний підхід, який дозволить...

Ознайомлення з функцією calc() в CSS

Функція calc() в CSS – це простий спосіб виконати прості математичні дії прямо в CSS стилях без використання, наприклад, мови програмування PHP. Функція вміє працювати з чотирма простими математичними операторами: додавання (+), віднімання (–), множення (*) і ділення (/). З допомогою функції calc() ви можете розрахувати значення властивостей CSS прямо під час їх визначення.     Приклад синтаксису функції calc() /* властивість: calc(математична дія); */ width: calc(100% - 35px);   Математична дія, яку можна виконати для виразу,...

Основні види 3D-трансформацій в CSS

Коли з’явилися CSS-трансформації, з елементами стало можливим проводити різні перетворення: їх можна зміщувати, повертати, нахиляти, здавлювати і розтягувати. А за допомогою 3D-перетворень в CSS стали можливими ще більш неймовірні речі. Вони дають можливість розробникам додати новий вимір на свої сайти. Спочатку тривимірні трансформації можуть здатися трохи приголомшуючими, особливо якщо врахувати, що HTML-полотно (екран монітора) – це 2D-простір. Але якщо ви уявите собі, що ваш сайт має і глибину (вглиб екрану, або виступаючи з екрану), тоді...

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