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: 0;
font-family: Helvetica;
font-size: 15px;
}
h1 {
margin: 0 0 8px;
border-bottom: solid 1px white;
font-size: 23px;
font-style: italic;
}
code {
color: deeppink;
font-size: 17px;
}
.panel {
width: 195px;
height: 130px;
margin: -1px;
border: solid 2px lightblue;
border-radius: 13px;
display: inline-block;
overflow: hidden;
text-decoration: none;
}
.panel-info {
bottom: 0;
right: 0;
left: 0;
padding: 8px;
display: none;
position: fixed;
background: #222;
color: white;
content: attr(data-inf);
}
.panel:hover .panel-info {
display: block;
}
.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;
}
.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(359, 100%, 80%) 20%, black 70%) -10% 80%,
radial-gradient(hsl(0, 100%, 80%) 20%, black 70%) 0 50%,
radial-gradient(hsl(35, 100%, 80%) 20%, black 70%) 10% 20%,
radial-gradient(hsl(71, 100%, 80%) 20%, black 70%) 25% 0,
radial-gradient(hsl(107, 100%, 80%) 20%, black 70%) 40% 20%,
radial-gradient(hsl(143, 100%, 80%) 20%, black 70%) 50% 50%,
radial-gradient(hsl(179, 100%, 80%) 20%, black 70%) 60% 80%,
radial-gradient(hsl(215, 100%, 80%) 20%, black 70%) 75% 100%,
radial-gradient(hsl(251, 100%, 80%) 20%, black 70%) 90% 80%,
radial-gradient(hsl(287, 100%, 80%) 20%, black 70%) 100% 50%,
radial-gradient(hsl(323, 100%, 80%) 20%, black 70%) 110% 20%,
radial-gradient(hsl(359, 100%, 80%) 20%, black 70%) 125% 0;
background-color: black;
background-repeat: no-repeat;
background-size: 26px 26px;
transition: .3s cubic-bezier(0, 0.25, 1, .75);
}
.p8:hover {
background-position: -25% 100%, -10% 80%, 0 50%, 10% 20%, 25% 0, 40% 20%,
50% 50%, 60% 80%, 75% 100%, 90% 80%, 100% 50%, 110% 20%;
}
p9 {
background: radial-gradient(deeppink, white 70%) 20% 100%,
radial-gradient(gold, white 70%) 40% 100%,
radial-gradient(greenyellow, white 70%) 60% 100%,
radial-gradient(aqua, white 70%) 80% 100%;
background-size: 13px 13px;
}
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="#">
<div class="panel-info">
<h1>Rainbow.</h1>
Bouncing <code>transition</code> on
<code>background-size</code> and
<code>background-position</code>.
</div>
</a>
<a class="panel p1" href="#">
<div class="panel-info">
<h1>Sharp waves.</h1> Linear <code>transition</code> on
<code>background-position</code>.
</div>
</a>
<a class="panel p2" href="#">
<div class="panel-info">
<h1>Soft discs.</h1>
Bouncing <code>transition</code> on
<code>background-position</code> and
<code>background-size</code>.
</div>
</a>
<a class="panel p3" href="#">
<div class="panel-info">
<h1>White to...</h1>
Actually just a <code>transition</code> on the
<code>background-color</code> underneath the partially
transparent <code>linear-gradient</code>.
</div>
</a>
<a class="panel p4" href="#">
<div class="panel-info">
<h1>Crash into Jupiter.</h1>
Just a <code>transition</code> on
<code>background-size</code>
(scaling, aspect ratio preserved).
</div>
</a>
<a class="panel p5" href="#">
<div class="panel-info">
<h1>Stripes to ropes.</h1>
Another <code>transition</code> on
<code>background-size</code>
(distortion, aspect ratio not preserved).
</div>
</a>
<a class="panel p6" href="#">
<div class="panel-info">
<h1>Stretched rainbow.</h1>
Bouncing <code>transition</code> on
<code>background-position</code>.
</div>
</a>
<a class="panel p7" href="#">
<div class="panel-info">
<h1>T-Rex teeth.</h1>
Bouncing <code>transition</code> on
<code>background-size</code>.
</div>
</a>
<a class="panel p8" href="#">
<div class="panel-info">
<h1>Happy sine wave.</h1>
Another <code>transition</code> on
<code>background-position</code>.
</div>
</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":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment