Syntax - Tasty Web Development Treats Hasty Treat - Some Neat CSS Functions That You Should Know About
Jun 22, 2020
Dive into the world of CSS functions as dynamic tools for web design! Discover the unique capabilities of functions like attr() and calc() for enhanced layouts. Learn how to leverage clamp(), minmax(), and fit-content() for responsive designs. The hosts explore creative effects using CSS filters, showcasing how combinations can transform web elements. Plus, gain insights into practical applications with masks and clip paths in SVG. Join in on the fun by sharing your own CSS innovations!
AI Snips
Chapters
Transcript
Episode notes
Using attr() for Data Attributes
- Use the
attr()function to access element attributes, especially data attributes. - This is helpful for tooltips or displaying information like code language with pseudo-elements.
attr() for Tooltips
- Use
attr()with pseudo-elements for tooltips. - Consider accessibility when using this approach for tooltips.
Using calc()
calc()is powerful for calculating lengths, especially with CSS variables.- Calculate values like 100% minus a fixed header height, mixing units.