html
(70)
Створення кнопок Play/Pause на чистому CSS
Загалом, іконки для контролю мультимедіа є універсально зрозумілою візуальною мовою для будь-яких інтерфейсів. Дизайнер може спокійно вважати, що кожен користувач не лише знає, що ▶️ = грати, але й те, що користувач буде шукати цю іконку для того, що...
Codeguida · 10 листопада 2017 · 68
Досить зловживати div: інтро до семантичного HTML
div проявив себе Усі ми любимо тег div. Він існує вже давно і за цей час став найпопулярнішим елементом для огортання будь-якого контенту в блок, щоб стилізувати чи структурувати його. Навіть зараз у продакшені часто можна натрапити на подібний код:...
Codeguida · 15 квітня 2019 · 61
10 рекомендацій для покращення веб-доступності вашого сайту
Ми склали список із 10 рекомендацій для покращення веб-доступності вашого сайту будь-якою людиною, не зважаючи на певні розлади здоров'я. Керівник W3C і винахідник Всесвітньої мережі Інтернет Тім Бернерс-Лі, сказав: Сила вебу в його універсально...
Codeguida · 15 вересня 2017 · 59
Реагуючі блоки однакової висоти на основі Flexbox з JavaScript Fallback
Чому саме Flexbox? Тому що цей модуль був розроблений для того, щоб вирішити проблеми даного типу. Це гнучкий і ефективний спосіб управління для всіх видів макетів. Цей спосіб не створює майже ніякого часового розриву між правильним та неправильним в...
Codeguida · 25 квітня 2020 · 57
Простий спосіб додавання CSS анімації до переходів між сторінками
Радий з вами поділитися цікавим та дуже простим jQuery плагіном Аnimsition. Animsition дає можливість додавати до посилань CSS анімацію при переході. Animsition має 18 різних анімацій: Зникнення `fade-in, fade-out, fade-in-up, fade-out-up, fade-in-do...
Codeguida · 03 червня 2020 · 52
9 порад щодо оптимізації зображень для прискорення вашого сайту
У цій статті ми розглянемо ефективні методи оптимізації зображень, які значно покращать продуктивність вашого застосунку. Почнемо з самого початку! 1. Формати зображень Вибір правильного формату зображення для кожного типу зображення може суттєво впл...
Alex · 31 липня 2023 · 49
Декілька гарних текстових ефектів з використанням CSS
У цьому уроці навчимося створювати деякі цікаві текстові ефекти за допомогою CSS3. Вони використовуються, щоб зробити сайт більш елегантним. Розглянемо 11 ефектів, які може використати кожен веб-дизайнер для свого веб-проекту. Text- shadow атрибут ви...
Codeguida · 14 січня 2020 · 47
Інклюзивні компоненти: картки
Деякі з компонентів, які розглядаються в блозі Хейдона Пікерінґа, мають задокументовані рекомендації для коректної роботи. Наприклад, стандарт WAI-ARIA передбачає певну структуру і поведінку для вкладок. Наскільки точно слідувати цим рекомендаціям —...
Codeguida · 26 лютого 2020 · 45
Зміна SVG іконок
Метод №1: сховати/показати SVG елемент Включаємо обидві іконки: <a class="expand-link" href="#0"> <svg class="icon icon-expand" viewBox="0 0 32 32"><use xlink:href="#icon-expand"></use></svg> <svg class="icon icon-contract" viewBox="0...
Codeguida · 15 липня 2020 · 44
Скролінг в майбутнє
Можливість прогортати інформацію сприймається як належне всіма користувачами. Однак реалізувати скролінг, який добре працюватиме поміж браузерами й чудово вписуватиметься в дизайн, може бути непросто. Коли веб-стандарти розвиваються швидше, ніж коли-...
Codeguida · 22 червня 2018 · 41
Гід по оптимізації веб-сторінок та додатків
Коли справа доходить до продуктивності, ми не маємо права примушувати користувачів чекати і залишити веб-сторінку з негативними враженнями. Оптимізація є основою професійного створення сайту. Що визначає швидкість сторінки? Можна виділити наступні пу...
Codeguida · 27 червня 2021 · 38
Способи спрощення обробників подій
Ми маємо справу з обробниками подій щоразу, коли користувач клікає на певний елемент, створює фокус клавіатурою чи вводить текст в поле форми. Дуже важливо не перевантажувати обробники зайвим кодом і, власне, не створювати зайвих обробників. Почнемо...
Codeguida · 24 червня 2019 · 34