├── .DS_Store ├── README.md ├── exercise ├── README: bugs-busters.md ├── omg-trouble.html └── trouble-styles.css └── quiz ├── index.html └── styles.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sylwiavargas/CSS-Lecture-And-Exercises/c04527b88f39bc64e136a525a5d5b84591c3ade3/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-lecture 2 | 3 | Here's a recording of the lecture that I ran for Flatiron School students on 10/04/2019: [video](https://www.youtube.com/watch?v=p_dDWuKu70c&feature=youtu.be). 4 | 5 | ## For starters: world without CSS 6 | Try this (it removes all css in a website): 7 | 8 | ```js 9 | document.querySelectorAll('style,link[rel="stylesheet"]').forEach(style => style.remove()); 10 | ``` 11 | Press `option + command + j` then paste this code in and press `enter` 12 | 13 | ## WARM UP: QUIZ 14 | #### Open ./quiz/index.html in your browser. 15 | Or play here: 16 | 17 | Also: Bootstrap, Semantic UI, Materialize, Deque -> what is it? why would I (not) use it? 18 | 19 | ## The Box Model 20 | 4 elements of the box model: 21 | - margin - the area outside the border (it is transparent); 22 | - border - it goes around the padding and content; 23 | - padding - the area around the content (it is transparent); 24 | - content - the content of the box, where text and images appear; 25 | 26 | ## The Cascade vs Specificity vs Inheritance vs !important 27 | * **Cascade**: CSS is a cascade (a type of algorithm). At a very low level, it means that that the order of CSS rules matter; meaning, if you define a background color of a div in two places, the color that comes last will be applied; 28 | * **Specificity**: however, more important than the cascading character of css is the rule of specificity; CSS will take more seriously the requsts that are more specific; here's the hierarchy of specificity (from the most to the least): 29 | element selector -> class selector -> id selector 30 | **note**: inline CSS is more specific than external file, which is why it's easy to overwrite external libraries; 31 | 32 | PS: Specificity is set up with point system -- each declaration is evaluated in points, then compared and the winners take it all! For instance, if you declare styling inline, this declaration gets 1000 points from the get-go (for real), as opposed to 0 when declared in an outside stylesheet; 33 | * **Inheretance**: now, some elements inherit styling from their parents while others don't; for instance, color and font will be inherited by children but width and height will not! You can play with inheritance by using an ``inherit`` attribute! 34 | * **!important**: now, you can override all rules using the value of ``!important``; however, beware: you will enter the long-term css debugging hell if you invite this value without an absolute desperate necessity; 35 | 36 | ## Cheat sheets: 37 | 1. Button generator: 38 | 2. 10 animations generators (including fancy spinners you will love while doing React): 39 | 3. More animations: 40 | 4. CSS generator: 41 | 5. Another CSS generator: 42 | 6. Gradient generator: 43 | 7. Grid templates: 44 | 8. Classless CSS themes: 45 | 46 | ## Practice: 47 | 1. CSS: 48 | 2. Flexbox: 49 | 3. Grid: 50 | 51 | ## Read more: 52 | 1. All attributes: 53 | 2. All selectors and how to chain them: 54 | 3. All about grid: 55 | 4. All about flexbox: 56 | 5. 20 tricks to make your life easier: 57 | 6. Grid vs Flexbox: 58 | 59 | ## Accessibility tools: 60 | 1. Font sizes: [em](https://www.w3.org/TR/WCAG20-TECHS/C14.html), [% sizes](https://www.w3.org/TR/WCAG20-TECHS/C12.html), [named sizes](https://www.w3.org/TR/WCAG20-TECHS/C13.html) 61 | * play with them here: 62 | 2. Color contrast explanation: 63 | * Color contrast checker: 64 | * Color contrast generator: 65 | 3. :focus property 66 | 4. Deque Pattern Library (instead of bootstrap or materialize): 67 | 5. ***ADVANCED*** :maximum-scale property 68 | 69 | ## DESSERT: ENJOY! 70 | 1. This painting was made entirely with CSS: 71 | 2. All made with CSS: 72 | 3. Zen Garden: 73 | 4. Mind-blowing CSS projects: 74 | -------------------------------------------------------------------------------- /exercise/README: bugs-busters.md: -------------------------------------------------------------------------------- 1 | # HELP. TROUBLE. 2 | 3 | Here's the page you know well already. However, it looks horrible. Here are all the things that are wrong with this page. Locate as many bugs as you can and crush them! 4 | Pssst. don't pattern-match from the previous page. We changed the classes and logic. Read the bug, look at the page, try to figure out what's wrong. 5 | 1. It seems the CSS file does not load anymore?! Fix that first. 6 | 2. Background: 7 | - the background color doesn not register; 8 | - the green box should not be there at all; 9 | 3. The red square on the right-ish side should be: 10 | - a circle; 11 | - located on the left; 12 | - located under the content; 13 | - have some nice gradient background; 14 | - scroll with the page 15 | 4. The questions should be centered! 16 | 5. Answers: 17 | - why are the boxes so oddly shaped?! 18 | - should have animation but it doesn't seem to work, 19 | - when you hover over an answer, its color should indicate whether it's right or wrong - it doesn't seem to be a case; 20 | - text should be centered; 21 | 6. Explanations: 22 | - should not have a space underneath; 23 | - it should fit in the box; 24 | - it should not have this much space on the right; 25 | 7. "Hello friends" does not seem to have the right look... 26 | 8. When you hover over a link, it should have a distinct background color; -------------------------------------------------------------------------------- /exercise/omg-trouble.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | So you think you know CSS? 6 | 9 | 10 | 11 |

HELLO FRIENDS!

12 |
13 |
14 |
15 |
16 | 17 |
18 |
19 | What does CSS stand for? 20 |
21 |
22 |
Cascading Style Sheets
23 |
Candian Stylesheet System
24 |
Computed Stylesheet System
25 |
26 |
27 | EXPLANATION: Aha, Cascading Style Sheets. A cascade is an algorithm that defines how to combine property values originating from different sources. Style sheets are basically a cascade -- child elements inherit from the parent elements (except for e.g. @keyframes). Good luck debugging! 28 |
29 |
30 | 31 | 32 |
33 |
34 | What are the properties of the box model? 35 |
36 |
37 |
width, heigth, padding, margin
38 |
margin, border, padding, content
39 |
width, heigth, weigth, space
40 |
41 |
42 | EXPLANATION: All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout - it is essentially a box that wraps around every HTML element. Such a box consists of: margins, borders, padding, and the actual content. Remember that padding and margins are transparent! So, if you need more space around the element - it's margins; if between the border and the content - it's padding. 43 |
44 |
45 | 46 |
47 |
48 | What is Flexbox and Grid? 49 |
50 |
51 |
CSS framerworks
52 |
Layout models
53 |
CSS Selectors
54 |
55 |
56 | EXPLANATION: Flexbox and Grid are two different ways to organize your page design so it's not all over the place.Grid layout divides space into columns & rows. Like table layouts, but better! Any given element may take just one field, an entire row or an entire row and a bit of a column. Flexbox layout distributes space along a single column or row. Like float layouts, but better! 57 |
58 |
59 | 60 |
61 |
62 | What is better: grid > flexbox || flexbox > grid ? 63 |
64 |
65 |
Grid - 2 dimensions!
66 |
Flex - lets you flex.
67 |
Why choose? Both!
68 |
69 |
70 | EXPLANATION: It all depends on what you want it for! Also, what you feel more intuitive about. Good news is that you can actually use both at the same time! Here is a great read about Flexbox vs Grid. Please read it. 71 |
72 |
73 | 74 |
75 |
76 | What are CSS selectors? 77 |
78 |
79 |
. # *
80 |
a, li, p
81 |
:hover, :focus
82 |
83 |
84 | EXPLANATION: In CSS, selectors are patterns used to select the element(s) you want to style. Great news: you can chain them to reach a very specific element! You can e.g. choose to target only the div of a specific class, id and that belongs to a given parent element. Please have a look at these selectors. 85 |
86 |
87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /exercise/trouble-styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Helvetica, sans-serif; 3 | } 4 | 5 | *:focus{ 6 | outline: 3px dashed red; 7 | background-color: #0af2ee; 8 | } 9 | 10 | * div { 11 | background-color: #00ff37; 12 | } 13 | 14 | body{ 15 | background-image: linear-gradien(-10deg,rgb(78, 241, 241), purple); 16 | } 17 | 18 | h2{ 19 | text-align: center; 20 | color: #00ff37; 21 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 22 | font-size: 800%; 23 | margin-bottom: 5%; 24 | } 25 | 26 | .questioncont{ 27 | width: 50vw; 28 | height: auto; 29 | display: grid; 30 | grid-template-columns: 1% 98% 1%; 31 | grid-template-areas: 32 | "question question question" 33 | ". answers ." 34 | "explanation explanation explanation"; 35 | background: aliceblue; 36 | border: 5px black solid; 37 | padding: 1%; 38 | margin-bottom: 2%; 39 | } 40 | 41 | .question{ 42 | grid-area: question; 43 | font-size: 1.5em; 44 | font-weight: bolder; 45 | text-align: center; 46 | padding: 3%; 47 | } 48 | 49 | .answerscont{ 50 | grid-area: answers; 51 | margin-bottom: 5%; 52 | margin-left: 15%; 53 | } 54 | 55 | .answer{ 56 | display: inline-block; 57 | width: 10vw; 58 | height: auto; 59 | border: 2px black solid; 60 | padding: 1%; 61 | } 62 | 63 | .answer:hover{ 64 | -webkit-animation: answer-animation 0.1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; 65 | animation: answer-animation 0.1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; 66 | } 67 | 68 | .explanation{ 69 | grid-area: explanation; 70 | font-size: 125%; 71 | margin-top: -50000px; 72 | } 73 | 74 | .explanation:focus{ 75 | margin-top: 0px; 76 | padding-right: 300px; 77 | width:1000px; 78 | margin-bottom: 50%; 79 | } 80 | 81 | .lol, .exp{ 82 | font-weight: bolder; 83 | } 84 | 85 | .opaque:hover{ 86 | opacity: 0.3; 87 | } 88 | 89 | /* answers */ 90 | 91 | #wrong:hover{ 92 | background-color: #ff0000; 93 | } 94 | 95 | #good{ 96 | background-color: #00ff37; 97 | } 98 | 99 | /* square */ 100 | .is-it-a-dot{ 101 | z-index: 1000; 102 | position: absolute; 103 | margin-left: 60%; 104 | } 105 | 106 | #dot{ 107 | background: red; 108 | width: 100px; 109 | height: 100px; 110 | } 111 | 112 | /* this is for animations */ 113 | @-webkit-keyframes answers-animation { 114 | 0% { 115 | -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 116 | box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 117 | -webkit-transform: translateX(0) translateY(0); 118 | transform: translateX(0) translateY(0); 119 | } 120 | 100% { 121 | -webkit-box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e; 122 | box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e; 123 | -webkit-transform: translateX(8px) translateY(8px); 124 | transform: translateX(8px) translateY(8px); 125 | } 126 | } 127 | @keyframes answers-animation { 128 | 0% { 129 | -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 130 | box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 131 | -webkit-transform: translateX(0) translateY(0); 132 | transform: translateX(0) translateY(0); 133 | } 134 | 100% { 135 | -webkit-box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e; 136 | box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e; 137 | -webkit-transform: translateX(8px) translateY(8px); 138 | transform: translateX(8px) translateY(8px); 139 | } 140 | } -------------------------------------------------------------------------------- /quiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | So you think you know CSS? 7 | 8 | 9 | 10 |

HELLO FRIENDS!

11 |
12 |
13 | Do this:
14 | ⚡️ hover over the answers
15 | ⚡️ use tab to go down
16 | ⚡️ or tab+shift to go up 17 |
18 |
19 | 20 |
21 |
22 | What does CSS stand for? 23 |
24 |
25 |
Cascading Style Sheets
26 |
Candian Stylesheet System
27 |
Computed Stylesheet System
28 |
29 |
30 | EXPLANATION: Aha, Cascading Style Sheets. A cascade is an algorithm that defines how to combine values originating from different sources. Style sheets are basically a cascade -- child elements inherit values from the parent elements (except for e.g. @keyframes). Good luck debugging! 31 |
32 |
33 | 34 | 35 |
36 |
37 | What are the properties of the box model? 38 |
39 |
40 |
width, heigth, padding, margin
41 |
margin, border, padding, content
42 |
width, heigth, weigth, space
43 |
44 |
45 | EXPLANATION: All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout - it is essentially a box that wraps around every HTML element. Such a box consists of: margins, borders, padding, and the actual content. Remember that padding and margins are transparent! So, if you need more space around the element - it's margins; if between the border and the content - it's padding. 46 |
47 |
48 | 49 |
50 |
51 | What is Flexbox and Grid? 52 |
53 |
54 |
CSS framerworks
55 |
Layout models
56 |
CSS Selectors
57 |
58 |
59 | EXPLANATION: Flexbox and Grid are two different ways to organize your page design so it's not all over the place.Grid layout divides space into columns & rows. Like table layouts, but better! Any given element may take just one field, an entire row or an entire row and a bit of a column. Flexbox layout distributes space along a single column or row. Like float layouts, but better! 60 |
61 |
62 | 63 |
64 |
65 | What is better: grid > flexbox || flexbox > grid ? 66 |
67 |
68 |
Grid - 2 dimensions!
69 |
Flex - lets you flex.
70 |
Why choose? Both!
71 |
72 |
73 | EXPLANATION: It all depends on what you want it for! Also, what you feel more intuitive about. Good news is that you can actually use both at the same time! There's a very helpful read about Flexbox vs Grid in the readme. Please read it. 74 |
75 |
76 | 77 |
78 |
79 | What are CSS selectors? 80 |
81 |
82 |
. # *
83 |
a, li, p
84 |
:hover, :focus
85 |
86 |
87 | EXPLANATION: In CSS, selectors are patterns used to select the element(s) you want to style. Great news: you can chain them to reach a very specific element! You can e.g. choose to target only the div of a specific class, id and that belongs to a given parent element. Please have a look at an article in the readme about these selectors. 88 |
89 |
90 | 91 |
92 |
93 | You want an element to be in the center. A property you'll change is... 94 |
95 |
96 |
align!
97 |
padding.
98 |
margins!
99 |
100 |
101 | EXPLANATION: Yeah... That's a common problem. There are a few ways to achieve that. For starters, change margins (left and right) to "auto" and see what happens. If that doesn't help, google and despair. Here is a comic (vertically centered) that portrays how we all feel about this problem: 102 | Comic strip on how we all feel css vertical centering 103 |
104 |
105 | 106 |
107 |
108 | How to connect CSS to your project? 109 |
110 |
111 |
in a tag (like span or div)
112 |
in html file after head
113 |
in html file through link att
114 |
115 |
116 | EXPLANATION: There are three ways to connect CSS to your project. Inline CSS - or, the style specified in tags - is a good solution for one and only element of a given style. CSS included internally (below head tag in the html file) will only refer to this specific html file and so may be good for small apps. Inline styling (in the tags) will make debugging your app difficult. External CSS file (link rel = "stylesheet" type = "text/css" href = "mystyle.css") feels best organized. 117 |
118 |
119 | 120 |
121 |
122 | What property will you use if you want an element to appear on top of another one? 123 |
124 |
125 |
layer:top;
126 |
z-index:1;
127 |
position:1;
128 |
129 |
130 | EXPLANATION: That's it. If you want one element on top of another, look into z-index. If you want the element to be always on top, choose a high integer instead of 1. 131 |
132 |
133 | 134 |
135 |
136 | How do you change element's opacity? 137 |
138 |
139 |
opacity: 0.1;
140 |
color: opaque;
141 |
op-index: 100%;
142 |
143 |
144 | EXPLANATION: Remember that "opacity:1.0;" means "not transparent" and anything below 1.0 increases element's transparency. If you do not want to apply opacity to child elements, in this example, use RGBA - it sets the color and opacity for the background color and not the text or other elements within a container. This would be the syntax for the kinda greenish almost transparent background: "background: rgba(76, 175, 80, 0.3)". 145 |
146 |
147 | 148 |
149 |
150 | What display property should I use if I want my p tag to not take the whole width of the container? 151 |
152 |
153 |
inline
154 |
inline-block
155 |
block
156 |
157 |
158 | EXPLANATION: Each of the html elements comes with default properties, display being one of them. For instance, the p tag, usually takes a whole width and a generous margin because it comes with the block display property. Then, the span tag always stays in line with other items because of the inline display property. However, there's a middle ground: if you want your p tag to stay in line but also have the possibility to change its width and height, go ahead, overwrite the display to be the inline-block! 159 |
160 |
161 | 162 |
163 |
164 | How do you enhance keyboard navigation experience through CSS? 165 |
166 |
167 |
:focus;
168 |
:tab;
169 |
keyboard:on;
170 |
171 |
172 | EXPLANATION: Please please please make it easy for people to navigate your page through keyboard. Use the :focus selector and add border that will make it easy to follow. By the way, in order for an element to be focusable, you need to include tabindex="0" in an html tag ("0" means "stadard flow", "-1" meaning "don't focus", and "1" means "focus first"). 173 |
174 |
175 | 176 |
177 |
178 | How this helpful cloud moves across the screen? 179 |
180 |
181 |
Position!
182 |
Scroll!
183 |
Move!
184 |
185 |
186 | EXPLANATION: If you want an element to move (or not move ever), you wanna play with its position. 187 |
188 |
189 | 190 |
191 |
192 | Which selector would make it possible for me to hover over one div element to affect another one's styling, e.g. make its div sibling disappear? 193 |
194 |
195 |
div.important:hover + div
196 |
div:hover div
197 |
div.div:hover
198 |
199 |
200 | EXPLANATION: What you want to google in such a case are chained css selectors. For instance, "div:hover + div" translates into "when I hover over a div element with a class of important, change the styling of its next div sibling". Now, if you would like all the next siblings to be affected, you'd change the + sign into ~. See here: 201 | Hover here! I'll be gone I'll be gone 202 |
203 |
204 | 205 |
206 |
207 | How many values can a border-width property take? 208 |
209 |
210 |
1
211 |
2
212 |
4
213 |
214 |
215 | EXPLANATION: The border-width property can have from one to four values (going clockwise: for the top border, right border, bottom border, and the left border). Same for the border-color. For instance, the border in this question is "border-color: blue green red yellow;" and "border-width: 30px 10px 4px 20px;". It also has "border-radius:15%;", which is why it's kinda round. If you increase radius to 100%, you'll have a circle. 216 |
217 |
218 | 219 | SURPRISE!This is only to show you the :focus selector in action! Also, let's take a moment to reflect on how powerful the transparent quiet padding is! It may totally destroy your layout if you just forget to change its value. 220 | 221 | 222 | -------------------------------------------------------------------------------- /quiz/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Helvetica, sans-serif; 3 | } 4 | 5 | * :focus{ 6 | outline: 3px dashed red; 7 | background-color: #83f7f5; 8 | } 9 | 10 | body{ 11 | /* background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); */ 12 | /* background-image: repeating-linear-gradient(purple, teal 10%, blue 20%); */ 13 | /* background-image: radial-gradient(teal, yellow, purple);*/ 14 | /* background-image: linear-gradient(-10deg, purple, teal); */ 15 | background-color: purple; 16 | } 17 | 18 | 19 | h1{ 20 | text-align: center; 21 | color: #00ff37; 22 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 23 | font-size: 800%; 24 | margin-bottom: 5%; 25 | -webkit-animation: title-animation 1.1s both; 26 | animation: title-animation 1.1s both; 27 | } 28 | 29 | img{ 30 | border-radius: 30%; 31 | display: block; 32 | margin-top:1%; 33 | margin-left: auto; 34 | margin-right: auto; 35 | } 36 | 37 | span:hover:not(.a){ 38 | background-color: yellow; 39 | } 40 | 41 | 42 | a.demo{ 43 | color: purple; 44 | text-decoration: none; 45 | padding-bottom: 100px; 46 | padding-right: 100px; 47 | padding-left: 100px; 48 | font-size: 150%; 49 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 50 | } 51 | 52 | a.demo:hover{ 53 | color: black; 54 | background-color: aquamarine; 55 | } 56 | 57 | #funky{ 58 | border-width: 30px 10px 4px 20px; 59 | border-color: blue green red yellow; 60 | border-radius: 15%; 61 | } 62 | 63 | .questioncont{ 64 | width: 50vw; 65 | /* vw = viewport width */ 66 | /* vh = viewport height */ 67 | height: auto; 68 | display: grid; 69 | grid-template-columns: 1% 98% 1%; 70 | grid-template-areas: 71 | "question question question" 72 | ". answers ." 73 | "explanation explanation explanation"; 74 | background: aliceblue; 75 | border: 5px black solid; 76 | margin-right: auto; 77 | margin-left: auto; 78 | padding: 1%; 79 | margin-bottom: 2%; 80 | } 81 | 82 | .question{ 83 | grid-area: question; 84 | font-size: 1.5em; 85 | font-weight: bolder; 86 | text-align: center; 87 | padding: 3%; 88 | } 89 | 90 | .question:hover{ 91 | color:red; 92 | } 93 | 94 | .answerscont{ 95 | grid-area: answers; 96 | display: flex; 97 | justify-content: center; 98 | } 99 | 100 | .answer{ 101 | overflow: hidden; 102 | text-align: center; 103 | width: 12vw; 104 | min-height: 8vh; 105 | border: 2px black solid; 106 | padding: 1%; 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | margin: 0 0.3vw 0.5vw 0.3vw ; 111 | font-size: 110%; 112 | } 113 | 114 | .answer:hover{ 115 | -webkit-animation: jump-out 0.1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; 116 | animation: jump-out 0.1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; 117 | } 118 | 119 | .explanation{ 120 | grid-area: explanation; 121 | font-size: 125%; 122 | margin-top: -50000px; 123 | } 124 | 125 | .explanation:focus{ 126 | margin-top: 0px; 127 | /* the appearing and disappearing can be kinda done with opacity as well */ 128 | display: block; 129 | padding: 1%; 130 | margin-bottom: 2%; 131 | margin-top: 2%; 132 | text-align: left; 133 | } 134 | 135 | .lol, .exp{ 136 | font-weight: bolder; 137 | } 138 | 139 | .opaque:hover{ 140 | opacity: 0.3; 141 | } 142 | 143 | /* answers */ 144 | 145 | .z:hover{ 146 | background-color: #ff0000; 147 | } 148 | 149 | .d:hover{ 150 | background-color: #00ff37; 151 | } 152 | 153 | /* chaining and hovering */ 154 | 155 | .hide:hover + div{ 156 | opacity: 0.0; 157 | } 158 | 159 | .hovering, .disappearing{ 160 | border: 1px black solid; 161 | padding: 2px; 162 | background-color: #fff; 163 | } 164 | 165 | .hovering:hover ~ .disappearing{ 166 | opacity: 0; 167 | } 168 | 169 | /* cloud */ 170 | .helpful-cloud{ 171 | z-index: -5; 172 | position: fixed; 173 | margin-left: 74.5%; 174 | } 175 | 176 | .inside-cloud{ 177 | margin-left: 20%; 178 | font-weight: 800; 179 | } 180 | 181 | 182 | .cloud { 183 | background: #fff; 184 | background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); 185 | background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1)); 186 | background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%); 187 | background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%); 188 | background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%); 189 | background: linear-gradient(top, #fff 5%,#f1f1f1 100%); 190 | 191 | -webkit-border-radius: 100px; 192 | -moz-border-radius: 100px; 193 | border-radius: 100px; 194 | 195 | -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.6); 196 | -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.6); 197 | box-shadow: 0 8px 5px rgba(0, 0, 0, 0.6); 198 | 199 | height: 120px; 200 | position: relative; 201 | width: 350px; 202 | } 203 | 204 | .cloud:after, .cloud:before { 205 | background: #fff; 206 | content: ''; 207 | position: absolute; 208 | z-indeX: -1; 209 | } 210 | 211 | .cloud:after { 212 | -webkit-border-radius: 100px; 213 | -moz-border-radius: 100px; 214 | border-radius: 100px; 215 | 216 | height: 100px; 217 | left: 50px; 218 | top: -50px; 219 | width: 100px; 220 | } 221 | 222 | .cloud:before { 223 | -webkit-border-radius: 200px; 224 | -moz-border-radius: 200px; 225 | border-radius: 200px; 226 | 227 | width: 180px; 228 | height: 180px; 229 | right: 50px; 230 | top: -90px; 231 | } 232 | 233 | /* this is for animations */ 234 | @-webkit-keyframes jump-out { 235 | 0% { 236 | -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 237 | box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 238 | -webkit-transform: translateX(0) translateY(0); 239 | transform: translateX(0) translateY(0); 240 | } 241 | 100% { 242 | -webkit-box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e; 243 | box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e; 244 | -webkit-transform: translateX(8px) translateY(8px); 245 | transform: translateX(8px) translateY(8px); 246 | } 247 | } 248 | @keyframes jump-out { 249 | 0% { 250 | -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 251 | box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 252 | -webkit-transform: translateX(0) translateY(0); 253 | transform: translateX(0) translateY(0); 254 | } 255 | 100% { 256 | -webkit-box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e; 257 | box-shadow: -1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e; 258 | -webkit-transform: translateX(8px) translateY(8px); 259 | transform: translateX(8px) translateY(8px); 260 | } 261 | } 262 | 263 | @-webkit-keyframes title-animation { 264 | 0% { 265 | -webkit-transform: translateY(-500px); 266 | transform: translateY(-500px); 267 | -webkit-animation-timing-function: ease-in; 268 | animation-timing-function: ease-in; 269 | opacity: 0; 270 | } 271 | 38% { 272 | -webkit-transform: translateY(0); 273 | transform: translateY(0); 274 | -webkit-animation-timing-function: ease-out; 275 | animation-timing-function: ease-out; 276 | opacity: 1; 277 | } 278 | 55% { 279 | -webkit-transform: translateY(-65px); 280 | transform: translateY(-65px); 281 | -webkit-animation-timing-function: ease-in; 282 | animation-timing-function: ease-in; 283 | } 284 | 72% { 285 | -webkit-transform: translateY(0); 286 | transform: translateY(0); 287 | -webkit-animation-timing-function: ease-out; 288 | animation-timing-function: ease-out; 289 | } 290 | 81% { 291 | -webkit-transform: translateY(-28px); 292 | transform: translateY(-28px); 293 | -webkit-animation-timing-function: ease-in; 294 | animation-timing-function: ease-in; 295 | } 296 | 90% { 297 | -webkit-transform: translateY(0); 298 | transform: translateY(0); 299 | -webkit-animation-timing-function: ease-out; 300 | animation-timing-function: ease-out; 301 | } 302 | 95% { 303 | -webkit-transform: translateY(-8px); 304 | transform: translateY(-8px); 305 | -webkit-animation-timing-function: ease-in; 306 | animation-timing-function: ease-in; 307 | } 308 | 100% { 309 | -webkit-transform: translateY(0); 310 | transform: translateY(0); 311 | -webkit-animation-timing-function: ease-out; 312 | animation-timing-function: ease-out; 313 | } 314 | } 315 | @keyframes title-animation { 316 | 0% { 317 | -webkit-transform: translateY(-500px); 318 | transform: translateY(-500px); 319 | -webkit-animation-timing-function: ease-in; 320 | animation-timing-function: ease-in; 321 | opacity: 0; 322 | } 323 | 38% { 324 | -webkit-transform: translateY(0); 325 | transform: translateY(0); 326 | -webkit-animation-timing-function: ease-out; 327 | animation-timing-function: ease-out; 328 | opacity: 1; 329 | } 330 | 55% { 331 | -webkit-transform: translateY(-65px); 332 | transform: translateY(-65px); 333 | -webkit-animation-timing-function: ease-in; 334 | animation-timing-function: ease-in; 335 | } 336 | 72% { 337 | -webkit-transform: translateY(0); 338 | transform: translateY(0); 339 | -webkit-animation-timing-function: ease-out; 340 | animation-timing-function: ease-out; 341 | } 342 | 81% { 343 | -webkit-transform: translateY(-28px); 344 | transform: translateY(-28px); 345 | -webkit-animation-timing-function: ease-in; 346 | animation-timing-function: ease-in; 347 | } 348 | 90% { 349 | -webkit-transform: translateY(0); 350 | transform: translateY(0); 351 | -webkit-animation-timing-function: ease-out; 352 | animation-timing-function: ease-out; 353 | } 354 | 95% { 355 | -webkit-transform: translateY(-8px); 356 | transform: translateY(-8px); 357 | -webkit-animation-timing-function: ease-in; 358 | animation-timing-function: ease-in; 359 | } 360 | 100% { 361 | -webkit-transform: translateY(0); 362 | transform: translateY(0); 363 | -webkit-animation-timing-function: ease-out; 364 | animation-timing-function: ease-out; 365 | } 366 | } --------------------------------------------------------------------------------