html
(71)
Створення CSS3 нотатки без використання зображень
В цій статті ми розглянемо, як створити CSS стікер для нотаток без жодного зображення!
Ось як це буде виглядати:
В даному випадку я використав його для відображення цитати А. Ейнштейна. Ви можете ви...
18 березня 2020
·
0
· 40
·
Codeguida
Інклюзивні компоненти: картки
Деякі з компонентів, які розглядаються в блозі Хейдона Пікерінґа, мають задокументовані рекомендації для коректної роботи. Наприклад, стандарт WAI-ARIA передбачає певну структуру і поведінку для вклад...
26 лютого 2020
·
0
· 66
·
Codeguida
Bootstrap Grid за 15 хвилин
Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ни...
20 лютого 2020
·
0
· 182
·
Codeguida
Вступ до LESS
Ви можливо вже зустрічалися з цим CSS-препроцесором, але вирішили не
починати його вивчення, тому що він виглядає складним, а ще вам знову буде
потрібно запам'ятати величезну кількість нового синтакси...
30 січня 2020
·
0
· 23
·
Codeguida
Декілька гарних текстових ефектів з використанням CSS
У цьому уроці навчимося створювати деякі цікаві текстові ефекти за допомогою
CSS3. Вони використовуються, щоб зробити сайт більш елегантним. Розглянемо 11
ефектів, які може використати кожен веб-дизай...
14 січня 2020
·
0
· 134
·
Codeguida
Вертикальне і горизонтальне центрування за допомогою CSS3 transform
Центрувати елементи по горизонталі не складно, але вертикальне вирівнювання завжди було трохи заплутаним. У цій статті я покажу вам, як центрувати по вертикалі і по горизонталі за допомогою CSS3 trans...
13 січня 2020
·
0
· 38
·
Codeguida
Front-end воїн - “Slip Scroll” ефект
У сьогоднішньому уроці ми збираємося створити простий, гнучкий ефект
паралакса, де логотип, здавалося б, змінює колір з фоном, коли користувач
скролить.
Ми будемо створювати елемент "за замовчуванням"...
12 січня 2020
·
0
· 3
·
Codeguida
Способи спрощення обробників подій
Ми маємо справу з обробниками подій щоразу, коли користувач клікає на певний елемент, створює фокус клавіатурою чи вводить текст в поле форми. Дуже важливо не перевантажувати обробники зайвим кодом і,...
24 червня 2019
·
0
· 59
·
Codeguida
Організації W3C та WHATWG разом працюватимуть над HTML і DOM
Організації W3C та WHATWG підписали угоду про спільний розвиток специфікацій HTML й DOM.
Нагадаємо, WHATWG — це група, створена компаніями Apple, Mozilla та Opera як альтернатива організації W3C. W3C...
29 травня 2019
·
0
·
Codeguida
Все, що ви колись хотіли знати про inputmode
Атрибут inputmode підказує браузеру, який тип екранної клавіатури показувати на мобільних пристроях, залежно від обраного input або textarea.
<input type="text" inputmode="" />
<textarea inputmode=""...
23 травня 2019
·
0
· 49
·
Codeguida
Інтро до Веб-компонентів
Фронтенд-розробка розвивається з шаленою швидкістю. Варто лише поглянути на численні статті, туторіали та треди у Twitter зі скаргами на технології, колись такі прості та зрозумілі. У цій статті ми з'...
24 квітня 2019
·
0
· 38
·
Codeguida
Досить зловживати div: інтро до семантичного HTML
div проявив себе
Усі ми любимо тег div. Він існує вже давно і за цей час став найпопулярнішим елементом для огортання будь-якого контенту в блок, щоб стилізувати чи структурувати його. Навіть зараз у...
15 квітня 2019
·
0
· 145
·
Codeguida
Нативне відкладене завантаження для вебу
З новим атрибутом loading нативна підтримка відкладеного завантаження для <img> та <iframe> стане можливою.
Як це виглядає:
<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-pl...
10 квітня 2019
·
0
· 17
·
Codeguida
Скролінг в майбутнє
Можливість прогортати інформацію сприймається як належне всіма користувачами. Однак реалізувати скролінг, який добре працюватиме поміж браузерами й чудово вписуватиметься в дизайн, може бути непросто....
22 червня 2018
·
0
· 66
·
Codeguida
Розширення нативних елементів DOM за допомогою веб-компонентів
Веб-компоненти (Web Components) пропонують потужні функції прямо з платформи. Основні з них: справжня інкапсуляція JS та CSS; взаємодія між різними фреймворками; і, звичайно, стандартизована компонент...
12 червня 2018
·
0
· 23
·
Codeguida
Як react.fragment допомагає писати семантичний HTML?
import React, { Fragment } from "react"
const Headings = props => {
return (
<Fragment>
<h1>{props.title}</h1>
<p>{props.subtitle}</p>
</Fragment>
)
}
HTML це основа вебу, тому написаний...
02 лютого 2018
·
0
· 8
·
Codeguida
Створення кнопок Play/Pause на чистому CSS
Загалом, іконки для контролю мультимедіа є універсально зрозумілою візуальною мовою для будь-яких інтерфейсів. Дизайнер може спокійно вважати, що кожен користувач не лише знає, що ▶️ = грати, але й те...
10 листопада 2017
·
0
· 161
·
Codeguida
10 рекомендацій для покращення веб-доступності вашого сайту
Ми склали список із 10 рекомендацій для покращення веб-доступності вашого сайту будь-якою людиною, не зважаючи на певні розлади здоров'я.
Керівник W3C і винахідник Всесвітньої мережі Інтернет Тім Берн...
15 вересня 2017
·
0
· 126
·
Codeguida
Форми в React: використовуємо ref
React дозволяє отримати значення <form> у два способи. Перший полягає в імплементації так званих контрольованих компонентів, а другий — в застосуванні React властивості ref.
Головною характеристикою к...
13 вересня 2017
·
0
· 54
·
Codeguida
Як перетворити ваш сайт в мобільний застосунок: знайомство з PWA
Ви, напевно, чули про Progressive Web Apps (PWA). Але в цій статті я не буду описувати тонкощі роботи та зазирати під капот. Лише нагадаю, що PWA — це сайти, що можна додати на домашній екран смартфон...
03 серпня 2017
·
0
· 71
·
Codeguida
Особливості створення гібридних мобільних застосунків на Ionic
Вступ
Мета даної статті – підготувати веб-розробника до роботи з мобільною розробкою, ознайомити з нюансами, показати різницю між мобільною і веб-розробкою. Я не планував написати посібник чи документ...
21 червня 2017
·
0
· 22
·
Codeguida
Замінюємо Bootstrap розмітку на CSS Grid
У березні Mozilla випустила Firefox 52, куди додала підтримку CSS сітки. Якщо ви не знайомі з CSS Grid, – це двовимірна система розмітки для вебу, яка дозволяє створювати нативні шаблони розмітки для...
13 червня 2017
·
0
· 15
·
Codeguida
Стилізація повзунка браузера на CSS
Є декілька шляхів зробити власний повзунок. Ми будемо використовувати CSS3, він найпростіший. Є jQuery плагіни, що допомагають в стилізації, проте я не люблю додавати багато JavaScript коду до свого в...
03 червня 2017
·
0
· 219
·
Codeguida
