Last active
May 11, 2021 08:13
-
-
Save A973C/dc5bbcda3d15c0516bda5eb13208b914 to your computer and use it in GitHub Desktop.
CSS :fullscreen Pseudo Class
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="box"> | |
<button onclick="toggleFullScreen()"></button> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function toggleFullScreen() { | |
if ((!document.fullscreenElement) || (!document.webkitFullscreenElement)){ | |
try{ | |
document.documentElement.webkitRequestFullscreen(); | |
} | |
catch(e){ | |
document.documentElement.requestFullscreen(); | |
} | |
} else { | |
if ((document.exitFullscreen) || (document.webkitExitFullscreen)){ | |
try{ | |
document.webkitExitFullscreen(); | |
} | |
catch(e){ | |
document.exitFullscreen(); | |
} | |
} | |
} | |
} | |
// document.addEventListener("keypress", function(e) { | |
// if (e.keyCode === 13) { | |
// toggleFullScreen(); | |
// } | |
// }, false); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* all browser except Safari */ | |
html:fullscreen { | |
background-color:rgb(255 221 64); | |
button{ | |
background-color:rgb(14 190 255/ var(--opacity)); | |
&::before{content:"Click to Close :fullscreen styles";} | |
} | |
} | |
/* For Safari */ | |
html:-webkit-full-screen{ | |
background-color:rgb(255 221 64); | |
button{ | |
background-color:rgb(14 190 255/ var(--opacity)); | |
&::before{content:"Click to Close :fullscreen styles";} | |
} | |
} | |
html{background-color:#dadada; transition:1.2s;} | |
.box{ | |
display:flex; | |
width:100vw; | |
height:100vh; | |
} | |
button{ | |
--opacity:1; | |
all:unset; background-color:rgb(255 221 64/ var(--opacity)); padding:15px; | |
font-family:monospace; font-size:3vw; cursor:pointer; border-radius:10px; | |
transform:rotateZ(0deg); transition:1.2s; margin:auto; | |
animation:dance 7s infinite; | |
&::before{content:"Click to use CSS :fullscreen pseudo class";} | |
&:hover, | |
&:focus{--opacity:0.8;} | |
} | |
@keyframes dance{ | |
0% ,45%, 53.01%{transform:rotateZ(0deg);} | |
45.01%, 47%, 49%, 51%, 53%{transform:rotateZ(5deg);} | |
46%,48%, 50%, 52%{transform:rotateZ(-5deg);} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment