Skip to content

Commit f48ef98

Browse files
author
jessicarush
committed
Initial commit
1 parent 621a0bc commit f48ef98

File tree

3 files changed

+232
-0
lines changed

3 files changed

+232
-0
lines changed

‎css_gradients/base.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
19+
/* DEFAULTS --------------------------------------------------------------- */
20+
21+
html {
22+
color: var(--main-color);
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
line-height: 1.7em;
27+
}
28+
29+
code {
30+
line-height: 1.5em;
31+
background: lightcyan;
32+
}
33+
34+
35+
/* TYPOGRAPHY ------------------------------------------------------------- */
36+
37+
.primary-heading {
38+
color: var(--heading-color);
39+
font-family: var(--heading-font);
40+
font-size: 2rem;
41+
font-weight: 400;
42+
}
43+
44+
45+
/* LINKS & BUTTONS -------------------------------------------------------- */
46+
47+
/* LAYOUT ----------------------------------------------------------------- */
48+
49+
.centered-container {
50+
max-width: 920px;
51+
margin: 0 auto;
52+
}
53+
54+
.box {
55+
width: 300px;
56+
height: 300px;
57+
display: inline-block;
58+
}
59+
60+
.box-wide {
61+
width: 450px;
62+
height: 300px;
63+
display: inline-block;
64+
}
65+
66+
67+
/* COMPONENTS ------------------------------------------------------------- */
68+
69+
/* COSMETIC --------------------------------------------------------------- */
70+
71+
.image-cover {
72+
object-fit: cover;
73+
object-position: right top;
74+
}
75+
76+
.linear-g {
77+
background: linear-gradient(0.1turn, #7fffd4, #683af9);
78+
}
79+
80+
.radial-g {
81+
background: radial-gradient(#7fffd4, #683af9);
82+
}
83+
84+
.repeat-linear-g {
85+
background: repeating-linear-gradient(#7fffd4, #683af9 100px);
86+
}
87+
88+
.repeat-radial-g {
89+
background: repeating-radial-gradient(#7fffd4, #683af9 60px);
90+
}
91+
92+
.conic-g {
93+
background: conic-gradient(from 180deg, #7fffd4, #683af9);
94+
}
95+
96+
.fancy-repeat-g {
97+
background: repeating-linear-gradient(to bottom right, powderblue 0, powderblue 5px, white 5px, white 15px);
98+
}
99+
100+
.fancy-multiple-g-1 {
101+
background:
102+
linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0) 95%),
103+
linear-gradient(to left, rgba(255,0,0,1), rgba(255,0,0,0));
104+
}
105+
106+
.fancy-multiple-g-2 {
107+
background:
108+
linear-gradient(135deg, rgba(255,255,0,1), rgba(255,255,0,0) 75%),
109+
linear-gradient(45deg, rgba(255,0,0,1), rgba(255,0,0,0) 75%),
110+
linear-gradient(225deg, rgba(255,255,255,1), rgba(255,255,255,0) 75%),
111+
linear-gradient(315deg, rgba(255,0,255,1), rgba(255,0,255,0) 75%);
112+
}
113+
114+
.fancy-multiple-g-3 {
115+
background:
116+
linear-gradient(217deg, rgba(255,0,0,.85), rgba(255,0,0,0) 75%),
117+
linear-gradient(127deg, rgba(0,255,0,.85), rgba(0,255,0,0) 75%),
118+
linear-gradient(336deg, rgba(0,0,255,.85), rgba(0,0,255,0) 75%);
119+
}
120+
121+
.fancy-stop-g {
122+
background: linear-gradient(to right, red 0 20%, tomato 20% 40%, powderblue 40% 60%, honeydew 60% 80%, indigo 80% 100%);
123+
}
124+
125+
.fancy-conic-g {
126+
background: conic-gradient(red 0 36deg, tomato 36deg 160deg, powderblue 160deg 280deg, honeydew 280deg 360deg);
127+
border-radius: 50%;
128+
}
129+
130+
.fancy-repeat-conic-g {
131+
background: repeating-conic-gradient(at 20% 100%, honeydew 0 9deg, powderblue 9deg 18deg);
132+
border-radius: 50%;
133+
}
134+
135+
/* UTILITY ---------------------------------------------------------------- */
136+
137+
/* STATE ------------------------------------------------------------------ */

‎css_gradients/index.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Gradients</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header class="centered-container">
14+
<h1 class="primary-heading">CSS Gradients</h1>
15+
<nav></nav>
16+
</header>
17+
18+
<main class="centered-container">
19+
<p>The gradient CSS data type is a special type of image that consists of a transition between two or more colors</p>
20+
21+
22+
<h2 class="primary-heading">gradient types</h2>
23+
<ul>
24+
<li><code>linear-gradient(#7fffd4, #683af9);</code></li>
25+
<li><code>radial-gradient(#7fffd4, #683af9);</code></li>
26+
<li><code>repeating-linear-gradient(#7fffd4, #683af9 50px);</code></li>
27+
<li><code>repeating-radial-gradient(#7fffd4, #683af9 50px);</code></li>
28+
<li><code>conic-gradient(#7fffd4, #683af9);</code></li>
29+
</ul>
30+
31+
<div class="box linear-g"></div>
32+
<div class="box radial-g"></div>
33+
<div class="box repeat-linear-g"></div>
34+
<div class="box repeat-radial-g"></div>
35+
<div class="box conic-g"></div>
36+
<div class="box fancy-repeat-g"></div>
37+
38+
39+
<h2 class="primary-heading">direction</h2>
40+
<p>The linear gradients and conical can include a direction. For example:</p>
41+
<ul>
42+
<li><code>linear-gradient(to bottom right, tomato, powderblue);</code></li>
43+
<li><code>linear-gradient(45deg, tomato, powderblue);</code></li>
44+
<li><code>linear-gradient(0.25turn, tomato, powderblue);</code></li>
45+
<li><code>conic-gradient(from 45deg, #7fffd4, #683af9);</code></li>
46+
</ul>
47+
48+
49+
<h2 class="primary-heading">stop position</h2>
50+
<p>You can add stop positions to shift the mid-point of the transition between two colors as well as set when colors start and stop. For example:</p>
51+
<ul>
52+
<li><code>linear-gradient(to left, tomato, 20%, powderblue);</code></li>
53+
<li><code>linear-gradient(red 70%, orange 80%, yellow 90%);</code></li>
54+
<li><code>linear-gradient(red 0 33%, orange 33% 66%, yellow 66% 100%);</code></li>
55+
</ul>
56+
<div class="box-wide fancy-stop-g"></div>
57+
<div class="box fancy-conic-g"></div>
58+
59+
60+
<h2 class="primary-heading">multiple gradients</h2>
61+
<p>You can layer up gradients that have transparancy in their rgba values. for example:</p>
62+
<ul>
63+
<li><code>background:<br>
64+
linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0) 95%),</br>
65+
linear-gradient(to left, rgba(255,0,0,1), rgba(255,0,0,0));</code></li>
66+
<li><code>background:<br>
67+
linear-gradient(217deg, rgba(255,0,0,.85), rgba(255,0,0,0) 75%),<br>
68+
linear-gradient(127deg, rgba(0,255,0,.85), rgba(0,255,0,0) 75%),<br>
69+
linear-gradient(336deg, rgba(0,0,255,.85), rgba(0,0,255,0) 75%);</code></li>
70+
</ul>
71+
<div class="box fancy-multiple-g-1"></div>
72+
<div class="box fancy-multiple-g-2"></div>
73+
<div class="box fancy-multiple-g-3"></div>
74+
75+
76+
<h2 class="primary-heading">center point</h2>
77+
<p>for conical gradients, you can set the center point by using the at keyword. For example:</p>
78+
<ul>
79+
<li><code>conic-gradient(at 20% 100%, honeydew, powderblue);</code></li>
80+
<li><code>repeating-conic-gradient(at 20% 100%, honeydew 0 9deg, powderblue 9deg 18deg);</code></li>
81+
</ul>
82+
83+
<div class="box fancy-repeat-conic-g"></div>
84+
85+
86+
87+
88+
89+
</main>
90+
91+
<footer>
92+
</footer>
93+
94+
</body>
95+
</html>

‎css_gradients/plant.jpg‎

21.2 KB
Loading

0 commit comments

Comments
 (0)