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!

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - 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!

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

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

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-2/
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-2/>
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-2/
CHICAGO
" » Day 22: the ::backdrop pseudo-element." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/25/day-22-the-backdrop-pseudo-element-2/
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-2/. [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-2/ |

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