ВідеоIT та програмуванняв індексі з
🇺🇦 Пошук як у Discord без використання JS. CSS Only Input search Animation
242 перегляди на YouTube · опубліковано
🇺🇦 Пошук як у Discord без використання JS. CSS Only Input search Animation Зроби цей світ краще 👇 👇 👇 🇺🇦 Фонд Притули - https://prytulafoundation.org/ 🇺🇦 Стерненко - https://www.youtube.com/@STERNENKO 👻 На розвиток каналу Frontend Shinobi БАНКА - https://send.monobank.ua/jar/5tEodxQoEu Крипта - USDT 0x284eF2F4db8B27905d68bBBECBC95a119259A395 - input search як у discord - autocomplete off - outline або box-shadow - placeholder color - prefers-reduced-motion: reduce - як скрити іконку хрестика у input type search - де брати SVG іконки - all unset - css selector has і not - анімація visibility та opacity Додаткові матеріали https://bitbucket.org/fairproject/frontend-shinobi-yt/src/main/37-search-animate/ https://www.youtube.com/watch?v=dZz6rWM7bfg https://www.youtube.com/watch?v=p0k7gmKJjQo https://codepen.io/michai/pen/eYgLPBG https://mayashavin.com/articles/focus-vs-focus-visible-for-accessibility https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible Original video - https://www.youtube.com/watch?v=cowG052uyQw Опис відео роліка: У відео розберемо як зробити поле пошуку по стилистиці дуже схожим на input search у Discord. Поговорми про те, які стилі треба застосувати щоб подбати про інклюзивність за людей, у яких анімація викликає нудоту а саме про prefers-reduced-motion: reduce. Також поговоримо про те - як стилизувати колір і розмір шрифта paceholder і як зробити це кросбраузерно. Також поговоримо про псевтоселектор :placeholder-shown і як його використовувати для того щоб розділити стан input в залежності від того чи є в input текст чи немає. Як змінити стандартний хрестик видалення у input type search на свою іконку? #css #html #js #курсиCSS #урокиCSS #CSS #CSSTips #WebDevelopment #FrontendDevelopment #InputStyles #SearchInput #PlaceholderStyles #ReducedMotion #PrefersReducedMotion #PlaceholderShown #InputTypeSearch #AccessibleDesign #CrossBrowserSupport #InclusiveDesign #DiscordStyle #CustomIcons #CSSAnimation #WebAccessibility #UXDesign #frontendtips #CSS #ВебРозробка #Фронтенд #ДизайнІнтерфейсів #СтилізаціяInput #Плейсхолдер #ReducedMotion #ДоступнийДизайн #WebAccessibility #PrefersReducedMotion #PlaceholderShown #ІнпутПошук #ІконкиCSS #АнімаціяCSS #ДизайнДляВсіх #КросбраузернаПідтримка #UXДизайн #ФронтендПоради
Коментарі
Щоб написати, увійдіть.
Коментарів ще немає. Ваш буде першим.
Цей канал 115 відео в індексі
Більше від «Frontend Shinobi»
6:09Каскадні шари CSS через рік: чи варто ділити стилі по Mobile First / Desktop First?
7:55CSS Container Queries на практиці: коли @media недостатньо | + corner-shape
7:31Адаптивна сітка css grid — чому це працює
12:06🔥 Забудь про JavaScript: CSS слайдер, який працює без JS
21:36CSS Nesting - Чим відрізняється від CSS? І чи варто його використовувати?
22:53🇺🇦 CSS анімація кнопки, що слідкує за курсором миші | Без JavaScript
Шорти цього каналу
1:30Створення стильних псевдоселекторів у CSS
1:52Псевдоелементи в CSS: Створення фонів із Position Absolute
0:17Анімація маски: Крок за кроком до творчості
0:32Ефектна анімація зображень: Підказки для Hover Transition
0:53CSS Анімація: Зміна Розміру Маски при Фокусі
0:31Анімація та стилізація тегів: Секрети сучасного дизайну
0:34Скролінг з нуля до ста: Керування впливом в CSS
1:09Анімація для веб-дизайну: як врахувати Reduce Motion
1:52Маски в Дизайні: Як Використовувати Прозорість для Ефектів
0:43Як знайти та використовувати прозорі маски для зображень
1:55CSS для банера: Створення і налаштування
0:47