Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

278 lines (254 sloc) 13.54 kB
<!DOCTYPE html>
<html>
<head>
<title>Tests for background gradients</title>
<style type="text/css">
html { -pie-load-path: "../build"; }
.section {
display: block;
border: 1px solid #CCC;
margin: 2em 1em;
overflow: hidden;
background:url(border.png);
position: relative;
z-index: 0;
zoom: 1;
}
h1 {
font-size: 1em;
margin: 1em;
}
p {
float: left;
padding: 1em;
width: 15%;
height: 8em;
border: 1px solid;
margin: 1em;
color: #000;
text-shadow: #FFF 0 0 2px;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(../build/PIE.htc);
}
#vert1 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(top, yellow, blue);
-pie-background: linear-gradient(top, yellow, blue);
}
#vert2 {
background: -webkit-gradient(linear, left bottom, left top, from(blue), to(yellow));
background: -moz-linear-gradient(bottom, blue, yellow);
-pie-background: linear-gradient(bottom, blue, yellow);
}
#vert3 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(-90deg, yellow, blue);
-pie-background: linear-gradient(-90deg, yellow, blue);
}
#vert4 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(270deg, yellow, blue);
-pie-background: linear-gradient(270deg, yellow, blue);
}
#vert5 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(top, yellow 0%, blue 100%);
-pie-background: linear-gradient(top, yellow 0%, blue 100%);
}
#vert6 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(center top, yellow, blue);
-pie-background: linear-gradient(center top, yellow, blue);
}
#vert7 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(yellow, blue);
-pie-background: linear-gradient(yellow, blue);
}
#horiz1 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(left, yellow, blue);
-pie-background: linear-gradient(left, yellow, blue);
}
#horiz2 {
background: -webkit-gradient(linear, right top, left top, from(blue), to(yellow));
background: -moz-linear-gradient(right, blue, yellow);
-pie-background: linear-gradient(right, blue, yellow);
}
#horiz3 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(0, yellow, blue);
-pie-background: linear-gradient(0, yellow, blue);
}
#horiz4 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(360deg, yellow, blue);
-pie-background: linear-gradient(360deg, yellow, blue);
}
#horiz5 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(left, yellow 0%, blue 100%);
-pie-background: linear-gradient(left, yellow 0%, blue 100%);
}
#horiz6 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(left center, yellow, blue);
-pie-background: linear-gradient(left center, yellow, blue);
}
#diag1 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background: -moz-linear-gradient(top left, yellow, blue);
-pie-background: linear-gradient(top left, yellow, blue);
}
#diag2 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background: -moz-linear-gradient(0 0, yellow, blue);
-pie-background: linear-gradient(0 0, yellow, blue);
}
#diag3 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background: -moz-linear-gradient(top 0px left 0px, yellow, blue);
-pie-background: linear-gradient(top 0px left 0px, yellow, blue);
}
#diag4 {
background: -webkit-gradient(linear, right bottom, left top, from(blue), to(yellow));
background: -moz-linear-gradient(bottom right, blue, yellow);
-pie-background: linear-gradient(bottom right, blue, yellow);
}
#diag5 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background: -moz-linear-gradient(-45deg, yellow, blue);
-pie-background: linear-gradient(-45deg, yellow, blue);
}
#diag6 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background: -moz-linear-gradient(315deg, yellow, blue);
-pie-background: linear-gradient(315deg, yellow, blue);
}
#multi1 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), color-stop(0.2, blue), to(#0f0));
background: -moz-linear-gradient(top, yellow, blue 20%, #0f0);
-pie-background: linear-gradient(top, yellow, blue 20%, #0f0);
}
#multi2 {
background: -webkit-gradient(linear, left top, right top, from(yellow), color-stop(0.2, blue), to(#0f0));
background: -moz-linear-gradient(left, yellow, blue 20%, #0f0);
-pie-background: linear-gradient(left, yellow, blue 20%, #0f0);
}
#multi3 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, yellow), color-stop(0.5, blue), color-stop(0.7, green));
background: -moz-linear-gradient(top, yellow 30%, blue 50%, green 70%);
-pie-background: linear-gradient(top, yellow 30%, blue 50%, green 70%);
}
#multi4 {
background: -webkit-gradient(linear, left top, right top, color-stop(0.5, yellow), color-stop(0.75, blue), to(green));
background: -moz-linear-gradient(left, yellow 50%, blue, green);
-pie-background: linear-gradient(left, yellow 50%, blue, green);
}
#multi5 {
background: -webkit-gradient(linear, left top, right top, from(aqua), color-stop(.0667, black), color-stop(.1333, blue), color-stop(.2, fuchsia), color-stop(.2667, gray), color-stop(.3333, green), color-stop(.4, lime), color-stop(.4667, maroon), color-stop(.5333, navy), color-stop(.6, olive), color-stop(.6667, purple), color-stop(.7333, red), color-stop(.8, silver), color-stop(.8667, teal), color-stop(.9333, white), to(yellow));
background: -moz-linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
-pie-background: linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
}
#multi6 {
background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(0.333, yellow), color-stop(.667, green), to(blue));
background: -moz-linear-gradient(45deg, red, yellow, green, blue);
-pie-background: linear-gradient(45deg, red, yellow, green, blue);
}
#lineup p {
border: 0;
width: 40%;
height: 50px;
margin-right: 0;
border-radius: 0;
background: -moz-linear-gradient(center bottom,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
-pie-background: linear-gradient(center bottom,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
}
#lineup2 {
margin-left: 0;
}
#opacity {
background: url(background2.gif);
}
#opacity1 {
background: -webkit-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
background: -moz-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
background: -ms-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
background: -o-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
-pie-background: linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
}
#opacity1:hover {
background: -webkit-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
background: -moz-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
background: -ms-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
background: -o-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
-pie-background: linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
}
#opacity2 {
background: -webkit-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -moz-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -ms-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -o-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
-pie-background: linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
}
#opacity2:hover {
background: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -moz-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -ms-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -o-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
-pie-background: linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
}
</style>
</head>
<body>
<div class="section" id="vertTests">
<h1>Basic vertical linear gradient</h1>
<p id="vert1">linear-gradient( top, yellow, blue);</p>
<p id="vert2">linear-gradient( bottom, blue, yellow);</p>
<p id="vert3">linear-gradient( -90deg, yellow, blue);</p>
<p id="vert4">linear-gradient( 270deg, yellow, blue);</p>
<p id="vert5">linear-gradient( top, yellow 0%, blue 100%);</p>
<p id="vert6">linear-gradient( center top, yellow, blue);</p>
<p id="vert7">linear-gradient( yellow, blue);</p>
</div>
<div class="section" id="horizTests">
<h1>Basic horizontal linear gradient</h1>
<p id="horiz1">linear-gradient( left, yellow, blue);</p>
<p id="horiz2">linear-gradient( right, blue, yellow);</p>
<p id="horiz3">linear-gradient( 0, yellow, blue);</p>
<p id="horiz4">linear-gradient( 360deg, yellow, blue);</p>
<p id="horiz5">linear-gradient( left, yellow 0%, blue 100%);</p>
<p id="horiz6">linear-gradient( left center, yellow, blue);</p>
</div>
<div class="section" id="diagTests">
<h1>Basic diagonal linear gradient</h1>
<p id="diag1">linear-gradient(top left, yellow, blue);</p>
<p id="diag2">linear-gradient(0 0, yellow, blue);</p>
<p id="diag3">linear-gradient(top 0px left 0px, yellow, blue);</p>
<p id="diag4">linear-gradient(bottom right, blue, yellow);</p>
<p id="diag5">linear-gradient(-45deg, yellow, blue);</p>
<p id="diag6">linear-gradient(315deg, yellow, blue);</p>
</div>
<div class="section" id="multiStopTests">
<h1>Multiple color stops along linear gradient</h1>
<p id="multi1">linear-gradient(top, yellow, blue 20%, #0f0)</p>
<p id="multi2">linear-gradient(left, yellow, blue 20%, #0f0)</p>
<p id="multi3">linear-gradient(top, yellow 30%, blue 50%, green 70%)</p>
<p id="multi4">linear-gradient(left, yellow 50%, blue, green)</p>
<p id="multi5">linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );</p>
<p id="multi6">linear-gradient(45deg, red, yellow, green, blue);</p>
</div>
<div class="section" id="lineup">
<h1>Lining up (<a href="http://github.com/lojjic/PIE/issues/issue/64">issue 64</a>)</h1>
<p id="lineup1">element 1</p>
<p id="lineup2">element 2</p>
</div>
<div class="section" id="opacity">
<h1>Color-stop opacity</h1>
<p id="opacity1">linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2))</p>
<p id="opacity2">linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1))</p>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.