html
(71)
Гайд по CSS селекторам
CSS селектори - основа розуміння CSS. Селектори - це те, що допомагає визначити певний HTML елемент і додати до нього стилі. Тож не будемо обговорювати стилі і зосередимось на селекторах.
В прикладах...
10 травня 2021
·
0
· 579
·
Codeguida
Введення в SVG анімацію за допомогою SMIL
На Sitepoint
нещодавно був розміщений виклик - відтворити цю забавну GIF анімацію за
допомогою HTML і CSS:
Це виглядає дуже просто, але це важко зробити без великої кількості ключових
кадрів. Я схиля...
05 квітня 2021
·
0
· 94
·
Codeguida
Створюємо власний блог з допомогою Parse.js, частина 5: Router
Попередні уроки:
Створюємо власний блог з допомогою Parse.js
Створюємо власний блог з допомогою Parse.js: Працюємо з даними
Створюємо власний блог з допомогою Parse.js: Авторизація користувачів...
03 квітня 2021
·
0
· 4
·
Codeguida
CSS магія - створюємо пошукову форму
У цьому уроці я хотів би обговорити, як можна прикрасити просту форму пошуку.
Ми не будемо робити нічого занадто складного. Просто дослідимо чотири різних
варіанти форми пошуку за допомогою CSS.
У вас...
05 березня 2021
·
0
· 272
·
Codeguida
9 причин використовувати CodePen
CodePen.io описують себе як "майданчик для front-end частини веб-сторінки." CodePen відмінно підходить для тестування багів, співпраці та отримання натхнення від представлених робіт. Він працює, дозво...
21 лютого 2021
·
0
· 90
·
Codeguida
Використання SVG для стиснення ваших PNG зображень
Чи не було б чудово отримати стиснений JPEG і зберегти прозорість у PNG? І це
реально. Ось невеликий трюк, який я відкрив, коли працював на новому сайті
Sapporo Beer.
Зверніть, що пиво на сайті Sapp...
13 січня 2021
·
0
· 5
·
Codeguida
Ефекти стиснення в порівнянні з мінімізацією HTML файлів
Минулого разу ми розглянули вплив на продуктивність використання табуляції та пробілів в HTML.
Виникло нове питання: Чи варто використовувати зменшення HTML файлу, коли вже
використовуєш GZip. Давайте...
12 січня 2021
·
0
· 10
·
Codeguida
А ви зможете зробити це за допомогою CSS?(Частина перша)
Простий приклад
Тут ми маємо три текстових поля, які використовують місцезаповнювачі.
Як ви можете бачити - нічого складного. Коли ви фокусуєтесь на якомусь з
полів, то з'являється назва цього поля,...
06 січня 2021
·
0
· 3
·
Codeguida
Створюємо власний блог з допомогою Parse.js, частина 1
Ви коли-небудь стикалися з ситуацією, коли ви маєте ідею для веб-ресурсу, але
не знаєте як її можна реалізувати? З Parse.js кожен, хто осягнув ази
HTML, CSS і JavaScript може створити динамічний веб-...
27 листопада 2020
·
0
· 19
·
Codeguida
nanobar.js - прогрес-бар без JQuery
Приклад:
var options = {
bg: '#acf',
target: document.getElementById('myDivId'),
id: 'mynano'
};
var nanobar = new Nanobar( options );
nanobar.go( 30...
26 листопада 2020
·
0
· 1
·
Codeguida
Адаптивні зображення: використання srcset
Якщо Ви почати використовувати адаптивні зображення (різні зображення в HTML
для різних ситуацій) і все, що Ви робите, це перемикаєтесь між різними
версіями одного і того ж зображення (найпопулярніший...
18 листопада 2020
·
0
· 86
·
Codeguida
Повне керівництво по Flexbox
Це повне керівництво пояснює все про flexbox, зосереджуючись на всіх можливих властивосях для батьківського елемента (контейнер flex) та дочірніх елементів (елементи flex). Воно також включає в себе і...
11 жовтня 2020
·
3
· 4.6K
·
Alex
Переходимо до адаптивного вебу
Давайте почнемо з чуйного або реагуючого (responsive) веб-дизайну.
Кожен веб-розробник сьогодні знайомий з концепцією чуйного веб-дизайну (RWD). В травні 2010, концепція була прийнята в якості передов...
01 жовтня 2020
·
0
· 2
·
Codeguida
Створення 3D логотипу за допомогою three.js
В цій статті, ми створимо 3D версію логотипу Treehouse використовуючи
three.js. Нажміть та перетягуйте мишу для переміщення камери! Також ви можете
використовувати колесо миші для масштабування.
Демо...
28 вересня 2020
·
0
· 65
·
Codeguida
VenoBox
Основною перевагою VenoBox є те, що він обчислює максимальну ширину зображення
на екрані і зберігає його висоту, якщо воно вище вікна (в невеликих пристроях
ви можете прокрутити вміст вниз, уникаючи м...
24 вересня 2020
·
0
· 4
·
Codeguida
Ефективність табуляції та пробілів в HTML
Як ви робите відступи у вашій розмітці? З допомогою табуляції чи пропуску?
Невже це важливо для продуктивності? Давайте проведемо експеримент.
Розглянемо сторінку, яка створює список з 50-ти предметів...
30 серпня 2020
·
0
· 65
·
Codeguida
Маловідомі CSS-властивості
Існує багато CSS-властивостей, про які деякі дизайнери просто не знають. Або знають, але забувають використовувати ці властивості там, де вони здатні принести велику користь. Деякі з цих властивостей...
20 липня 2020
·
2
· 478
·
Alex
Зміна 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...
15 липня 2020
·
0
· 68
·
Codeguida
Простий спосіб додавання CSS анімації до переходів між сторінками
Радий з вами поділитися цікавим та дуже простим jQuery плагіном
Аnimsition. Animsition дає можливість
додавати до посилань CSS анімацію при переході.
Animsition має 18 різних анімацій:
Зникнення
`fade...
03 червня 2020
·
0
· 95
·
Codeguida
Динамічні географічні карти з SVG і JQuery
Створюємо SVG мапу в Illustrator
Створимо мапу Італії в Illustrator:
Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовува...
14 травня 2020
·
1
· 47
·
Codeguida
Візуальний гід по Bootstrap 4
Що нового в новій версії Bootstrap
Останнім часом було багато розмов про Bootstrap 4. Ось візуальне керівництво, яке покаже вам, що нового в BS 4 в порівнянні з попередньою версією.
Панелі тепер Карт...
27 квітня 2020
·
0
· 11
·
Codeguida
Реагуючі блоки однакової висоти на основі Flexbox з JavaScript Fallback
Чому саме Flexbox? Тому що цей модуль був розроблений для того, щоб вирішити проблеми даного типу. Це гнучкий і ефективний спосіб управління для всіх видів макетів. Цей спосіб не створює майже ніякого...
25 квітня 2020
·
0
· 84
·
Codeguida
Шапка, яка прилипає і автоматично приховується
Шапка, яка приєднується і автоматично приховується, - постріл, який вбиває
відразу двох зайців: робить навігацію по сайту більш простою і доступною в
будь-якому місці сторінки та зберігає робочий прос...
06 квітня 2020
·
0
· 56
·
Codeguida
Спілкування в режимі реального часу
Socket.io \- це дійсно крута річ, вона дає вам можливість обмінюватися даними між клієнтами в режимі реального часу. Реалізуючи її разом з AngularJS, ви можете легко оновлювати вікно перегляду користу...
25 березня 2020
·
0
· 24
·
Codeguida
