Scribd
Upload
52 views5 pages

Charset HTML Body P #Gradient1

The document demonstrates different types of radial gradients that can be used as CSS backgrounds, including circle, closest-side, and repeating gradients. Code examples are provided for each type of gradient with both the CSS3 standard and browser-specific syntax like -webkit.

Uploaded by

Malik Ayoob
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views5 pages

Charset HTML Body P #Gradient1

The document demonstrates different types of radial gradients that can be used as CSS backgrounds, including circle, closest-side, and repeating gradients. Code examples are provided for each type of gradient with both the CSS3 standard and browser-specific syntax like -webkit.

Uploaded by

Malik Ayoob
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Radial


gradients</title> <style> html { background: -webkit-radial-
gradient(green, yellow); background: radial-gradient(green,
yellow); height: 100%; } body { font: 14px/1.5 courier; color:
#000; } p { width: 300px; height: 150px; padding: 20px; margin:
20px 0 0 20px; float: left; border: 1px solid green; } #gradient1 {
background: #888 url(images/gradientRadial.jpg); /* Background
images can be used for browsers that aren't capable of producing
gradients */ background: -webkit-radial-gradient(yellow, green); /*
Backup for major browsers that can still handle gradients */
background: radial-gradient(yellow, green); /* The CSS3 standard */
} #gradient2 { background: -webkit-radial-gradient(circle, yellow,
green); background: radial-gradient(circle, yellow, green); }
#gradient3 { background: -webkit-radial-gradient(circle closest-
side, yellow, green); background: radial-gradient(circle closest-
side, yellow, green); } #gradient4 { background: -webkit-radial-
gradient(top left, yellow, green); background: radial-gradient(at
top left, yellow, green); } #gradient5 { background: -webkit-
repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px, #0f0 20px);
background: repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px,
#0f0 20px); } #gradientCollie { width: 120px; height: 90px;
padding: 50px 60px; border-radius: 120px/95px; background: -webkit-
radial-gradient(white 50%, #06c 75%); background: radial-
gradient(white 50%, #06c 75%); } </style> </head> <body> <p
id="gradient1"><code>background: radial-gradient(yellow,
green);</code></p> <p id="gradient2"><code>background: radial-
gradient(circle, yellow, green);</code></p> <p
id="gradient3"><code>background: radial-gradient(circle closest-
side, yellow, green);</code></p> <p
id="gradient4"><code>background: radial-gradient(at top left,
yellow, green);</code></p> <p id="gradient5"><code>background:
repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px, #0f0
20px);</code></p> <!-- Link back to HTML Dog: --> <p
id="gradientCollie"><a href="http://www.htmldog.com/examples/"><img
src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body> </html>

<!DOCTYPE html>

<html>
<head>

<meta charset="utf-8">

<title>Linear gradients</title>

<style>

html {

background: -webkit-linear-gradient(left, yellow, red);

background: linear-gradient(to left, yellow, red);

height: 100%;

body {

font: 14px/1.5 courier;

color: #000;

p{

width: 200px;

height: 200px;

padding: 20px;

margin: 20px 0 0 20px;

float: left;

border: 1px solid yellow;

#gradient1 {
background: #888 url(images/gradientLinear.jpg) repeat-x; /* Background
images can be used for browsers that aren't capable of producing gradients */

background: -webkit-linear-gradient(yellow, red); /* Backup for major browsers


that can still handle gradients */

background: linear-gradient(yellow, red); /* The CSS3 standard */

#gradient2 {

background: -webkit-linear-gradient(right, yellow, red);

background: linear-gradient(to right, yellow, red);

#gradient3 {

background: -webkit-linear-gradient(bottom right, yellow, red);

background: linear-gradient(to bottom right, yellow, red);

#gradient4 {

background: -webkit-linear-gradient(20deg, yellow, red);

background: linear-gradient(20deg, yellow, red);

#gradient5 {

background: -webkit-linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%),


hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));

background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%),


hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
}

#gradient6 {

background: -webkit-linear-gradient(135deg, hsl(36,100%,50%) 10%,


hsl(72,100%,50%) 60%, white 90%);

background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%)


60%, white 90%);

#gradientCollie {

width: 120px;

height: 90px;

padding: 75px 60px;

background: -webkit-linear-gradient(white, #06c);

background: linear-gradient(white, #06c);

</style>

</head>

<body>

<p id="gradient1"><code>background: linear-gradient(yellow, red);</code></p>

<p id="gradient2"><code>background: linear-gradient(to right, yellow, red);</code></p>

<p id="gradient3"><code>background: linear-gradient(to bottom right, yellow,


red);</code></p>

<p id="gradient4"><code>background: linear-gradient(20deg, yellow, red);</code></p>

<p id="gradient5"><code>background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%),


hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));</code></p>
<p id="gradient6"><code>background: linear-gradient(135deg, hsl(36,100%,50%) 10%,
hsl(72,100%,50%) 60%, white 90%);</code></p>

<!-- Link back to HTML Dog: -->

<p id="gradientCollie"><a href="http://www.htmldog.com/examples/"><img


src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>

</body>

</html>

You might also like