Put a Background on Open Particulars Components

No Comments

One factor that may be only a smidge funky concerning the <particulars> factor is that, when open, it’s not all the time 100% clear what’s inside that factor and what isn’t. I’m not saying that all the time issues or that it’s a very laborious drawback to unravel, I’m simply noting it because it got here up just lately for me.

Right here’s a visible instance:

What textual content right here is inside a <particulars> and what isn’t?

The answer is… CSS. Model the <particulars> considerably uniquely, and that drawback goes away. Even if you would like the typography to be the identical, otherwise you don’t need any unique styling till the <particulars> is opened, it’s nonetheless attainable. Utilizing an alpha-transparent fill, you’ll be able to even be sure that deeper-nested <particulars> stay clear.

For <particulars> that you simply simply slug into inline content material (like a “spoiler” UI or one thing) I like the concept of some form of border or background displaying the place the content material ends. Good for nested particulars as nicely.@CodePen https://t.co/1aVadri1Ci pic.twitter.com/jIvUquIbbw

— Chris Coyier (@chriscoyier) June 3, 2021

Right here’s that CSS:

particulars[open] {
–bg: rgb(0 0 0 / 0.2);
background: var(–bg);
define: 1rem stable var(–bg);
margin: 0 0 2rem 0;
}

And the demo:

CodePen Embed Fallback

The put up Put a Background on Open Particulars Components appeared first on CSS-Tips.

You may help CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment