---
type: slide
slideOptions:
display: block
---

# ACIT 1620

## Week 4

---

<!-- .slide: data-transition="zoom convex-out" style="text-align: left"-->
Topics (in no particular order):

- CSS selectors contd
- CSS variables
- CSS transforms
- CSS transitions
- CSS animations

---

<!-- .slide: data-transition="zoom convex-out" -->
## HTML and CSS validation

- Checks correct syntax
- Checks proper usage of elements, ie. the tags used to markup the content reflect the meaning of the content

- [W3C Validator](https://validator.w3.org/)

---

<!-- .slide: data-transition="zoom convex-out" -->
## Selector complexity

- Expressing simultaneous conditions
- Expressing combinations, ie. selectors that match a set of elements
- Expressing nesting and relations

----

- Compound selector

a:hover {
    color: chocolate;
}

----

- Selector list

a:active,
a:hover,
a:focus {
    text-decoration: none;
    color: cyan;
}

----

- Combinators:
- descendant (spacing)
- child: `>`
- Next sibling: `+`
- Subsequent sibling: `~`

----

Examples:

/* Select paragraph siblings of 
 * level 3 headings sharing the same 
 * parent and occuring after the heading
 */
h3 ~ p {
    color: magenta;
}

/* Select direct list children of section with class .content */
div.content > ul,
div.content > ol {
    margin: 0;
    padding: 1rem;
    list-style: none;
}

----

- `first-child`, `last-child`, `nth-child`, `nth-of-type`

table > tr:nth-child(odd) {
    background: hsl(120, 50%, 60%);
}

---

<!-- .slide: data-transition="zoom convex-out" -->
## CSS transforms

- CSS provides functions for creating different transformations:
- translate: move elements horizontally, vertically
- rotate
- scale
- etc

----

div.example {
    transform: scale(1.2) translateX(100px);
}

---

<!-- .slide: data-transition="zoom convex-out" -->
## Transitions and Animations

- Express different states of an element through time.
- Transitions: simple movements

.btn:hover {
    background: chocolate;
    color: #fff;
    transition: all 1s ease-in;
}

----

- Animations: complex series of movements

div.ball {
    animation-name: bounce;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-direction: alternate;
    animation-iteration-count: 5;
}

@keyframes bounce {
    0% {
        top: 0;
    }
    
    50% {
        top: 400px;
    }
    
    100% {
        top: 0;
    }
}

---

## Resources

Here is an enjoyable CSS transitions & animation example you can try out:

[Transitions in space](https://cssanimation.rocks/space-transitions/)