css

Transcript

1. CSS
2. block vs inline
3. <div>The way they're doing that effect is clever,</div> <div class="yellow">but probably inefficient.</div> <div>They're actually painting the screen on every call</div>
4. The way they're doing that effect is clever, but probably inefficient. They're actually painting the screen on every call
5. <span>The way they're doing that effect is clever,</span> <span class="yellow">but probably inefficient.</span> <span>They're actually painting the screen on every call</span>
6. The way they're doing that effect is clever, but probably inefficient. They're actually painting the screen on every call
7. block: article, div, form, h1, p, ul inline: a, b, code, span, img
8. box model
9. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it.
10. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)
11. at a certain point, the video stops while the audio continues! if anyone has this problem pls answer and state the quality and condition of your computer so we can figure out the cause of this problem. You said it uses a library called processing- i'm trying to use this course as part of a web curriculum, with html, css and js- and wondering if it's just going in the wrong direction. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)
12. width: 100%; is not the answer!
13. width: auto; is the answer!
14. is the answer!
15. at a certain point, the video stops while the audio continues! if anyone has this problem pls answer and state the quality and condition of your computer so we can figure out the cause of this problem. You said it uses a library called processing- i'm trying to use this course as part of a web curriculum, with html, css and js- and wondering if it's just going in the wrong direction. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)
16. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)
17. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, the 2nd green line is faded a little and then a new green line is drawn. This just happens over and over and eventually the green lines are faded out completely. Hopefully that makes sense, it's kind of confusing how they're doing it. (margin) (border) (padding)
18. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, (margin) (border) (padding)
19. The way they're doing that effect is clever, but probably inefficient. They're actually repainting the entire screen on every call of the 'draw' function. But instead of repainting it a full black, they're setting the alpha(transparency) as well. So basically you start off with a bright green line and then the new 'draw' loop colors over that line with a black color that is mostly transparent. This fades the line just slightly and new bright green line is then draw right next to it. On the next 'draw' loop, the black is drawn again so the first green line is now faded even more, (margin) (border) (padding)
20. -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
21. specificity
22. .red { color: red; } .green { color: green; } <div id="mystery" class="red green"> what color am I? </div>
23. .green { color: green; } .red { color: red; } <div id="mystery" class="red green"> what color am I? </div>
24. div.green { color: green; } .red { color: red; } <div id="mystery" class="red green"> what color am I? </div>
25. (ids, classes, elements)
26. (0, 1, 1) div.green (0, 1, 0) .red
27. (1, 0, 0) #monkey (0, 2, 1) div.giraffe + .iguana (0, 1, 0) .gorilla (0, 0, 2) ul li (0, 0, 0) *
28. demo!
29. 67% 33%
30. 67% 33%
31. 67% 67% 33% 33%