Fullscreen Element Styling with CSS

Introduction

In this lab, we will explore how to use the :fullscreen CSS pseudo-element selector to apply styles to an element when it is in fullscreen mode. We will create a button using Element.requestFullscreen() to make the element fullscreen for the purpose of previewing the style. By the end of this lab, you will have a better understanding of how to create fullscreen elements with custom styles using CSS.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("`Mobile First Design`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") subgraph Lab Skills css/selectors -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/colors -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/fonts -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/text_styling -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/box_model -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/margin_and_padding -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/borders -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/width_and_height -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/backgrounds -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/mobile_first_design -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} css/comments -.-> lab-35203{{"`Fullscreen Element Styling with CSS`"}} end

Fullscreen

index.html and style.css have already been provided in the VM.

To style an element in fullscreen mode, you can use the :fullscreen CSS pseudo-element selector. You can also create a button that makes the element fullscreen for preview purposes using a <button> and Element.requestFullscreen(). Here's an example code:

<div class="container">
  <p>
    <em>Click the button below to enter the element into fullscreen mode. </em>
  </p>
  <div class="element" id="element">
    <p>I change color in fullscreen mode!</p>
  </div>
  <br />
  <button
    onclick="var el = document.getElementById('element'); el.requestFullscreen();"
  >
    Go Full Screen!
  </button>
</div>

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
  box-sizing: border-box;
}

.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}

/* For Internet Explorer */
.element:-ms-fullscreen p {
  visibility: visible;
}

/* For modern browsers */
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Fullscreen lab. You can practice more labs in LabEx to improve your skills.

Fullscreen Element Styling with CSS

Introduction

Skills Graph

Fullscreen

Summary

Other CSS Tutorials you may like