Day 22: the ::backdrop pseudo-element

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);
}

yo!

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;
}

yo!


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

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);
}
yo!

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;
}
yo!


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-10-25T09:38:54+00:00) Day 22: the ::backdrop pseudo-element. Retrieved from https://www.scien.cx/2022/10/25/day-22-the-backdrop-pseudo-element/

MLA
" » Day 22: the ::backdrop pseudo-element." Manuel Matuzović | Sciencx - Tuesday October 25, 2022, https://www.scien.cx/2022/10/25/day-22-the-backdrop-pseudo-element/
HARVARD
Manuel Matuzović | Sciencx Tuesday October 25, 2022 » Day 22: the ::backdrop pseudo-element., viewed ,<https://www.scien.cx/2022/10/25/day-22-the-backdrop-pseudo-element/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 22: the ::backdrop pseudo-element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/25/day-22-the-backdrop-pseudo-element/
CHICAGO
" » Day 22: the ::backdrop pseudo-element." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/25/day-22-the-backdrop-pseudo-element/
IEEE
" » Day 22: the ::backdrop pseudo-element." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/25/day-22-the-backdrop-pseudo-element/. [Accessed: ]
rf:citation
» Day 22: the ::backdrop pseudo-element | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/25/day-22-the-backdrop-pseudo-element/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts