Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
163 lines (130 sloc) 5.3 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3 Gradients</title>
<link rel="stylesheet" href="css/pagesetup.css"/>
<link rel="stylesheet" href="css/hearts.css"/>
<link rel="stylesheet" href="css/flashes.css"/>
<link rel="stylesheet" href="css/stripes.css"/>
<link rel="stylesheet" href="css/angled.css"/>
<link rel="stylesheet" href="css/checkered.css"/>
<link rel="stylesheet" href="css/squares.css"/>
<link rel="stylesheet" href="css/nonrepeat.css"/>
<link rel="stylesheet" href="css/repeat.css"/>
<link rel="stylesheet" href="css/dots.css"/>
<link rel="stylesheet" href="css/wallpaper.css"/>
<link rel="stylesheet" href="css/seamless.css"/>
<link rel="stylesheet" href="css/inverse.css"/>
<link rel="stylesheet" href="css/metal.css"/>
<link rel="stylesheet" href="css/food.css"/>
</head>
<body>
<article>
<p>These gradients should work in Firefox 3.6+, Chrome, Opera 11.6+ and Safari 4+. Click on "download css" to download the css for the current section. Generally, the third example in a group expands on other examples in the page.</p>
<section>
<h1>Playing with Circles</h1>
<div class="metal"><p>Pressed Metal</p></div>
<div class="circlestripes purple"><p>Pleasant</p></div>
<div class="retro67"><p>Retro 1967</p></div>
<footer><a href="css/metal.css">Download CSS</a></footer>
</section>
<section>
<h1>Pop Dots</h1>
<div class="wallpaper red"><p>Pop Dots in Red</p></div>
<div class="wallpaper purple"><p>Pop Dots in Blue</p></div>
<div class="wallpaper green"><p>Pop Stripes</p></div>
<footer><a href="css/wallpaper.css">Download CSS</a></footer>
</section>
<section>
<h1>Inversion</h1>
<div class="inverse1"><p>Inverted Rainbow</p></div>
<div class="inverse2"><p>Third Eye</p></div>
<div class="inverse3"><p>Disco Ball</p></div>
<footer><a href="css/inverse.css">Download CSS</a></footer>
</section>
<section>
<h1>Playing with My Food</h1>
<div class="candyDots"><p>Candy Buttons</p></div>
<div class="apple"><p>Apples</p></div>
<footer><a href="css/food.css">Download CSS</a></footer>
</section>
<section class="sseamless">
<h1>Seamless Circles</h1>
<div class="seamless"><p>Seamless</p></div>
<div class="seamless2 purple"><p>Seamless With Color</p></div>
<div class="seamless3"><p>Seamless Inverted</p></div>
<footer> <a href="css/seamless.css">Download CSS</a></footer>
</section>
<section>
<h1>Non Repeating Vertical lines</h1>
<div class="nonrepeating blue"><p>Never repeating</p></div>
<div class="nonrepeating no-repeat2 red"><p>Never repeating 2</p></div>
<div class="nonrepeating no-repeat3 green"><p>Never repeating 3</p></div>
<footer><a href="css/nonrepeat.css">Download CSS</a></footer>
</section>
<section>
<h1>Hearts</h1>
<div class="littlehearts"><p>Little Hearts</p></div>
<div class="hearts"><p>Big Hearts</p></div>
<div class="radhearts"><p>Radial Hearts</p></div>
<footer><a href="css/hearts.css">Download CSS</a></footer>
</section>
<section>
<h1>Camera effects</h1>
<div class="flash"><p>Glares</p></div>
<div class="flash2"><p>Lens Glare</p></div>
<div class="flash weird"><p>No Name</p></div>
<footer><a href="css/flashes.css">Download CSS</a></footer>
</section>
<section>
<h1>Checkered</h1>
<div class="smallStripe checkered blue"><p>Little Checkered</p></div>
<div class="bigstripe checkered pink"><p>Big Checkered</p></div>
<div class="bigstripe kitchenTiles green"><p>Bathroom Tiles</p></div>
<footer><a href="css/checkered.css">Download CSS</a></footer>
</section>
<section>
<h1>Angled</h1>
<div class="smallStripe angled green"><p>Small Angled Stripes</p></div>
<div class="bigstripe angled purple"><p>Big Angled Stripes</p></div>
<div class="bigstripe doubleAngled pink"><p>Angled Checkered</p></div>
<footer><a href="css/angled.css">Download CSS</a></footer></section>
<section>
<h1>Squares</h1>
<div class="smallStripe squares purple"><p>Little Squares</p></div>
<div class="bigstripe squares green"><p>Big squares</p></div>
<div class="bigstripe diamonds blue"><p>Diamonds</p></div>
<footer><a href="css/squares.css">Download CSS</a></footer>
</section>
<section>
<h1>More vertical stripes</h1>
<div class="smallStripe verticalStripe pink"><p>Small Vertical Stripes</p></div>
<div class="bigstripe verticalStripe blue"><p>Big vertical stripes</p></div>
<div class="bigstripe jailcell blue"><p>Jail Cell</p></div>
<footer><a href="css/stripes.css">Download CSS</a></footer>
</section>
<section>
<h1>Horizontal Stripes</h1>
<div class="smallStripe horizontalStripe purple"><p>Little horizontal Stripe</p></div>
<div class="bigstripe horizontalStripe green"><p>Big Horizontal Stripes</p></div>
<div class="bigstripe horizontalStripe2 pink"><p>Stripes with gradient</p></div>
<footer><a href="css/stripes.css">Download CSS</a></footer>
</section>
<section>
<h1>Dots</h1>
<div class="bigdots dots blue"><p>Big Dots</p></div>
<div class="small dots pink"><p>Polka Dots</p></div>
<div class="tiny dots green"><p>Tiny Dots</p></div>
<footer><a href="css/dots.css">Download CSS</a></footer>
</section>
<section>
<h1>Repeating Gradients (FF3.6, Chrome, Webkit Nightly Build and kind of in IE10)</h1>
<div class="repeatLin"><p>Repeat Linear Gradients</p></div>
<div class="repeatRad"><p>Repeat Radial Gradients</p></div>
<div class="repeatBoth"><p>Repeating both ways</p></div>
<footer> Only works in Chrome, FF3.6+ &amp; Opera 11.6+, Safari 5.1+ <a href="css/repeat.css">Download CSS</a></footer>
</section>
</article>
</body>
</html>