Week03 02 CSS in contexts - UX-UI-Design-Lab/DH150-UX-WebCoding GitHub Wiki
Objectives:
- CSS pseudo-class, :focus, :hover
- CSS pseudo-element, ::before, ::after
- CSS animation, transition
- discussion: bad animation effects
I will start with the review the basic css codes about css selectors, background-color, color, margin, by the demonstration for assignment03. Then, move to typography (refer to the note in week03-01).
Furthermore, simple contextual visual effects can be added on. Let's start with hyperlinks.
We covered the text-decoration - how to remove the underline from the default setting. But what if (and actually better) we need that underline to indicate the text is hyperlinked ONLY WHEN the mouse cursor is hovered? <a> can have a few status to handle such request about mouse interactivity.
a {
color: orange;
text-decoration: none;
}
a:hover {
color: yellow;
text-decoration: underline;
}
This :hover is pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Another pseudo-class you may want to try is :focus, when the element has a focus (especially by tab operation), you can make it more visible.
a {
color: orange;
text-decoration: none;
}
a:focus {
background-color: black;
color: yellow;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
Test the preview and try the tab to access the contents; check how the focus is different from hover.
CSS is mainly for styling (visual), but in specific situation, you can add the element. For example, if you want to add/change a special mark before or after, it is useful. I would like to have a little badge saying "new" but I don't want to disturb the main text contents with "new" badges, I can add it by ::after (or ::before) without influencing html structure (DOM).
Supposed that I have <h2> Search Tools and Databases </h2> in <body>. I can add "new" badge after <h2> element(s) like this:
<style>
...
h2::after {
content: "new";
background-color: yellow;
color: darkblue;
font-size: 0.5em;
border-radius: 10px;
}
When you check the inspect > elements, you can see only ::after under h2, but won't be able to know by html, what that ::after is about.
With ::after, the element (but not-a-real-html element, so pseudo) can be added as the last child of that block of content.
With ::before, the pseudo element will be inserted as the first child.
If you are interested in the different style for the bullet point (of the list), you can use ::marker
ul li::marker {
color: red;
font-size: 1.5em;
}
More examples may be demonstrated.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
https://css-tricks.com/almanac/selectors/m/marker/
https://css-tricks.com/almanac/selectors/a/after-and-before/
I will work with you one by one to make some fun animation. Either you will share your code-editing and we can help, or you will tell me your idea and I can do the coding - but it should be very interactive so I want you to be with me and ready to share your screen and your thoughts.
We apply animation: in <style>, for example:
h1 {
...
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 3;
animation-name: moveIT;
...
}
animation-duration and the animation-name is only mandatory part. I used "moveIT" as the name of the animation (and will define it later). You can also write the code with short-hand, everything put together in one line but only separated by space. (IMPORTANT: The order matters!)
h1 {
...
animation: 1s ease 0s 3 moveIT;
...
}
AND, you should explain the specifics about how you want to make the element be animated. The animation is make a visual changes - and every "change" has at least two states, the original/ before/ from for 0% in timeline vs. end/after/ to for 100% in timeline. You need to describe that what is the initial state and what is the end state (with changes in CSS properties).
from { opacity: 1; }
to { opacity: 0; }
Can you guess what this animation would do?
You will put that states information inside the custom-function @keyframes - don't forget "s", you need at least TWO keyframes to make a change.
@keyframes moveIT {
from { opacity: 1; }
to { opacity: 0; }
}
Usually I put this @keyframes in the very last part of <style> (or some people prefer to have it right after the css selector code with animation: ....
The basic css animation properties:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
- https://developer.mozilla.org/en-US/docs/Web/CSS/animation
- https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
You can use any of these animatable properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties (it is being updated so frequently, mostly adding more - I don't recommend you to use, yet, the properties with moz- which are experimental with firefox browsers so may not work in the other browsers.)
So, basically you can change colors (and filters), size, shapes (we will do more next week with buttons) and some "transform".
The transform() is css function you can use to change the position by translation on x, y, z-axis, size by scale(), and rotate().
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Discussion: bad animation effects
I want you to do some research about when the animation effect is helpful (ex. to explain dyslexia) and when it can be disturbing or harmful (ex. blinking, the case of pokemon). Share what you found/learned.
https://en.wikipedia.org/wiki/Denn%C5%8D_Senshi_Porygon#Strobe_lights
https://www.creativebloq.com/typography/examples-kinetic-typography-11121304