Skip to content

Instantly share code, notes, and snippets.

@kazu2012

kazu2012/dabblet.css

Created October 14, 2012 13:21
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save kazu2012/3888552 to your computer and use it in GitHub Desktop.
Download ZIP
animated gradient display
Raw
dabblet.css
/**
* animated gradient display
*/
body {
padding: 26px 0 0;
}
p {
font-family: Helvetica;
}
.panel {
width: 195px;
height: 130px;
margin: -1px;
border: solid 2px lightblue;
border-radius: 13px;
display: inline-block;
overflow: hidden;
text-decoration: none;
}
/* FIRST ROW */
.p0 {
background: linear-gradient(left,
hsl(0, 100%, 80%) 0%, hsl(35, 100%, 80%) 10%,
hsl(71, 100%, 80%) 20%, hsl(107, 100%, 80%) 30%,
hsl(143, 100%, 80%) 40%, hsl(179, 100%, 80%) 50%,
hsl(215, 100%, 80%) 60%, hsl(251, 100%, 80%) 70%,
hsl(287, 100%, 80%) 80%, hsl(323, 100%, 80%) 90%,
hsl(359, 100%, 80%) 100%);
background-size: 50% 1px;
background-position: 0 0;
transition: 3s cubic-bezier(0, 3.5, 1, -2.5);
}
.p0:hover {
background-size: 100% 1px;
background-position: -98px 0;
}
.p1 {
background: linear-gradient(-30deg, midnightblue 32%, transparent 32%)
13px 0,
linear-gradient(-150deg, midnightblue 32%, transparent 32%)
-13px 0,
linear-gradient(150deg, midnightblue 32%, transparent 32%),
linear-gradient(30deg, midnightblue 32%, greenyellow 32%);
background-size: 26px 26px;
transition: 2s linear;
}
.p1:hover {
background-position: 208px 0, 182px 0, 195px 0, 195px 0;
}
.p2 {
background: radial-gradient(hotpink, white 70%) no-repeat 0 50%,
radial-gradient(gold, white 70%) no-repeat 50% 100%,
radial-gradient(greenyellow, white 70%) no-repeat 100% 50%,
radial-gradient(aqua, white 70%) no-repeat 50% 0;
background-size: 35px 35px;
transition: 3s cubic-bezier(0, 3.5, 1, -2.5);
}
.p2:hover {
background-position: 0 0, 0 100%, 100% 100%, 100% 0;
background-size: 25px 25px;
}
/* SECOND ROW */
.p3 {
background: linear-gradient(left, white, transparent);
background-color: darkorange;
transition: 4s ease-in-out;
}
.p3:hover {
background-color: indigo;
}
.p4 {
background: radial-gradient(center, transparent 61%, black 65%)
no-repeat center,
radial-gradient(0% 0%,
rgb(123, 109, 100) 5%, rgb(182, 156, 132) 10%,
rgb(182, 156, 132) 15%, rgb(182, 156, 132) 20%,
rgb(196, 209, 228) 25%, rgb(197, 181, 155) 30%,
rgb(149, 133, 119) 35%, rgb(171, 168, 175) 40%,
rgb(165, 134, 116) 45%, rgb(182, 156, 132) 50%,
rgb(233, 232, 218) 55%, rgb(172, 150, 127) 60%,
rgb(154, 113, 81) 65%, rgb(214, 231, 232) 70%,
rgb(150, 138, 121) 75%, rgb(178, 164, 169) 80%,
rgb(173, 154, 144) 85%, rgb(179, 171, 160) 90%,
rgb(143, 127, 112) 95%, rgb(101, 95, 87) 100%)
no-repeat center;
background-color: black;
background-size: 26px 26px;
transition: all 3s ease-in;
}
.p4:hover {
background-size: 295px 295px;
}
.p5 {
background: linear-gradient(45deg, slateblue 20%, transparent 25%,
transparent 75%, slateblue 80%),
linear-gradient(-45deg, slateblue 20%, transparent 25%,
transparent 75%, slateblue 80%);
background-color: plum;
background-size: 10px 1px;
transition: all 1s ease-out;
}
.p5:hover {
background-size: 5px 20px;
}
/* THIRD ROW */
.p6 {
background: linear-gradient(hsl(0, 100%, 80%) 0%, hsl(35, 100%, 80%) 10%,
hsl(71, 100%, 80%) 20%, hsl(107, 100%, 80%) 30%,
hsl(143, 100%, 80%) 40%, hsl(179, 100%, 80%) 50%,
hsl(215, 100%, 80%) 60%, hsl(251, 100%, 80%) 70%,
hsl(287, 100%, 80%) 80%, hsl(323, 100%, 80%) 90%,
hsl(359, 100%, 80%) 100%);
background-size: 1px 390px;
background-position: 0 0;
transition: 4s cubic-bezier(0, 2, 1, -1);
}
.p6:hover {
background-position: 0 100%;
}
.p7 {
background: linear-gradient(-30deg, seashell 32%, transparent 32%)
repeat-x 13px 50%,
linear-gradient(-150deg, seashell 32%, transparent 32%)
repeat-x -13px 50%,
linear-gradient(150deg, seashell 32%, transparent 32%)
repeat-x 0 50%,
linear-gradient(30deg, seashell 32%, saddlebrown 32%)
repeat-x 0 50%;
background-color: seashell;
background-size: 26px 26px;
transition: 3.5s cubic-bezier(0, 3, 1, -2);
}
.p7:hover {
background-size: 26px 260px;
}
.p8 {
background: radial-gradient(hsl(0, 100%, 80%) 50%, black 80%)
no-repeat 0 50%,
radial-gradient(hsl(35, 100%, 80%) 50%, black 80%)
no-repeat 10% 20%,
radial-gradient(hsl(71, 100%, 80%) 50%, black 80%)
no-repeat 25% 0,
radial-gradient(hsl(107, 100%, 80%) 50%, black 80%)
no-repeat 40% 20%,
radial-gradient(hsl(143, 100%, 80%) 50%, black 80%)
no-repeat 50% 50%,
radial-gradient(hsl(179, 100%, 80%) 50%, black 80%)
no-repeat 60% 80%,
radial-gradient(hsl(215, 100%, 80%) 50%, black 80%)
no-repeat 75% 100%,
radial-gradient(hsl(251, 100%, 80%) 50%, black 80%)
no-repeat 90% 80%,
radial-gradient(hsl(287, 100%, 80%) 50%, black 80%)
no-repeat 100% 50%,
radial-gradient(hsl(323, 100%, 80%) 50%, black 80%)
no-repeat 110% 20%,
radial-gradient(hsl(359, 100%, 80%) 50%, black 80%)
no-repeat 125% 0;
background-color: black;
background-size: 26px 26px;
transition: .5s cubic-bezier(0, .25, 1, .75);
}
.p8:hover {
background-position: -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%, 50% 50%,
60% 80%, 75% 100%, 90% 80%, 100% 50%, 110% 20%;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p>Hover over the panels to see the effects :)
<div class="panels">
<a class="panel p0" href="#"></a>
<a class="panel p1" href="#"></a>
<a class="panel p2" href="#"></a>
<a class="panel p3" href="#"></a>
<a class="panel p4" href="#"></a>
<a class="panel p5" href="#"></a>
<a class="panel p6" href="#"></a>
<a class="panel p7" href="#"></a>
<a class="panel p8" href="#"></a>
<a class="panel p9" href=""></a>
<a class="panel p10" href=""></a>
<a class="panel p11" href=""></a>
<a class="panel p12" href=""></a>
<a class="panel p13" href=""></a>
<a class="panel p14" href=""></a>
<a class="panel p15" href=""></a>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment