Category: CSS

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

Приклад односторінкового сайту з повноекранними секціями

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

Як зробити красиву анімовану кнопку Пошук з CSS3 та jQuery

В сьогоднішньому уроці ми на практиці розглянемо те, як можна створити просту, але дуже красиву кнопку для пошуку, всього лише з допомогою CSS3 і jQuery.   Готова кнопка буде виглядати приблизно так:     Для створення такої гарної анімованої кнопки для вікна пошуку ми будемо використовувати наступні інструменти: HTML – для структури документу CSS3 – для стильового оформлення та анімації руху jQuery – для реагування на натискання кнопок     Деякий час тому назад розробники...

Як завантажувати CSS файли асинхронно

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

Основні моменти для безпеки HTML і CSS

Якщо ви розробник і пишете на HTML/CSS, вам потрібно знати основні моменти, які стосуються безпеки. Хтось може сказати, що HTML і CSS не можуть бути об’єктом атаки зловмисників, але з розвитком веб-технологій у них для атаки з’являються все більше можливостей. В сьогоднішній статті ми розглянемо найважливіші моменти, на які слід звернути увагу кожному розробнику. Вони допоможуть слідувати кращим методикам безпеки та уникнути вразливостей.     Кращі практики для безпеки Ретельно перевіряйте залежності, використовувані в вашому...

Основи чуйної (responsive) типографії у веб-дизайні

Адаптивний або чуйний веб-дизайн – це не тільки стовпці, сітки, картинки та іконки. Все це не матиме сенсу без текстового контенту. Як одного разу сказав Білл Гейтс: «Контент – це король». Тому, адаптивна типографія – це той важливий фактор, який не повинен залишати поза увагою кожен веб-дизайнер і веб-розробник. У сьогоднішній статті ми обговоримо основи створення адаптивної веб-типографіки, а також ті фактори, які впливають на це.     Основи типографії Гарна типографія – це правильний...

Як домогтися багатоколірного фону тільки за допомогою 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>...

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