Primer CSS Details Darkened Fullscreen Click Area
Primer CSS is an open-source component-rich CSS library that helps developers to develop beautiful and responsive websites which work on devices of any screen size. It has a wide range of components that fulfills the need of any website.
In this article, we will be seeing Primer CSS Details Darkened Fullscreen Click Area. The details-overlay-dark class is used in addition to the details-overlay to darken the click area overlay.
Primer CSS Details Darkened Fullscreen Click Area Classes:
- details-overlay-dark: This class is used to darken the click area overlay.
Syntax:
<details class="details-overlay details-overlay-dark">
...
</details>
Example 1: This example shows the use of the details-overlay-dark class to darken the click area overlay.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
Primer CSS Details Darken
Fullscreen Click Area
</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "text-center" >
< h2 style = "color: green;" >
GeeksforGeeks
</ h2 >
< h4 >
Primer CSS Details Darken
Fullscreen Click Area
</ h4 >
</ div >
< div class = "d-flex flex-items-center flex-column mt-5" >
< details class = "details-overlay details-overlay-dark" >
< summary class = "btn" >Expand</ summary >
< div class="border mt-3 p-2 color-bg-default
position-relative" style = "z-index: 112;" >
< h3 >GeeksforGeeks is awesome :)</ h3 >
< p >It is a computer science portal for geeks.</ p >
</ div >
</ details >
</ div >
</ body >
</ html >
|
Output:
Example 2: The below example shows how to change the style of the summary element using the button classes. In this example, we used the btn-primary class in addition to btn to change the style of the summary element.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
Primer CSS Details Darken
Fullscreen Click Area
</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "text-center" >
< h2 style = "color: green;" >
GeeksforGeeks
</ h2 >
< h4 >
Primer CSS Details Darken
Fullscreen Click Area
</ h4 >
</ div >
< div class = "d-flex flex-items-center flex-column mt-5" >
< details class = "details-overlay details-overlay-dark" >
< summary class = "btn btn-primary" >Expand</ summary >
< div class="border mt-3 p-2 color-bg-default
position-relative" style = "z-index: 112;" >
< h3 >GeeksforGeeks is awesome :)</ h3 >
< p >It is a computer science portal for geeks.</ p >
</ div >
</ details >
</ div >
</ body >
</ html >
|
Output:
Reference: https://primer.style/css/utilities/details#darkened-fullscreen-click-area
Last Updated :
24 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...