Skip to content

Instantly share code, notes, and snippets.

@DDDDDanica

DDDDDanica/Transparent Box.markdown

Created March 18, 2016 13:54
Show Gist options
  • Save DDDDDanica/f6b8ecb691fed4a4814c to your computer and use it in GitHub Desktop.
Save DDDDDanica/f6b8ecb691fed4a4814c to your computer and use it in GitHub Desktop.
Download ZIP
Transparent Box
Raw
index.html
<div class="open">Transparent Box</div>
<div class="modal">
<div class="form">
<form>
<label for="name" required="required">Full Name</label>
<input id="name" type="text" />
<label for="email" required="required">Email Address</label>
<input id="email" type="email" />
<label for="pass">Password</label>
<input id="pass" type="password" required="required" />
<button type="button">Sign Up</button>
</form>
</div>
Raw
style.css
*,
:before,
:after {
box-sizing: border-box;
margin: 0;
transition: .4s
}
body {
background: #616161 url(https://images.unsplash.com/photo-1452716726610-30ed68426a6b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=177c2914fe84d20069f207e27632acc9) center/cover no-repeat;
height: 100vh;
overflow: hidden;
color: #FFF;
font-family: Roboto;
}
.modal {
height: 400px;
width: 650px;
margin: auto;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: .4s, box-shadow .3s .4s;
}
.form {
background: rgba(71, 71, 71, 0.8);
width: 100%;
height: 100%;
padding: 30px;
position: absolute;
top: 0;
left: 0;
}
input {
background: rgba(255, 255, 255, 0.15);
width: 100%;
padding: 8px;
margin: 15px 0;
border: none;
border-radius: 3px;
outline: none;
color: #FFF;
font-size: 20px;
}
label {
font: 500 14px Roboto;
color: #FB5781;
}
button {
background: linear-gradient( -45deg, #f857a6, #ff5858);
padding: 10px 20px;
border: none;
border-radius: 21px;
outline: none;
overflow: hidden;
position: absolute;
bottom: 30px;
left: 50%;
color: #FFF;
font-size: 18px;
cursor: pointer;
transform: translateX(-50%);
&:hover:before {
left: 110%;
transition: .3s;
}
&:before {
content: '';
background: rgba(#FFF, .3);
height: 100%;
width: 65px;
position: absolute;
top: 0;
left: -100%;
transform: skew(-45deg);
transition: 0s;
}
}
h3 {
font: 28px Roboto;
text-align: justify;
}
.nope {
background: #474747;
padding: 10px 15px;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(#000, .25);
position: absolute;
bottom: 30px;
left: 50%;
font-size: 12px;
white-space: nowrap;
cursor: pointer;
transform: translateX(-50%);
&:hover {
box-shadow: 0 5px 10px rgba(#000, .25);
transform: translateX(-50%);
}
}
.open {
background: linear-gradient( -45deg, #f857a6, #ff5858);
height: 45px;
width: 150px;
padding: 10px 20px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
text-align: center;
white-space: nowrap;
cursor: pointer;
opacity: 0;
visibility: hidden;
&.active {
opacity: 1;
visibility: visible;
}
&:hover {
box-shadow: 0 5px 15px rgba(#000, .3);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment