Skip to content

Commit 7c34181

Browse files
committed
Rework of 'Cicadients' with repeating linear gradients
1 parent 1d63bda commit 7c34181

File tree

1 file changed

+114
-0
lines changed

1 file changed

+114
-0
lines changed

cicadients2017.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
6+
<title>Cicadients</title>
7+
<style type="text/css" media="all">
8+
9+
h1 { margin: 1.25em 0 0; border-bottom: 1px solid #666;}
10+
h2 {margin: 1.5em 0 0; border-bottom: 1px solid #BBB;}
11+
p {margin: 0.5em 0;}
12+
div[id^="d"] {
13+
margin: 0 0 2em 0; padding: 0;
14+
border: 1px solid gray; background: #FFF;}
15+
#d1 {
16+
background-image:
17+
repeating-linear-gradient(
18+
90deg,
19+
rgba(171,191,196,0.6),
20+
rgba(171,191,196,8) 14.5px,
21+
rgba(255,0,0,0) 14.5px,
22+
rgba(255,0,0,0) 29px
23+
),
24+
repeating-linear-gradient(
25+
90deg,
26+
rgba(203,138,153,0.7),
27+
rgba(203,138,153,0.7) 18.4px,
28+
rgba(203,138,153,0.5) 18.5px,
29+
rgba(255,0,0,0) 18.5px,
30+
rgba(255,0,0,0) 37px
31+
),
32+
repeating-linear-gradient(
33+
90deg,
34+
rgba(220,209,185,0),
35+
rgba(220,209,185,0) 10.6px,
36+
rgba(220,209,185,0.4) 10.6px,
37+
rgba(220,209,185,0.8) 42.4px,
38+
rgba(255,0,0,0) 42.4px,
39+
rgba(255,0,0,0) 53px
40+
)
41+
;
42+
height: 200px;
43+
}
44+
#d2 {
45+
background-image:
46+
linear-gradient(
47+
0deg,
48+
rgba(255,128,128,0.25),
49+
rgba(255,128,128,0) 75%
50+
)
51+
,
52+
linear-gradient(
53+
89deg,
54+
transparent 30%,
55+
rgba(0,0,0,0.25) 35%,
56+
rgba(0,0,0,0.25) 40%,
57+
rgba(0,0,0,0.1) 45%,
58+
rgba(255,255,255,0.08) 48%,
59+
rgba(255,255,255,0.175) 50%,
60+
rgba(0,0,0,0.2) 55%,
61+
rgba(0,0,0,0.15) 60%,
62+
rgba(0,0,0,0.15) 65%,
63+
rgba(0,0,0,0.2) 70%,
64+
rgba(0,0,0,0.1) 75%,
65+
rgba(0,0,0,0) 80%,
66+
transparent
67+
)
68+
,
69+
linear-gradient(
70+
92deg,
71+
rgba(0,0,0,0.5),
72+
rgba(0,0,0,0.5) 20%,
73+
rgba(0,0,0,0.38) 25%,
74+
rgba(255,255,255,0.08) 40%,
75+
rgba(255,255,255,0.175) 43%,
76+
rgba(0,0,0,0.5) 55%,
77+
rgba(0,0,0,0.5) 70%,
78+
rgba(0,0,0,0.32) 80%,
79+
rgba(0,0,0,0.5) 90%,
80+
rgba(0,0,0,0.5)
81+
)
82+
;
83+
background-size:
84+
auto,
85+
300px 100%,
86+
109px 100%;
87+
background-blend-mode:
88+
normal, normal, hard-light;
89+
background-repeat: repeat-x;
90+
background-color: maroon;
91+
height: 400px;
92+
}
93+
#d3 {filter: grayscale(1);}
94+
</style>
95+
</head>
96+
<body>
97+
98+
<h1>Cicadients</h1>
99+
<p>
100+
A reworking of the first two examples of “<a href="http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/">The Cicada Principle and Why It Matters to Web Designers</a>” using CSS gradients. (The third example would be theoretically possible to do with gradients, but it would be the worst possible approach.)
101+
</p>
102+
103+
<h2>Example #1</h2>
104+
<p>Unprefixed CSS: <strong>0.59KB</strong> (604 characters, unminified). Total CSS, both prefixed and not: <strong>2.66KB</strong> (2,720 characters, unminified). Total, original images: <strong>~7KB</strong> (plus two extra server hits).</p>
105+
<div id="d1"></div>
106+
107+
<h2>Example #2</h2>
108+
<p>
109+
Testing.
110+
</p>
111+
<div id="d2"></div>
112+
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)