@@ -73,6 +75,7 @@ I'll be posting these in advance of lectures, so you can review the material bef
diff --git a/site/introwebdev/week-13-homework.html b/site/introwebdev/week-13-homework.html new file mode 100644 index 0000000..1669dfe --- /dev/null +++ b/site/introwebdev/week-13-homework.html @@ -0,0 +1,101 @@ +[!] +[=title "Week 13 Homework"] +[=content-] +
+This week we're focusing entirely on hover and transition.
+Keep the lecture notes for both handy (here and here).
+
+Note that parts 3 and 4 are fairly difficult. Get started early! +
+
+ Let's start by using a span to replicate
+ the behavior of the a tag. uses a span.
+ The end result shouldn't actually be clickable, but should have the same color and hover effect
+ has a hover effect that changes its color.
+
+ It's okay if you can't figure out exactly which colors an a tag switches between;
+ white and yellow (the style I used for this website) is fine.
+ Don't forget the underline! visually identical to a link
+ (Hint: you may use any technique you wish as long as it's applied to a span,
+ but this exercise is considerably easier if you have text-decoration).
+
+ Make sure to use the :hover pseudo-class.
+
+ Duplicate your replicated link (do NOT change the original!) and
+ add any transition to it a working transition - it should be smooth and noticeable,
+ and you should transition at least two properties multiple properties animated
+ (e.g. both color and background-color). I recommend using
+ this as an opportunity to play around with various transitions.
+
+ This has a bit of math - if you have trouble with that part, please send me an email. +
+
+ Transitions support a few different types of timing function - these are curves that
+ describe how "fast" it moves between states. For instance, the default curve
+ is an S-shape - it starts out slow, then speeds up around halfway through, then slows down again
+ for the end. This timing function is called ease. It produces a very nice smooth animation that feels natural.
+
+ But there are others! So, for this part, practice researching on your own + to figure out, +
++ A good starting point is MDN; + you may also find some luck with W3Schools. +
+
+ Find at least three timing functions (besides the default ease) and
+ demonstrate each of them with background-color and :hover. Make sure to clearly label them.
+ (Read the lecture notes if this is confusing). At least 3 timing functions, demonstrated properly
+
+ Use :hover, transition, and CSS Grid (make sure to read both Grid lecture notes if you're struggling with grid)
+ to make a "bouncy gallery" of transitioned elements hover, transition, and grid in use.
+ There should be 3 columns and at least 2 rows 3 columns, minimum 6 cells. Explain each effect with text in its cell.
+
+ The requirements for this one are loose - you don't have to include any specific combination of effects. + However, it would be passable for each cell to contain just a span with an animated background-color + using different transition durations and timing functions. + distinct transitions for each demonstration. +
++ The goal of this is for you to experiment with new CSS properties. I highly recommend being creative with this one + - you might hit on a design you really like for links or buttons on your website! +
+
+ For a whopping 15 points of extra credit, teach yourself about box-shadow
+ and do a transitioned box-shadow on at least one of your Bouncy Gallery elements.
+
+ Box-shadow is incredibly fun and worth learning - it adds a 3d "pop" to otherwise flat pages. +
+
+ As if this homework didn't have enough research! To get ahead on the animations material,
+ read about actual animations on W3Schools
+ - CSS exposes a much more powerful way to do animations; it's a lot more complicated than
+ transition, but allows for some incredibly intricate behavior.
+
+ Don't forget to email me before the due date - April 10th. + I need to get the email so I know when you finished and can view + your website's git history from that date. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-13-hover.html b/site/introwebdev/week-13-hover.html new file mode 100644 index 0000000..df010a0 --- /dev/null +++ b/site/introwebdev/week-13-hover.html @@ -0,0 +1,45 @@ +[!] +[=title "Week 13: Hover"] +[=content-] ++ So far we've gotten pretty good at making simple, functional websites - but, for the most part, + they're static! This means they don't have any kind of interaction with the user; + they may as well just be a printed page. +
+
+ This week, we're going to change that! Interactive webpages are a massive topic, but we're
+ going to start with one of the simpler forms - the CSS :hover pseudo-class.
+
+ The idea behind a pseudo-class is that it behaves like a normal CSS class,
+ but is set by the browser under specific circumstances. This allows
+ webpages to react to changes. The :hover pseudo-class is probably
+ the most engaging one: when you select an element's hover pseudo-class,
+ the rules will only be applied when that element is hovered by the mouse.
+
+ For example, this code makes a simple hover button (assume the HTML is set up with some element which has id="my_button" set):
+
#my_button { /* this is *always* applied, no matter what */
+ padding: 10px;
+ background-color: purple;
+ color: white;
+}
+#my_button:hover { /* these are only applied when the button is hovered, and override the previous ones */
+ background-color: white; /* we say these are *more specific*, because of the :hover pseudo-class selector */
+ color: purple;
+}+ + The result looks like this: (try putting your mouse over it!) +
+
+ The use for this is obvious! With :hover, you can produce a lot of
+ really fun effects.
+
+ Note that :hover can be applied to any selector, not just an ID selector!
+ .class_name:hover, body:hover, and div.button:hover, are all valid selectors.
+
+ We can make simple static pages, and we can add color and style to them. With :hover (see Week 13: Hover if you haven't already!)
+ we can make webpages that react instantly to changes.
+
+ What if we want to react gradually? For instance, we might want a sidebar to expand slowly, or
+ we might want a link to change color slowly instead of immediately. For this we use
+ transition! Transition is a weird property in that it doesn't set anything
+ itself - it only describes how to transition between other properties.
+
+ This means transition is completely useless if we don't have any
+ properties changing on our page. Fortunately, :hover can
+ change properties, so we can animate :hover with a transition!
+
+ The syntax looks like transition: property duration;, so for instance,
+ transition: background-color 1s; literally means "take exactly 1 second
+ to go from the old background color to the new one whenever it changes". Applying
+ that to the example from the Hover article:
+
#my_button {
+ padding: 10px;
+ background-color: purple;
+ color: white;
+ transition: background-color 1s;
+}
+#my_button:hover {
+ background-color: white;
+ color: purple;
+}+ + The result looks like this: +
++ Try hovering it - it will take exactly 1 second for it to go from purple to white, and 1 second to go back! +
+
+ Note that the color still changes instantly - we never told CSS to transition the color,
+ so it didn't. Transition supports comma-separated values like this:
+ transition: background-color 1s, color: 1s;, so let's try that!
+
#my_button {
+ padding: 10px;
+ background-color: purple;
+ color: white;
+ transition: background-color 1s, color 1s;
+}
+#my_button:hover {
+ background-color: white;
+ color: purple;
+}+ + The result looks like this: +
++ Much smoother. +
+
+ It bears note that not every property can transition! For instance,
+ font-family can't be transitioned - what would that even do?
+ We call this animatable - any property that is not animatable
+ will not do anything in a transition (or animation - we'll get to animations later).
+ A list of every property that can be transitioned is found on W3Schools.
+
+ You can transition things that change the layout! CSS will recompute the layout for you. For instance, + if I have, +
+#my_text_block {
+ margin-left: 200px;
+ margin-right: 200px;
+ background-color: green;
+ transition: margin 1s; /* note that this transitions margin-left and margin-right automatically -
+ I could specify them separately, but that's a waste of time! */
+}
+#my_text_block:hover {
+ margin-left: 0px;
+ margin-right: 0px;
+}+ Then the result is something like, +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et volutpat nisi. Pellentesque id accumsan arcu. Nunc tempus, lorem ut venenatis blandit, quam orci pretium neque, ac bibendum nulla ex vel lectus. Curabitur viverra justo orci, eget porta erat ultrices a. In dictum ante nec quam semper ultrices. Pellentesque ac interdum tortor. Nam ultrices risus risus, vel vulputate turpis faucibus sed. Aenean eget urna vulputate, vulputate tortor molestie, varius dui. Quisque id ipsum auctor, dapibus lacus eget, laoreet eros. Morbi dignissim velit sed ipsum viverra, egestas efficitur nisl pretium. Cras eu porta turpis. +
++Try hovering it - it'll expand out to the edges! +
+
+Transitions can also be used with transforms and positions! This is very fun; I'm not going to go through any examples,
+but I highly recommend playing with it. If you need to brush up on transform,
+check out MDN's bit on the topic
+(an example transition for a simple 2-second animation would be transition: transform 2s;).
+