Skip to content

Instantly share code, notes, and snippets.

@Hotell

Hotell/dabblet.css

Created March 18, 2012 23:32
Show Gist options
  • Save Hotell/2085236 to your computer and use it in GitHub Desktop.
Save Hotell/2085236 to your computer and use it in GitHub Desktop.
Download ZIP
full page overlay with position fixed
Raw
dabblet.css
/**
* full page overlay with position fixed
*/
html{
background: #f06;
background: #ccc;
min-height: 100%;
}
.overlay{
position: fixed;
top:0;
right:0;
bottom:0;
left:0;
background:linear-gradient(90deg, #f06, blue);
}
.overlayWithMargin{
opacity:0.7;
position: fixed;
top:10px;
right:10px;
bottom:10px;
left:10px;
background:linear-gradient(90deg, green, yellow);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="overlay"><h1>100% Overlay</h1></div>
<div class="overlayWithMargin"><h1>overlay with 10px margin</h1></div>
Raw
settings.json
{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}
@charlesbecon
Copy link

.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}

cover{

position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;

}

loginScreen

{
height:380px;
width:340px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
background: url(login.png) no-repeat;
border:5px solid #cccccc;
border-radius:10px;
}

loginScreen:target, #loginScreen:target + #cover{

display:block;
opacity:2;

}
.cancel
{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}

Full Source code..CSS Full Screen Overlay

charles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment