Skip to content

Instantly share code, notes, and snippets.

@emolr

emolr/dabblet.css

Created April 9, 2013 11:17
Show Gist options
  • Save emolr/5344913 to your computer and use it in GitHub Desktop.
Save emolr/5344913 to your computer and use it in GitHub Desktop.
Download ZIP
Using form :active / :focus to unveil content (only css)
Raw
dabblet.css
/**
* Using form :active / :focus to unveil content (only css)
*/
/* Styling*/
body{
text-align:center;
/*background:url(http://www.wallchan.com/images/sandbox/1305675944-abstract-blurry-wallpaper-wallpaper.jpg);*/
background:#f6f6f6;
padding:0px 10px;
}
div{
box-sizing:border-box;
}
.container{
text-align: left;
width:100%;
max-width: 600px;
margin: 0 auto;
background:#fff;
margin-top:100px
}
.content{
padding:30px 20px 50px 20px;
}
h1{
font-size:35px;
font-family:helvetica;
font-weight:100;
color:#93e08f;
}
h2.subheader{
font-size:20px;
font-family:arial;
color:#444;
font-weight:100;
margin-bottom:50px;
text-shadow:1px 1px #fff;
}
p{
color:#a7a7a7;
font-family:helvetica;
font-weight:100;
margin-top:30px;
}
form >*{
display:block;
}
.validate{
background-color:#eb9a9a ;
max-width:400px;
padding:10px;
box-sizing:border-box;
margin-top:-15px;
}
input.tooltip-form-field{
width:100%;
max-width:400px;
margin:0px 0px 15px 0px;;
font-size:16px;
font-weight:100;
font-family:helvetica;
padding:10px;
border-radius:0px;
border:1px solid #ccc;
box-sizing:border-box;
}
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background-color:#93e08f;
border:8px solid #e5f7e4;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:14px;
font-weight:bold;
padding:6px 22px;
text-decoration:none;
}.button:hover {
background-color:#98db95;
cursor:pointer;
}.button:active {
position:relative;
top:1px;
}
/* The display functionality */
.tooltip-form-field-tip{
/*display:none;*/
height:0px;
overflow:hidden;
font-size:16px;
color:#aaa;
text-shadow:1px 1px #fff;
font-family:helvetica;
font-weight:100;
/* Transition */
transition: height 0.5s;
-moz-transition: height 0.5s; /* Firefox 4 */
-webkit-transition: height 0.5s; /* Safari and Chrome */
-o-transition: height 0.5s; /* Opera */
}
input.tooltip-form-field:active + .tooltip-form-field-tip, input.tooltip-form-field:focus + .tooltip-form-field-tip, .validate + .tooltip-form-field-tip{
/*display:block;*/
height:35px;
transition: height 0.5s;
-moz-transition: height 0.5s; /* Firefox 4 */
-webkit-transition: height 0.5s; /* Safari and Chrome */
-o-transition: height 0.5s; /* Opera */
}
Raw
dabblet.html
<body>
<section class="container">
<div class="content">
<h1>Login to continue</h1>
<form>
<input type="text" class="tooltip-form-field" id="my-input" placeholder="Username">
<span class="tooltip-form-field-tip">
Eg. John doe
</span>
<span class="icon-good-to-go"></span>
<input type="text" class="tooltip-form-field" placeholder="Email">
<span class="tooltip-form-field-tip">
Eg. Johndoe@example.com
</span>
<input type="text" class="tooltip-form-field" placeholder="Password">
<span class="tooltip-form-field-tip">
Shhhh... Don't tell anyone
</span>
<button type="submit" class="button">Login</button>
</form>
</div>
</section>
<div class="explain">
<p>This is a demonstration of showing content on click, just with css.</p>
</body>
Raw
dabblet.js
// alert('Hello world!');
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment