ВідеоIT та програмуванняв індексі з
🇺🇦 Popover на CSS, без JavaScript? Як зробити popover на чистому CSS+HTML без використання JS? Ч.1
249 переглядів на YouTube · опубліковано
🇺🇦 Popover на CSS, без JavaScript? Як зробити popover на чистому CSS+HTML без використання JS? Ч.1 Зроби цей світ краще 👇 👇 👇 🇺🇦 Фонд Притули - https://prytulafoundation.org/ 🇺🇦 Стерненко - https://www.youtube.com/@STERNENKO 👻 На розвиток каналу Frontend Shinobi БАНКА - https://send.monobank.ua/jar/5tEodxQoEu Крипта - USDT 0x284eF2F4db8B27905d68bBBECBC95a119259A395 Таймкоди: - як html елемент зробити поповером за допомогою атрибута popover - popover-open псевдоклас - позіціанування елементів position-anchor, anchor-name Посиланнячка: https://youtu.be/B0RHePYS4Uo https://caniuse.com/mdn-api_htmlelement_popover https://caniuse.com/css-anchor-positioning https://developer.mozilla.org/en-US/docs/Web/CSS/@position-try https://github.com/oddbird/popover-polyfill?tab=readme-ov-file https://css-irl.info/anchor-positioning-and-the-popover-api/ https://developer.mozilla.org/en-US/docs/Web/API/Popover_API https://bitbucket.org/fairproject/frontend-shinobi-yt/src/main/36-css-popover/ Опис відео роліка: У роліку детально роберебо як зробити поповер на чистому css без використання javascript. Просто вказавши атрибут "popover" та "popovertarget" - для html елеменів що будуть відповідно у ролі самого поповера і кнопки, що його викликає А також розберемося - як позіціанувати алементи за допомогою нових властивостей і можливостей CSS? а саме - position-anchor, anchor-name, anchor-name, top, left, right, bottom та anchor(). Також поговоримо про те, як прописувати альтернативні позиціі для елемента, у випадку якщо в позиції за замовчування - викликається overflow сорінки, що дозволяє, автоматично перемістити позицію елементу в інше місце, без використання javascript Приємного перегляду! #css #html #js #курсиCSS #урокиCSS #csspopover #cssonly #nojavascript #purecss #css3 #html5 #webdevelopment #frontend #coding #tutorial #howto #positionanchor #anchorname #top #left #right #bottom #anchor #overflow #responsive #csspositioning #webdeveloper #frontenddeveloper #programmer #coder #csstips #csshacks #csslearning #webdesign #webdevtips #webdevelopmenttutorial #cssпоповер #чистийcss #безjavascript #позиціонування #cssвластивості #htmlатрибути #українськіпрограмісти #навчанняcss #дляпочатківців #дляпрофесіоналів #itукраїна #українськаспільнота #webdevua #українськийютуб #українськітехнології #українськийіт
Коментарі
Щоб написати, увійдіть.
Коментарів ще немає. Ваш буде першим.
Цей канал 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
Шорти цього каналу
0:17Анімація маски: Крок за кроком до творчості
1:06Секрети сховування скролбара для красивого скролінгу
1:30Створення стильних псевдоселекторів у CSS
1:17Розкриття Shadow DOM: Як використовувати DevTools
1:33Створення GIF з Альфа-Шаром: Легкий Посібник
1:17Як правильно налаштувати анімацію на сайті
1:04Створення аккордіону на сайті з тегом Details
0:31Анімація та стилізація тегів: Секрети сучасного дизайну
2:19Оптимізація макетів: Гнучкі гріди для вашого сайту
1:13Анімація Transition: Як зробити її бездоганною
0:39Анімація маски: Як правильно налаштувати зображення
0:51