html
(70)
Введення в SVG анімацію за допомогою SMIL
На Sitepoint нещодавно був розміщений виклик - відтворити цю забавну GIF анімацію за допомогою HTML і CSS: Це виглядає дуже просто, але це важко зробити без великої кількості ключових кадрів. Я схилявся до SVG, але вже давно хотів дати можливість SM...
Codeguida · 3 роки тому · 29
Створюємо власний блог з допомогою Parse.js, частина 5: Router
Попередні уроки: Створюємо власний блог з допомогою Parse.js Створюємо власний блог з допомогою Parse.js: Працюємо з даними Створюємо власний блог з допомогою Parse.js: Авторизація користувачів Створюємо власний блог з допомогою Parse.js, час...
Codeguida · 3 роки тому · 4
CSS магія - створюємо пошукову форму
У цьому уроці я хотів би обговорити, як можна прикрасити просту форму пошуку. Ми не будемо робити нічого занадто складного. Просто дослідимо чотири різних варіанти форми пошуку за допомогою CSS. У вас вже є Basic Search Box У вашому HTML файлі ви пов...
Codeguida · 05 березня 2021 · 110
9 причин використовувати CodePen
CodePen.io описують себе як "майданчик для front-end частини веб-сторінки." CodePen відмінно підходить для тестування багів, співпраці та отримання натхнення від представлених робіт. Він працює, дозволяючи створити "pen" \- набір HTML, CSS і JavaScri...
Codeguida · 21 лютого 2021 · 24
Використання SVG для стиснення ваших PNG зображень
Чи не було б чудово отримати стиснений JPEG і зберегти прозорість у PNG? І це реально. Ось невеликий трюк, який я відкрив, коли працював на новому сайті Sapporo Beer. Зверніть, що пиво на сайті Sapporo має прозору зону(це важко помітити). У форматі...
Codeguida · 13 січня 2021 · 1
Ефекти стиснення в порівнянні з мінімізацією HTML файлів
Минулого разу ми розглянули вплив на продуктивність використання табуляції та пробілів в HTML. Виникло нове питання: Чи варто використовувати зменшення HTML файлу, коли вже використовуєш GZip. Давайте проведемо експеримент. Я зібрав декілька реальних...
Codeguida · 12 січня 2021 · 4
А ви зможете зробити це за допомогою CSS?(Частина перша)
Простий приклад Тут ми маємо три текстових поля, які використовують місцезаповнювачі. Як ви можете бачити - нічого складного. Коли ви фокусуєтесь на якомусь з полів, то з'являється назва цього поля, певного роду нагадування користувачу, що саме він...
Codeguida · 06 січня 2021 · 2
Створюємо власний блог з допомогою Parse.js, частина 1
Ви коли-небудь стикалися з ситуацією, коли ви маєте ідею для веб-ресурсу, але не знаєте як її можна реалізувати? З Parse.js кожен, хто осягнув ази HTML, CSS і JavaScript може створити динамічний веб-сайт або web- додаток з легкістю. У цьому уроці ро...
Codeguida · 27 листопада 2020 · 6
nanobar.js - прогрес-бар без JQuery
Приклад: var options = { bg: '#acf', target: document.getElementById('myDivId'), id: 'mynano' }; var nanobar = new Nanobar( options ); nanobar.go( 30 ); // size bar 30% nanobar.go(100); Інст...
Codeguida · 26 листопада 2020
Адаптивні зображення: використання srcset
Якщо Ви почати використовувати адаптивні зображення (різні зображення в HTML для різних ситуацій) і все, що Ви робите, це перемикаєтесь між різними версіями одного і того ж зображення (найпопулярніший варіант), все, що Вам потрібно, - це атрибут srcs...
Codeguida · 18 листопада 2020 · 12
Повне керівництво по Flexbox
Це повне керівництво пояснює все про flexbox, зосереджуючись на всіх можливих властивосях для батьківського елемента (контейнер flex) та дочірніх елементів (елементи flex). Воно також включає в себе історію, демонстрації, шаблони і таблицю підтримки...
Alex · 11 жовтня 2020 · 3.9K
Переходимо до адаптивного вебу
Давайте почнемо з чуйного або реагуючого (responsive) веб-дизайну. Кожен веб-розробник сьогодні знайомий з концепцією чуйного веб-дизайну (RWD). В травні 2010, концепція була прийнята в якості передової практики, процес почав вдосконалюватися і з'яви...
Codeguida · 01 жовтня 2020