Skip to content

Instantly share code, notes, and snippets.

@nexxos

nexxos/dabblet.css

Created October 25, 2013 11:21
Show Gist options
  • Save nexxos/7153147 to your computer and use it in GitHub Desktop.
Save nexxos/7153147 to your computer and use it in GitHub Desktop.
Download ZIP
Login form
Raw
dabblet.css
/**
* Login form
*/
/* Inspired by : http://dribbble.com/shots/307980-Ticket
* Found here: http://medleyweb.com/resources/css-form-examples-tools-and-solutions/
* On CodePen: http://codepen.io/nexxos/pen/FoDbx
*/
* {
box-sizing:border-box;
padding:0;
margin:0;
}
body {
background-color: beige;
position:relative;
font-family:sans-serif, verdana;
font-size:10px;
}
body:before {
content:"";
display:block;
position:absolute;
/*
background:linear-gradient(#7e7365, #474038);
border-top:1px solid rgba(0,0,0,0.6);
border-bottom:1px solid rgba(0,0,0,0.6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -1px 0 rgba(255,255,255,0.1),
0 2px 1px rgba(0,0,0,0.4);
width:100%;
*/
height:30px;
top:30px;
}
#main {
width:320px;
margin:30px auto;
height:120px;
position:relative;
padding:6px;
border:1px solid rgba(0,0,0,0.3);
border-radius:0.6em;
background:#f6f4f1;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
/* background:url('http://tank-a-faire.com/bg2.jpg') repeat;*/
}
#main:after {
clear:both;
content:"";
display:table;
}
#inset {
border:4px solid rgba(255,0,0,0.2);
border-radius:0.5em;
float:left;
width:100%;
padding:6px 10px 6px 40px;
height:100%;
}
#rotated_label {
transform:rotate(-90deg);
transform-origin:0 0;
position:absolute;
top:108px;
left:10px;
font-size:13px;
background:beige;
width:98px;
text-align:center;
border-bottom:4px solid rgba(255,0,0,0.2);
padding:5px 7px;
/* border-radius:0 0 0.5Em 0.5em; */
color:#aa6b40;
text-shadow:1px 0 0 rgba(255,255,255,0.6);
}
input[type="text"],
input[type="password"]{
border-radius:0.5em;
border:1px solid #91897e;
box-shadow:inset 0 0 4px rgba(25,0,0,0.4);
padding:7px;
margin:5px 0;
transition:all 0.3s ease-out;
width:100%;
height:34px;
}
input[type="password"]{
float:left;
width:50%;
margin-top:0.5em;
}
input[type="submit"]{
float:left;
width:46%;
margin-left:4%;
/*margin-top:5px;*/
margin-top:0.5em;
height:34px;
border:1px solid #91897e;
border-radius:0.3em;
/* padding:7px; */
transition:all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 20px 20px rgba(255,255,255,0.1);
cursor:pointer;
background:rgba(60,60,60,0.2);
font-weight:bold;
color:#aa6b40;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
font-family:"Verdana", sans-serif;
}
::-webkit-input-placeholder {
font-family:"Verdana", sans-serif;
text-transform:uppercase;
font-size:10px;
line-height:16px;
letter-spacing:1px;
}
input[type="text"]:hover,
input[type="password"]:hover{
box-shadow:none;
}
input[type="submit"]:hover {
background:rgba(90,60,60,1);
color:white;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="main">
<p id="rotated_label">Anmeldung</p>
<div id="inset">
<p>
<input type="text" placeholder="E-Mail Adresse">
</p>
<p>
<input type="password" placeholder="Passwort">
<input type="submit" value="Anmelden">
</p>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment