Learn how to create an expanding search bar using CSS :focus-within in this 33-minute tutorial. Explore the power of custom properties, SCSS, and advanced CSS techniques to build an interactive search bar without JavaScript. Follow along as the instructor demonstrates setting heights, styling inputs, implementing focus states, and adding smooth animations with cubic bezier functions. Gain insights into BEM methodology and discover how to leverage CSS variables for enhanced flexibility. Access the provided CodePen for a hands-on experience and toggle between SCSS and compiled CSS for better understanding.
Overview
Syllabus
Intro
Custom properties
Setting the height
Setting the input
Adding focus within
Testing
Margin left
Hover and focus state
Adding a background
Adding a cubic bezier
Taught by
Kevin Powell
