Skip to content

Instantly share code, notes, and snippets.

@dangvanthanh

dangvanthanh/dabblet.css

Created December 24, 2012 01:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dangvanthanh/4367003 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dangvanthanh/4367003 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Event Click
Raw
dabblet.css
/**
* CSS Event Click
*/
body { color: #444;}
a { color: #444; text-decoration: none; }
h1 { color: #222; font-size: 1.5em; text-transform: uppercase; }
input[type="checkbox"]:checked ~ .changed-one {
color: #f00;
}
.changed-two:target {
color: rgba(255, 0, 0, .7);
}
.focus:focus ~ .changed-three {
color: rgba(255, 0, 0, .5);
}
.transition:active ~ .changed-four {
transition: all 0s;
color: rgba(255, 0, 0, .3);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="box">
<h1>Checkbox Hack</h1>
<input type="checkbox">
<p class="changed-one">I'm going to be red! Wait for it...</p>
</div>
<div class="box">
<h1>The :Target Way</h1>
<a href="#id">Click Me!</a>
<p id="id" class="changed-two">I'm going to be red! Wait for it...</p>
</div>
<div class="box">
<h1>The :Focus Way</h1>
<span tabindex="0" class="focus">Click Me!</span>
<p class="changed-three">I'm going to be red! Wait for it...</p>
</div>
<div class="box">
<h1>Transition Hack</h1>
<span class="transition">Click Me!</span>
<p class="changed-four">I'm going to be red! Wait for it...</p>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","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