Skip to content

Instantly share code, notes, and snippets.

@julienborrel

julienborrel/dabblet.css

Created July 30, 2013 13:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save julienborrel/6112903 to your computer and use it in GitHub Desktop.
Save julienborrel/6112903 to your computer and use it in GitHub Desktop.
Download ZIP
Hover on flag test
Raw
dabblet.css
/**
* Hover on flag test
*/
.flag {
margin: 50px;
}
.flag > div {
width: 0;
height: 0;
float: left;
border-width: 100px 33px;
border-style: solid;
transform: skewY(25deg);
transition: all 0.2s ease;
}
.flag > div:nth-child(even) {
transform: skewY(-25deg);
}
.flag:hover > div {
border-width: 100px 50px;
border-style: solid;
transform: skewY(0);
}
.blue{
border-color: dodgerblue dodgerblue deepskyblue deepskyblue;
}
.flag:hover .blue{
border-color: deepskyblue;
}
.white{
border-color: lightgrey lightgrey white white;
}
.flag:hover .white{
border-color: white;
}
.red{
border-color: crimson crimson orangered orangered;
}
.flag:hover .red{
border-color: orangered;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="flag">
<div class="blue"></div>
<div class="white"></div>
<div class="red"></div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","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