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]