Day 22: the ::backdrop pseudo-element
posted on
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
You can use the ::backdrop
pseudo-element to style the backdrop of modal dialogs and elements which have been placed in fullscreen mode using the Fullscreen API.
::backdrop {
background-color: rgb(0 0 0 / 0.5);
}
You don't have to limit yourself to semi-transparent background color.
::backdrop {
background: conic-gradient(red, orange, yellow, green, red);
outline: 20px solid white;
outline-offset: -20px;
}
Further reading
Do you want to learn even more awesome CSS?
I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.