css
(131)
HTML5 Page Visibility API
Раніше ми не мали браузерів, які працювати з багатьма вкладками. Але вже багато часу всі переглядачі пропонують нам цю функцію. Нам важко уявити, як це, працювати тільки з однією вкладкою. Зараз кожен користувач в середньому має 10-15 відкритих вклад...
Codeguida · 31 серпня 2020 · 9
Адаптивні зображення та відео за допомогою object-fit & object-position
У цій статті ми розглянемо дві властивості CSS про які не знають багато розробників. Називаються вони object-fit і object-position головна їх мета - стилізування зображення і відео. Спочатку ми продемонструємо те, як саме ними користуватися і потім п...
Codeguida · 27 серпня 2020 · 17
Скрол-анімація за допомогою JQuery
Що таке скрол-анімація та ефекти? Скрол-анімація та ефекти - це нова, але вже добре знана техніка, яка дає front-end розробникам можливість створювати гарні інтерактивні веб-інтерфейси. Щоб розпізнати, коли користувач прокручує сторінку, ми використо...
Codeguida · 10 серпня 2020 · 20
CSS фото-ефекти. Частина третя: Три методи зробити ефект віньєтки
Метод перший: box-shadow Найпопулярніший спосіб - це накласти box-shadow на елемент. Це, до речі, є дуже цікавою і гнучкою властивістю. Я навіть написала цілий пост про те, як можна зробити піксель-арт за допомогою box-shadow списків з функціями у Sa...
Codeguida · 31 липня 2020 · 133
Маловідомі CSS-властивості
Існує багато CSS-властивостей, про які деякі дизайнери просто не знають. Або знають, але забувають використовувати ці властивості там, де вони здатні принести велику користь. Деякі з цих властивостей можуть допомогти відмовитися від використання Java...
Alex · 20 липня 2020 · 447
Зміна 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
Анімування кнопки "До обраного" в Twitter
Твіттер нещодавно оновив дизайн кнопки "До обраного", додавши нову анімацію. В її основі не лежать CSS переходи, а використовуються серії зображень. Сьогодні ми розглянемо як відтворити анімацію за допомогою CSS функції steps(). Ілюзія руху Ефект схо...
Codeguida · 11 липня 2020
Підбірка CSS і Javascript бібліотек для створення анімаційних ефектів
CSS бібліотеки Досвідчені розробники і веб-дизайнери витратили велику кількість часу, щоб створити ці CSS бібліотеки для анімації. Тож ви можете просто скористатися їх напрацюваннями, додати елемент до таблиці стилів і використати потрібні вам анімац...
Codeguida · 24 червня 2020 · 28
Знайомство з CSS Font Loading API
Нещодавно в мене було бажання вивчити щось нове, і мій вибір пав на CSS Font Loading API. Чому саме він? Перш за все, він добре підтримується веб-браузерами, а це вже вагомий привід познайомитися з ним. А по-друге, він робить взаємодію з кастомними ш...
Codeguida · 3 роки тому · 2
Динамічні географічні карти з SVG і JQuery
Створюємо SVG мапу в Illustrator Створимо мапу Італії в Illustrator: Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовуваному в базі даних, щоб ідентифікувати відповідні...
Codeguida · 4 роки тому · 12
Візуальний гід по Bootstrap 4
Що нового в новій версії Bootstrap Останнім часом було багато розмов про Bootstrap 4. Ось візуальне керівництво, яке покаже вам, що нового в BS 4 в порівнянні з попередньою версією. Панелі тепер Картки Те, що ви помітите в Bootstrap 4 перша за все,...
Codeguida · 27 квітня 2020 · 4
Реагуючі блоки однакової висоти на основі Flexbox з JavaScript Fallback
Чому саме Flexbox? Тому що цей модуль був розроблений для того, щоб вирішити проблеми даного типу. Це гнучкий і ефективний спосіб управління для всіх видів макетів. Цей спосіб не створює майже ніякого часового розриву між правильним та неправильним в...
Codeguida · 25 квітня 2020 · 57