html
(70)
Як зробити таби на чистому CSS, а потім ще з них зробити акордеон
Перш ніж почнемо — демо можна знайти ось тут, а сам код повністю — ось тут. Запрошую до вивчення, художнього читання на різні голоси та усіляких забав з цим кодом. Маленький такий дисклеймер — це все винятково для забави та щоби показати вам, який на...
Codeguida · 05 липня 2021 · 10Створюємо власний блог з допомогою Parse.js, частина 1
Ви коли-небудь стикалися з ситуацією, коли ви маєте ідею для веб-ресурсу, але не знаєте як її можна реалізувати? З Parse.js кожен, хто осягнув ази HTML, CSS і JavaScript може створити динамічний веб-сайт або web- додаток з легкістю. У цьому уроці ро...
Codeguida · 27 листопада 2020 · 7Способи спрощення обробників подій
Ми маємо справу з обробниками подій щоразу, коли користувач клікає на певний елемент, створює фокус клавіатурою чи вводить текст в поле форми. Дуже важливо не перевантажувати обробники зайвим кодом і, власне, не створювати зайвих обробників. Почнемо...
Codeguida · 24 червня 2019 · 34Додаємо анімації життя
Перша ітерація - стандартне "послаблення" Це перша версія - звичайний, рукописний CSS3 ключовий кадр анімації з використанням всього двох клавіш: .form { animation: form-fly-up 0.35s ease; } @keyframes form-fly-up { 0% { t...
Codeguida · 02 вересня 2021 · 10Переходимо до адаптивного вебу
Давайте почнемо з чуйного або реагуючого (responsive) веб-дизайну. Кожен веб-розробник сьогодні знайомий з концепцією чуйного веб-дизайну (RWD). В травні 2010, концепція була прийнята в якості передової практики, процес почав вдосконалюватися і з'яви...
Codeguida · 01 жовтня 2020Чому варто використовувати тег <picture> замість <img>
Використання зображень та анімацій в інтерфейсах користувача стало поширеною практикою в сучасних веб застосунках. Хоча ці приклади сучасного дизайну фокусуються на підвищенні зручності роботи з вашим застосунком, але можуть виникати проблеми якщо зо...
Alex · 3 роки тому · 1.4KСтворення кнопок Play/Pause на чистому CSS
Загалом, іконки для контролю мультимедіа є універсально зрозумілою візуальною мовою для будь-яких інтерфейсів. Дизайнер може спокійно вважати, що кожен користувач не лише знає, що ▶️ = грати, але й те, що користувач буде шукати цю іконку для того, що...
Codeguida · 10 листопада 2017 · 68Як не гаяти час на завантаження невидимого контенту
Браузер не розрізняє невидимий вміст від видимого Зазвичай не весь вміст вебсторінки поміщається на одному екрані. Коли сторінка відкривається, браузер обчислює розміри та позиції всіх DOM-елементів на ній. Елементи завантажуються, навіть якщо більші...
Codeguida · 17 жовтня 2021 · 118Декілька гарних текстових ефектів з використанням CSS
У цьому уроці навчимося створювати деякі цікаві текстові ефекти за допомогою CSS3. Вони використовуються, щоб зробити сайт більш елегантним. Розглянемо 11 ефектів, які може використати кожен веб-дизайнер для свого веб-проекту. Text- shadow атрибут ви...
Codeguida · 14 січня 2020 · 47Різні способи написання CSS у React
Ми всі знайомі зі стандартним способом приєднання таблиці стилів у <head> HTML-документа, чи не так? Це лише один з декількох способів написання CSS. Але як це виглядає, якщо ми хочемо створити стиль в односторінковому додатку (SPA), скажімо, в проєк...
Alex · 04 серпня 2023 · 125Вступ до LESS
Ви можливо вже зустрічалися з цим CSS-препроцесором, але вирішили не починати його вивчення, тому що він виглядає складним, а ще вам знову буде потрібно запам'ятати величезну кількість нового синтаксису. Так, частково - це правда. Але базові знання L...
Codeguida · 30 січня 2020 · 7Bootstrap Grid за 15 хвилин
Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ним легко працювати. Той хто знає HTML, CSS і трохи...
Codeguida · 20 лютого 2020 · 95