Using Modern CSS To Make A Hamburger Nav In A Few Lines Of Code — Fully Accessible too! скачать в хорошем качестве

Using Modern CSS To Make A Hamburger Nav In A Few Lines Of Code — Fully Accessible too!

Today we explore three exciting new CSS features now available in all browsers that will make our lives so much easier! We will cover: CSS Popover API: Learn how to create content overlays, perfect for tooltips and hamburger menus, with no JavaScript needed and only 3 attributes to add. @starting-style: Discover how to add initial styles for elements as they are added to the document, enabling smooth animations. transition-behavior: allow-discrete: Allowing us to finally make animations from display: none to display: block! Watch now to see how we combine these features to build a beautiful and accessible hamburger navigation menu. LINKS: Code and live playground: https://www.frontend.fyi/v/new-css-fe... MORE? 📈 If you want more content like this, become a Frontend FYI PRO and get access to my current and all future courses for a one-time purchase: https://fe.fyi/pro 📺 If you want to see more videos like these, check out my website: https://fe.fyi/videos ✉️ Subscribe to my newsletter: https://fe.fyi/newsletter MY SOCIALS 🌍 My website – https://www.frontend.fyi 🐦 Twitter –   / jeroenreumkens   📸 Instagram –   / jeroenreumkens   💼 Linkedin –   / jeroenreumkens   COLLAB Want to work together on creating content? Feel free to reach out via jeroen [at] frontend.fyi WHO AM I? If you're new to this channel — Hey, my name is Jeroen. A frontend engineer with almost 15 years of professional experience, who in 2023 decided to stop teaching only his close collegeas to start teaching the whole world. What I teach some call Design Engineering, I like to call it the Craft of Frontend. TIMESTAMPS: 00:00 – Intro 00:42 – Take a look at starting point 02:10 – Popover Attribute 04:35 – What this popover does for us 07:15 – Animating the popover (from display none!) 08:45 – Adding Allow-Discrete 09:30 – Adding @ starting-style to finish fade animation 11:00 – Make our hamburger look nicer, plus many more animations 16:35 – Outro #css #webdevelopment #frontend