html
(71)
Повне керівництво по Flexbox
Це повне керівництво пояснює все про flexbox, зосереджуючись на всіх можливих властивосях для батьківського елемента (контейнер flex) та дочірніх елементів (елементи flex). Воно також включає в себе і...
11 жовтня 2020
·
3
· 4.6K
·
Alex
Маловідомі CSS-властивості
Існує багато CSS-властивостей, про які деякі дизайнери просто не знають. Або знають, але забувають використовувати ці властивості там, де вони здатні принести велику користь. Деякі з цих властивостей...
20 липня 2020
·
2
· 478
·
Alex
Ресурси, що блокують рендеринг: як правильно їх позбутися
Ця стаття буде корисною, якщо Lighthouse коли-небудь казав вам «прибрати ресурси блокування рендерингу» (якщо не казав, то все одно можете дізнатись, як цього уникнути).
Ресурси блокування рендерингу...
21 вересня 2021
·
2
· 297
·
Codeguida
Як не гаяти час на завантаження невидимого контенту
Браузер не розрізняє невидимий вміст від видимого
Зазвичай не весь вміст вебсторінки поміщається на одному екрані.
Коли сторінка відкривається, браузер обчислює розміри та позиції всіх DOM-елементів н...
17 жовтня 2021
·
2
· 135
·
Codeguida
7 корисних атрибутів HTML, про які ви могли не знати
HTML — наріжний камінь веброзробки. Однак багато початківців ознайомлюються з ним лише поверхнево і переходять до CSS, JS тощо, втрачаючи весь потенціал HTML.
Тож розгляньмо перелік атрибутів HTML, пр...
07 жовтня 2021
·
2
· 29
·
Codeguida
HTML5 шаблон: Базовий зразок для будь-якого проєкту
Що таке HTML-шаблон?
Кожен вебсайт відрізняється від іншого, але є багато речей, які, по суті, однакові для всіх вебсайт. Замість того, щоб писати один і той самий код знову і знову, варто створити вл...
04 листопада
·
1
· 308
·
3
·
Alex
9 порад щодо оптимізації зображень для прискорення вашого сайту
У цій статті ми розглянемо ефективні методи оптимізації зображень, які значно покращать продуктивність вашого застосунку. Почнемо з самого початку!
1. Формати зображень
Вибір правильного формату зобра...
31 липня 2023
·
1
· 62
·
Alex
Динамічні географічні карти з SVG і JQuery
Створюємо SVG мапу в Illustrator
Створимо мапу Італії в Illustrator:
Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовува...
14 травня 2020
·
1
· 47
·
Codeguida
Коротко про посилання для пропуску та «липкі» хедери
Розповідаємо, як зробити так, щоб основний вміст не перекривався липкими хедерами. Для цього скористаємось властивістю scroll-padding елемента <html>.
Чого ми хочемо уникнути: наш заголовок розрізаний...
14 липня 2021
·
1
· 20
·
Codeguida
Чому варто використовувати тег <picture> замість <img>
Використання зображень та анімацій в інтерфейсах користувача стало поширеною практикою в сучасних веб застосунках. Хоча ці приклади сучасного дизайну фокусуються на підвищенні зручності роботи з вашим...
14 травня 2021
·
0
· 1.4K
·
Alex
Гайд по CSS селекторам
CSS селектори - основа розуміння CSS. Селектори - це те, що допомагає визначити певний HTML елемент і додати до нього стилі. Тож не будемо обговорювати стилі і зосередимось на селекторах.
В прикладах...
10 травня 2021
·
0
· 579
·
Codeguida
Що цікавого можна зробити з checkbox
Checkbox дозволяють вибрати більше одного варіанта з запропонованих в формі. Розумно поєднуючи їх з CSS, можна отримати дивовижні речі. Ця стаття покликана продемонструвати деякі з креативних речей, щ...
16 жовтня 2021
·
0
· 405
·
Codeguida
Різні способи написання CSS у React
Ми всі знайомі зі стандартним способом приєднання таблиці стилів у <head> HTML-документа, чи не так? Це лише один з декількох способів написання CSS. Але як це виглядає, якщо ми хочемо створити стиль...
04 серпня 2023
·
0
· 381
·
Alex
Основи Webpack: Частина 1
При створенні сайту досить стандартною практикою є мати якийсь процес збірки на місці, щоб полегшити розробку і підготовку файлів до роботи.
Ви можете використовувати Grunt або Gulp, побудувавши ланцю...
13 липня 2021
·
0
· 357
·
Codeguida
CSS магія - створюємо пошукову форму
У цьому уроці я хотів би обговорити, як можна прикрасити просту форму пошуку.
Ми не будемо робити нічого занадто складного. Просто дослідимо чотири різних
варіанти форми пошуку за допомогою CSS.
У вас...
05 березня 2021
·
0
· 272
·
Codeguida
Стилізація повзунка браузера на CSS
Є декілька шляхів зробити власний повзунок. Ми будемо використовувати CSS3, він найпростіший. Є jQuery плагіни, що допомагають в стилізації, проте я не люблю додавати багато JavaScript коду до свого в...
03 червня 2017
·
0
· 219
·
Codeguida
Bootstrap Grid за 15 хвилин
Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ни...
20 лютого 2020
·
0
· 182
·
Codeguida
Створення кнопок Play/Pause на чистому CSS
Загалом, іконки для контролю мультимедіа є універсально зрозумілою візуальною мовою для будь-яких інтерфейсів. Дизайнер може спокійно вважати, що кожен користувач не лише знає, що ▶️ = грати, але й те...
10 листопада 2017
·
0
· 161
·
Codeguida
Досить зловживати div: інтро до семантичного HTML
div проявив себе
Усі ми любимо тег div. Він існує вже давно і за цей час став найпопулярнішим елементом для огортання будь-якого контенту в блок, щоб стилізувати чи структурувати його. Навіть зараз у...
15 квітня 2019
·
0
· 145
·
Codeguida
Декілька гарних текстових ефектів з використанням CSS
У цьому уроці навчимося створювати деякі цікаві текстові ефекти за допомогою
CSS3. Вони використовуються, щоб зробити сайт більш елегантним. Розглянемо 11
ефектів, які може використати кожен веб-дизай...
14 січня 2020
·
0
· 134
·
Codeguida
10 рекомендацій для покращення веб-доступності вашого сайту
Ми склали список із 10 рекомендацій для покращення веб-доступності вашого сайту будь-якою людиною, не зважаючи на певні розлади здоров'я.
Керівник W3C і винахідник Всесвітньої мережі Інтернет Тім Берн...
15 вересня 2017
·
0
· 126
·
Codeguida
Простий спосіб додавання CSS анімації до переходів між сторінками
Радий з вами поділитися цікавим та дуже простим jQuery плагіном
Аnimsition. Animsition дає можливість
додавати до посилань CSS анімацію при переході.
Animsition має 18 різних анімацій:
Зникнення
`fade...
03 червня 2020
·
0
· 95
·
Codeguida
Введення в SVG анімацію за допомогою SMIL
На Sitepoint
нещодавно був розміщений виклик - відтворити цю забавну GIF анімацію за
допомогою HTML і CSS:
Це виглядає дуже просто, але це важко зробити без великої кількості ключових
кадрів. Я схиля...
05 квітня 2021
·
0
· 94
·
Codeguida
9 причин використовувати CodePen
CodePen.io описують себе як "майданчик для front-end частини веб-сторінки." CodePen відмінно підходить для тестування багів, співпраці та отримання натхнення від представлених робіт. Він працює, дозво...
21 лютого 2021
·
0
· 90
·
Codeguida
