-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
187 lines (185 loc) · 6.73 KB
/
index.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Fish Tank</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<article class="tank" role="image" tabindex="0" aria-labelledby="tank">
<div class="sr-only" id="tank">
Peaceful water with slow currents gently ebbing and flowing.
</div>
<div class="waves"></div>
<div class="current--one"></div>
<div class="current--two"></div>
<div class="sand"></div>
<div class="swimlane--one">
<div class="fish" role="image" tabindex="0" aria-labelledby="fish">
<div id="fish" class="sr-only">
A placid fish with undulating fins swims slowly across the screen.
</div>
<div class="fin"></div>
<div class="body">
<div class="eye">
<div class="eyeball"></div>
</div>
<div class="mouth"></div>
<div class="gill"></div>
</div>
<div class="tail tail--top"></div>
<div class="tail tail--bottom"></div>
</div>
</div>
<div class="marquee" role="image" tabindex="0" aria-labelledby="marquee">
<div class="sr-only" id="marquee">
Wooden sign nailed to the front of the fish tank.
</div>
<div class="board">
<div class="nails">
<span></span>
<span></span>
</div>
<h1>CSS Fish Tank Dot Dev</h1>
</div>
</div>
<div class="seaweed" role="image" tabindex="0" aria-labelledby="seaweed">
<div class="sr-only" id="seaweed">
Two strands of shimmering seaweed, one tall and one short, stand
suspended slightly above the sand at the bottom of the tank.
</div>
<div class="strand">
<div class="link"></div>
<div class="link"></div>
<div class="link"></div>
<div class="link"></div>
<div class="shadow"></div>
</div>
<div class="strand">
<div class="link"></div>
<div class="link"></div>
<div class="link"></div>
<div class="shadow"></div>
</div>
</div>
<div class="snail" role="image" tabindex="0" aria-labelledby="snail">
<div class="inner">
<div class="sr-only" id="snail">
A small snail with an impressively spiraled shell hangs out on the
bottom of the tank, its horns waving in subtle welcome.
</div>
<div class="shell"></div>
<div class="horn--left"></div>
<div class="horn--right"></div>
<div class="head"></div>
<div class="body"></div>
</div>
</div>
<div class="rock--left" role="image" tabindex="0" aria-labelledby="rockLeft">
<div class="sr-only" id="rockLeft">
A group of two small rocks and one large rock sit next to the seaweed.
</div>
</div>
<div class="rock--right" role="image" tabindex="0" aria-labelledby="rockRight">
<div class="sr-only" id="rockRight">
One large and one small stone anchor the bottom right side of the
tank.
</div>
</div>
</article>
<article class="description" aria-labelledby="projectDescription">
<h2 id="projectDescription">
Project description: Why even make a fish tank?
</h2>
<p>It seemed fun!</p>
<p>
Like a lot of frontend devs, my days consist mostly of making forms and
lists accessible and aesthetically pleasing. I don't often get the
chance to work with CSS animations or CSS art. This was a fun, calming
way to learn some stuff and make something pretty. It was also fun to
experiment with using CSS Grid as a complement/suplement for absolute
positioning.
</p>
<h2>Cool, can I make a fish?</h2>
<p>
Yes! If you want to get into CSS art, or want to show off your skills,
you're welcome to fork
<a href="https://github.com/novellac/fishtank">the GitHub repo</a> and
make a PR to contribute a fish.
</p>
<h2>Resources I used...</h2>
<ul>
<li>
<a
href="https://gist.github.com/tunguskha/e4dceb7080bfeea486cd476e9631a413"
>GitHub gist for lightening and darkening colours in CSS</a
>
</li>
<li>
<a href="https://www.youtube.com/watch?v=K6YirOSDAvk&t=75s"
>YouTube video of CSS aquarium by NoviceCoder</a
>
was helpful for learning about clippy site and waves.
</li>
<li>
<a href="https://bennettfeely.com/clippy/"
>Bennett Feely's clip paths generator</a
>
was helpful for making clip paths with point and click.
</li>
<li>
<a href="https://css-tricks.com/almanac/properties/c/clip-path/"
>CSS Tricks Clip Path almanac entry</a
>
for more about what a clip path is, and how to read the values.
</li>
<li>
<a href="https://onaircode.com/material-design-pure-css-waves-effect/"
>Different waves styles</a
>
for finding some ideas about waves I liked.
</li>
<li>
<a href="https://www.sarasoueidan.com/blog/animating-css-shapes/"
>Sara Soueidan's animating shapes article</a
>
for knowing about transitions between complex polygons.
</li>
<li>
<a href="https://www.youtube.com/watch?v=yIsD6iV0-zM"
>YouTube video making a CSS Fish</a
>
for an animated fish using multiple divs
</li>
<li>
<a href="https://codepen.io/AllThingsSmitty/pen/kkrkLL">CSS Reset</a>
for taking away CodePen's (usually) helpful styling.
</li>
<li>
<a
href="https://blog.truthlabs.com/how-to-make-complex-icons-with-only-css-e135e6dc2c5e"
>CSS Icons tutorial</a
>
for bendy seaweed needs.
</li>
<li>
<a
href="https://alvaromontoro.com/blog/67979/creating-accessible-css-art"
>Alvaro Montoro's blog post on accessible CSS art</a
>
for accessibility techniques.
</li>
<li>
<a
href="https://stackoverflow.com/questions/41587802/css-animation-from-left-to-right"
>S.O. post on animating a potato</a
>
for making the fish swim in circles.
</li>
</ul>
</article>
</body>
</html>