Skip to content

Commit 95fd13a

Browse files
azaleamollisazaleamollis
committed
Initial commit
0 parents  commit 95fd13a

File tree

3 files changed

+769
-0
lines changed

3 files changed

+769
-0
lines changed

‎index.html

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<!doctype html>
2+
<html lang="en"><head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4+
5+
<title>CSS3 Linear Gradient - Hongkiat.com</title>
6+
7+
<!-- jquery -->
8+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
9+
<script>window.jQuery || document.write('<script src="../_nav/js/jquery.js"><\/script>')</script>
10+
11+
<!-- demo scripts -->
12+
<link rel="stylesheet" href="normalize.css">
13+
<link rel="stylesheet" href="style.css">
14+
15+
<!-- nav script -->
16+
<script src="../_nav/js/nav.js" type="text/javascript"></script>
17+
</head>
18+
19+
<body>
20+
21+
<!-- nav meta -->
22+
<div class="demo-meta">
23+
<h1 class="demo-title">CSS3 Linear Gradient</h1>
24+
<p class="demo-desc">We can create gradient color with CSS3 and here how to achieve it.</p>
25+
</div>
26+
27+
<!-- demo content -->
28+
<div class="demo-wrapper">
29+
30+
<section id="gradient-1">
31+
<h3>Gradient Start Position</h3>
32+
33+
<div class="gradient top">
34+
35+
</div>
36+
37+
<h4>Code</h4>
38+
<pre>
39+
div {
40+
/*Official Syntax*/
41+
background-image: linear-gradient(top, #ff5a00, #FFAE00);
42+
43+
/*Browser Syntax*/
44+
background-image: -webkit-linear-gradient(top, #ff5a00, #FFAE00);
45+
background-image: -moz-linear-gradient(top, #ff5a00, #FFAE00);
46+
background-image: -o-linear-gradient(top, #ff5a00, #FFAE00);
47+
background-image: -ms-linear-gradient(top, #ff5a00, #FFAE00);
48+
}
49+
</pre>
50+
<hr>
51+
<div class="gradient bottom">
52+
53+
</div>
54+
<h4>Code</h4>
55+
<pre>
56+
div {
57+
/*Official Syntax*/
58+
background-image: linear-gradient(bottom, #ff5a00, #FFAE00);
59+
60+
/*Browser Syntax*/
61+
background-image: -webkit-linear-gradient(bottom, #ff5a00, #FFAE00);
62+
background-image: -moz-linear-gradient(bottom, #ff5a00, #FFAE00);
63+
background-image: -o-linear-gradient(bottom, #ff5a00, #FFAE00);
64+
background-image: -ms-linear-gradient(bottom, #ff5a00, #FFAE00);
65+
}
66+
</pre>
67+
68+
<hr>
69+
70+
<div class="gradient left">
71+
72+
</div>
73+
<h4>Code</h4>
74+
<pre>
75+
div {
76+
/*Official Syntax*/
77+
background-image: linear-gradient(left, #ff5a00, #FFAE00);
78+
79+
/*Browser Syntax*/
80+
background-image: -webkit-linear-gradient(left, #ff5a00, #FFAE00);
81+
background-image: -moz-linear-gradient(left, #ff5a00, #FFAE00);
82+
background-image: -o-linear-gradient(left, #ff5a00, #FFAE00);
83+
background-image: -ms-linear-gradient(left, #ff5a00, #FFAE00);
84+
}
85+
</pre>
86+
87+
<hr>
88+
89+
<div class="gradient right">
90+
91+
</div>
92+
<h4>Code</h4>
93+
<pre>
94+
div {
95+
/*Official Syntax*/
96+
background-image: linear-gradient(right, #ff5a00, #FFAE00);
97+
98+
/*Browser Syntax*/
99+
background-image: -webkit-linear-gradient(right, #ff5a00, #FFAE00);
100+
background-image: -moz-linear-gradient(right, #ff5a00, #FFAE00);
101+
background-image: -o-linear-gradient(right, #ff5a00, #FFAE00);
102+
background-image: -ms-linear-gradient(right, #ff5a00, #FFAE00);
103+
}
104+
</pre>
105+
</section>
106+
107+
<section id="gradient-2">
108+
<h3>Diagonal Gradient</h3>
109+
110+
<div class="gradient diagonal">
111+
112+
</div>
113+
<h4>Code</h4>
114+
<pre>
115+
div {
116+
/*Official Syntax*/
117+
background-image: linear-gradient(45deg, #ff5a00, #FFAE00);
118+
119+
/*Browser Syntax*/
120+
background-image: -webkit-linear-gradient(45deg, #ff5a00, #FFAE00);
121+
background-image: -moz-linear-gradient(45deg, #ff5a00, #FFAE00);
122+
background-image: -o-linear-gradient(45deg, #ff5a00, #FFAE00);
123+
background-image: -ms-linear-gradient(45deg, #ff5a00, #FFAE00);
124+
}
125+
</pre>
126+
</section>
127+
128+
<section id="gradient-3">
129+
<h3> Gradient Color Stop</h3>
130+
131+
<div class="gradient color-stop">
132+
133+
</div>
134+
<h4>Code</h4>
135+
<pre>
136+
div {
137+
/*Official Syntax*/
138+
background-image: linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
139+
140+
/*Browser Syntax*/
141+
background-image: -webkit-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
142+
background-image: -moz-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
143+
background-image: -o-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
144+
background-image: -ms-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
145+
}
146+
</pre>
147+
</section>
148+
149+
<section id="gradient-4">
150+
<h3>Transparent Gradient</h3>
151+
152+
<div class="gradient transparent">
153+
154+
</div>
155+
<h4>Code</h4>
156+
<pre>
157+
div {
158+
/*Official Syntax*/
159+
background-image: linear-gradient(to bottom, rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
160+
161+
/*Browser Syntax*/
162+
background-image: -moz-linear-gradient(top, rgba(255,90,0,0.5) 0%, rgba(255,174,0,0.5) 100%);
163+
background-image: -webkit-linear-gradient(top, rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
164+
background-image: -o-linear-gradient(top, rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
165+
background-image: -ms-linear-gradient(top, rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
166+
}
167+
</pre>
168+
</section>
169+
170+
<section id="gradient-5">
171+
<h3>Mulitple Color Gradient</h3>
172+
173+
<div class="gradient multi-colors">
174+
175+
</div>
176+
<h4>Code</h4>
177+
<pre>
178+
div {
179+
background-image: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
180+
background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
181+
background-image: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
182+
background-image: -ms-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
183+
background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
184+
}
185+
</pre>
186+
</section>
187+
</div>
188+
189+
</body>
190+
</html>

0 commit comments

Comments
 (0)