Chibi: Here, I found some resources to explain all those things!
Figure tag
CSS3 animation (@keyframes) - kinda tricky; I've been playing with that for a while though, so if you have other questions, you can ask me directly (or Mikari, hee hee!).
Transitions
background-size
I can't easily find a good tutorial on <dl> (all of the ones that I'm seeing so far are way too confusing), so I'll explain it in my own words.
Consider this example: you want to make an infobox for a character saying what's their name, how old they are, etc. etc.
Chances are you're writing something like
Name: Eliwood
Age: 17
You may want to be able to mark all individual components of each thing, so that you can format that properly. For example, like I did it
here, in which all the answers are on one side, and all the questions neatly on the other. Or maybe you want to have each answer on an individual line. Regardless of what you want to do with it, this is what the <dl> tag is for. It stands for definition list, and it's designed for this purpose!
So the above example becomes
Code: Select all
<dl>
<dt>Name:</dt>
<dd>Eliwood</dd>
<dt>Age:</dt>
<dd>17</dd>
</dl>
The <dl> kind of works like <ul> and <ol> in which it must wrap everything. Then each element inside is marked by <dt> and <dd> respectively: definition term and definition description. Now you can style all of them easily in your CSS without bloating your code with classes everywhere. :D
---
Mikari: Yeah, I mean, you could achieve the same things as <figure> for example just using divs and paragraphs. I'm just very glad that now there's tags DESIGNED for that purpose, you know? :D
I love the way absolute and relative positioning works. I love it especially from a conceptual, and, actually, philosophical standpoint. Absolute works...in a relative context.
...And I can't believe I just said that I like code from A PHILOSOPHICAL STANDPOINT. XD
Robin: Oh my god yeah, the includes. That changed everything.
What is it exactly that gives you trouble with that code? I don't really understand what's up with your example. :o Maybe I can help?
--
I FORGOT TO ADD. Even and odd in CSS. Now you can make stuff like tables with cells of alternating colors so easily!
AND, MOST RECENTLY, viewport units. You want something to be as tall as the browser window, wonderful and responsive? It's 100vh tall. Boom. That used to be such a hard problem to solve, and now there's a dirt easy way to do it directly in CSS!
This really makes me want to start coding all kinds of layouts!