Веб-дизайнери та розробники завжди шукають щось нове та креативне, щоб зробити свій сайт унікальним та виразним. Один із таких способів візуально привернути увагу, – використовувати градієнтний текст. Градієнтний текст –…
Якщо ви хочете додати на свій сайт можливість перемикання між світлим/темним режимом кольорового оформлення, тоді ви потрапили за адресою. Хоча така «фіча» може і не користуватися попитом, але з її…
В цьому практичному уроці я покажу вам кілька простих анімацій, які можна створити з допомогою ключових кадрів (keyframes) в CSS. Це будуть найпростіші приклади, більш складніші варіанти розглянемо в наступних…
Сьогодні левова частка сучасних та популярних сайтів побудована з використанням адаптивного макету, flexbox чи grid систем. Якщо ви візьмете будь-який популярний двигун (CMS) та/або фреймворк — практично всі вони мають…
Вже практично не викликає сумнівів те, що використання новітніх технологій на сайті здатне покращити UX (User experience) – взаємодію з користувачем. Масштабовану векторну графіку (іншими словами SVG) можна віднести до…
CSS-анімація давно та міцно завоювала визнання користувачів завдяки не тільки своїй простоті, але й можливостям. Використовуючи CSS-анімацію, веб-майстри додають гарну візуальну складову на свій сайт, а також привертають увагу до…
Часто програмістам ставлять завдання створити таймер зворотного відліку, наприклад, коли у клієнта намічається важливий захід, розпродаж або він хоче запустити рекламну акцію. З погляду маркетингу, з таймерами зворотного відліку все…
Досить часто при верстці веб-проекту є потреба в створенні круглих елементів: круглі кнопки, круглі мініатюри, круглі іконки, або навіть цілі круглі контейнери. В деяких випадках вийти з ситуації можна з…
Одиниця перегляду, або, як її ще називають – довжина у відсотках від області перегляду – це адаптивна одиниця в CSS стилях, яка дозволяє визначати розміри в процентах від ширини або…
Односторінковий сайт ідеально підійде для просування нового продукту, короткострокової рекламної кампанії або сайтів-портфоліо. Досить часто для односторінкових сайтів (їх ще називають посадковими сторінками, цільовими сторінками і лендінгами) використовуються повноекранні секції,…
В сьогоднішньому уроці ми на практиці розглянемо те, як можна створити просту, але дуже красиву кнопку для пошуку, всього лише з допомогою CSS3 і jQuery. Готова кнопка буде виглядати…
Одним з найбільш ефективних способів підвищити продуктивність та швидкість завантаження сторінок сайту є асинхронне завантаження CSS файлів. При використанні цього способу не буде відбуватися зайва затримка для завантаження сторінки через…
Якщо ви розробник і пишете на HTML/CSS, вам потрібно знати основні моменти, які стосуються безпеки. Хтось може сказати, що HTML і CSS не можуть бути об’єктом атаки зловмисників, але з…
Адаптивний або чуйний веб-дизайн – це не тільки стовпці, сітки, картинки та іконки. Все це не матиме сенсу без текстового контенту. Як одного разу сказав Білл Гейтс: «Контент – це…
Вже понад 5 років в веб-дизайні лідируючі позиції займає плаский дизайн (flat design). Після того, як в 2010 році корпорація Microsoft випустила ОС Windows 8, в якій користувацький інтерфейс витриманий…