Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created March 19, 2013 08:08
Show Gist options
  • Save anonymous/5194431 to your computer and use it in GitHub Desktop.
Save anonymous/5194431 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;
}
div{
box-sizing:border-box;
}
.container{
text-align: left;
width: 600px;
margin: 0 auto;
background:#fff;
padding:30px 20px 50px 20px;
margin-top:100px
}
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;
}
input.tooltip-form-field{
width:400px;
margin:15px 0px;
font-size:16px;
font-weight:100;
font-family:helvetica;
padding:10px;
border-radius:0px;
border:1px solid #ccc;
box-sizing:border-box;
}
.tooltip-form-field-tip{
margin:5px 0px 20px 0px;
font-size:16px;
color:#aaa;
text-shadow:1px 1px #fff;
font-family:helvetica;
font-weight:100;
}
.button{
}
.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;
}
input.tooltip-form-field:active + .tooltip-form-field-tip, input.tooltip-form-field:focus + .tooltip-form-field-tip{
display:block;
}
Raw
dabblet.html
<body>
<section class="container">
<h1>Login to continue</h1>
<form>
<input type="text" class="tooltip-form-field" placeholder="Username">
<span class="tooltip-form-field-tip">
Please choose the username you think is best
</span>
<input type="text" class="tooltip-form-field" placeholder="password">
<span class="tooltip-form-field-tip">
And a top secret password
</span>
<button type="submit" class="button">Login</button>
</form>
</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!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment