css
(131)
Інтро до Веб-компонентів
Фронтенд-розробка розвивається з шаленою швидкістю. Варто лише поглянути на численні статті, туторіали та треди у Twitter зі скаргами на технології, колись такі прості та зрозумілі. У цій статті ми з'ясуємо, чому для якісного користувацького досвіду...
Codeguida · 5 років тому · 25
CSS у SVG у CSS: як додавали конфеті до дизайн-системи Stack Overflow
Головний фронтендер Stack Overflow Аарон Шекей (Aaron Shekey) розповів у блозі, як його команда додавала на сайт конфеті: святкові анімації для привітання з будь-чим. Нам видався цікавим його підхід, тож публікуємо переклад цього тексту і сподіваємос...
Codeguida · 22 червня 2021 · 15
CSS-змінні. Стратегія застосування
Динамічні властивості CSS дають можливість створювати креативні рішення, натомість значно ускладнюють структуру коду. Отримати максимум користі можливо, використовуючи стратегію структурування СSS з користувацькими властивостями . Користувацькі СSS-в...
Codeguida · 29 червня 2018 · 534
Інклюзивні компоненти: картки
Деякі з компонентів, які розглядаються в блозі Хейдона Пікерінґа, мають задокументовані рекомендації для коректної роботи. Наприклад, стандарт WAI-ARIA передбачає певну структуру і поведінку для вкладок. Наскільки точно слідувати цим рекомендаціям —...
Codeguida · 26 лютого 2020 · 45
Front-end воїн - Scroll Progress
Сьогодні ми розглянемо кілька методів демонстрації прогресу прокрутки веб- сторінки. Ця техніка використовується на багатьох сайтах, і не дарма; вона забезпечує контекстуальне розуміння кількості інформації даної сторінки. Коли користувач виконує про...
Codeguida · 13 грудня 2021 · 29
CSS магія - створюємо пошукову форму
У цьому уроці я хотів би обговорити, як можна прикрасити просту форму пошуку. Ми не будемо робити нічого занадто складного. Просто дослідимо чотири різних варіанти форми пошуку за допомогою CSS. У вас вже є Basic Search Box У вашому HTML файлі ви пов...
Codeguida · 05 березня 2021 · 110
Повне керівництво по CSS Grid
Знайомство CSS Grid Layout (або просто "сітка") — це двовимірна система компонування, що повинна перевернути ваші уявлення про створення макетів. CSS вже давно використовується для компонування елементів на сторінці, але він майже ніколи не виконував...
Codeguida · 27 травня 2017 · 56
Невелика колекція ефектів для діалогових вікон з використанням CSS-анімації
Стилі і тренди змінюються і це вимагає від нас ініціалізації різних ефектів, які підходять для сучасного інтерфейсу. Цей набір містить деякі основні анімації, а також більш незвичні, з використанням техніки SVG морфінга для діалогів зі Snap.svg. Звер...
Codeguida · 29 березня 2020 · 6
Скролінг в майбутнє
Можливість прогортати інформацію сприймається як належне всіма користувачами. Однак реалізувати скролінг, який добре працюватиме поміж браузерами й чудово вписуватиметься в дизайн, може бути непросто. Коли веб-стандарти розвиваються швидше, ніж коли-...
Codeguida · 22 червня 2018 · 38
Повне керівництво по Flexbox
Це повне керівництво пояснює все про flexbox, зосереджуючись на всіх можливих властивосях для батьківського елемента (контейнер flex) та дочірніх елементів (елементи flex). Воно також включає в себе історію, демонстрації, шаблони і таблицю підтримки...
Alex · 11 жовтня 2020 · 3.9K
Sass vs LESS vs Stylus: Вибір препроцесора
Напевно багато з вас чули про CSS препроцесор. Писати код, використовуючи його потужні можливості - справді чудово і захоплююче. Та що ж таке той препроцесор? Який препроцесор обрати? Сьогодні ми в цьому розберемося. В цій статті ми розглянемо деякі...
Codeguida · 06 січня 2021 · 40
Знайомимось з SASS
Хочете вивчити Sass, але ніяк не складається? Тоді читайте далі, тому що сьогодні ми збираємося розглянути особливості Sass і деякі цікаві речі, які ви можете робити з його допомогою. Що таке Sass? Sass (Syntactically Awesome Style Sheets) \- це CSS-...
Codeguida · 22 січня 2020 · 120