css
(131)
Bootstrap Grid за 15 хвилин
Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ним легко працювати. Той хто знає HTML, CSS і трохи...
Codeguida · 20 лютого 2020 · 95
Створення кнопок Play/Pause на чистому CSS
Загалом, іконки для контролю мультимедіа є універсально зрозумілою візуальною мовою для будь-яких інтерфейсів. Дизайнер може спокійно вважати, що кожен користувач не лише знає, що ▶️ = грати, але й те, що користувач буде шукати цю іконку для того, що...
Codeguida · 10 листопада 2017 · 69
Лінтинг у CSS: корисні та маловідомі можливості Stylelint
Писати якісний CSS — це аж ніяк не просте завдання. Схоже, що CSS дратує людей більше, ніж інші технології, тому дивно, що лінтери на кшталт Stylelint обговорюються рідко. Виявлення й виправлення помилок під час роботи, а ще найкращі практики написан...
Codeguida · 21 вересня 2021 · 68 · 1
Прозорість та анімація з нею в CSS
0 для непрозорості Ми можемо використовувати непрозорість, щоб контролювати видимість елементів на сторінці - від повністю видимого до повністю прозорого елемента. Ось кілька порад при використанні opacity , щоб правильно зазначати видимість елемента...
Codeguida · 04 червня 2021 · 66
Повне керівництво по CSS Grid
Знайомство CSS Grid Layout (або просто "сітка") — це двовимірна система компонування, що повинна перевернути ваші уявлення про створення макетів. CSS вже давно використовується для компонування елементів на сторінці, але він майже ніколи не виконував...
Codeguida · 6 років тому · 64
Основи Webpack: Частина 2
У першій частині туторіалу ми дізналися, як створити Webpack проект, а також як використовувати лоадери для обробки нашого JavaScript коду. Але найголовніша властивість Webpack полягає в його здатності бандлити інші типи, такі як CSS і зображення, та...
Codeguida · 12 листопада 2021 · 61
Способи додати CSS в JavaScript застосунок
Перед обговоренням такої неоднозначної теми як CSS в JS варто зрозуміти, що немає жорсткого правила, яке б встановлювало єдиний спосіб для обробки CSS в застосунках на React, Vue чи Angular. Кожен проєкт різний, а кожен метод має свої переваги та нед...
Codeguida · 18 липня 2019 · 59
Реагуючі блоки однакової висоти на основі Flexbox з JavaScript Fallback
Чому саме Flexbox? Тому що цей модуль був розроблений для того, щоб вирішити проблеми даного типу. Це гнучкий і ефективний спосіб управління для всіх видів макетів. Цей спосіб не створює майже ніякого часового розриву між правильним та неправильним в...
Codeguida · 25 квітня 2020 · 57
Оформлення пагінації сторінок за допомогою CSS
Перемикачі сторінок - засіб, який допоможе вашим користувачам з легкістю подорожувати сайтом. Гідною альтернативою є нескінченна прокрутка, однак у неї теж є як свої плюси, так і мінуси. Фреймворки, на кшталт Bootstrap, мають потужні вбудовані засоби...
Codeguida · 06 січня 2021 · 56
Способи використання CSS змінних
Препроцесори допомагають організувати й підтримувати ваш код CSS. Змінні, міксини, цикли тощо сприяють мінімізації повторень та прискорюють розробку шляхом додавання динамічних можливостей до написання CSS. Деякі динамічні можливості почали з'являтис...
Codeguida · 21 червня 2017 · 55
9 порад щодо оптимізації зображень для прискорення вашого сайту
У цій статті ми розглянемо ефективні методи оптимізації зображень, які значно покращать продуктивність вашого застосунку. Почнемо з самого початку! 1. Формати зображень Вибір правильного формату зображення для кожного типу зображення може суттєво впл...
Alex · 31 липня 2023 · 49
Приголомшливі hover-ефекти за допомогою CSS змінних
Нещодавно я надихнувся грайливою hover-анімацією на сайті Grover. Переміщення мишки над кнопкою підписки має градієнтну заливку, яка видозмінюється при пересуванні курсору. Ідея проста, але результатом є кнопка, що виділяється з-поміж інших. Як можн...
Codeguida · 26 березня 2018 · 47