-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbackground.html
68 lines (63 loc) · 2.75 KB
/
background.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<title>Starry Night CSS3 Background</title>
<link rel="stylesheet" href="style.css" />
<style>
body {
background-color: black;
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(circle, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(circle, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Background Attributes */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Header -->
<header>
<h1>Pure CSS3 Background Animation</h1>
<div id="backlinks">
<a href="http://www.inwebson.com/html5/html5-form-with-css3-markup/">BACK TO ARTICLE »</a>
<a href="http://www.inwebson.com">Visit inWebson.com »</a>
</div>
<div class="clearfix"></div>
</header>
<!-- Content -->
<section id="wrapper">
<nav id="navigation">
<ul>
<li class="current"><a href="#" title="Static CSS3 background">Background</a></li>
<li><a href="starry.html" title="Starry night animation">Starry Night</a></li>
<li><a href="snow.html" title="Snow fall animation">Snow Fall</a></li>
</ul>
<div class="clearfix"></div>
</nav>
<div id="container">
<h2>Starry Night CSS3 Background</h2>
<div id="content">
<p>There is <strong>no JavaScript</strong> and <strong>no images</strong> are used in this page. The only thing that make this happen is because of the magic of <strong>CSS3</strong>.</p>
<p>If you didn't see a starry night background, means your current browser is not fully support CSS3, try using latest version of <strong>Chrome</strong> or <strong>Safari</strong> to view this page.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<span>© 2011 <a href="http://www.inwebson.com">inWebson.com</a>. Design by <a href="http://www.inwebson.com/contactus">Kenny Ooi</a>. Powered by HTML5 and CSS3.</span>
</footer>
</body>
</html>