1 of 27

15. CSS Flourishes

MSER 521�Fall 2025

1

2 of 27

Outline

  1. Media and Background Images
  2. Pseudo-classes
  3. Transitions
  4. Keyframes
  5. Activity

2

3 of 27

Outline

  • Media and Background Images
  • Pseudo-classes
  • Transitions
  • Keyframes
  • Activity

3

4 of 27

<img> tag v. CSS Background Images

There are a few ways to make images:

  • Using the <img> tag
  • Adding a background image to any HTML tag using CSS
    1. You can add a background image to any HTML element

Demo: background-media/01-images-mixed-sizes

5 of 27

Background Image Properties

background-attachment: fixed; /* parallax effects */

background-size: cover;

background-repeat: no-repeat;

background-position: top center;

filter: grayscale(100%); /* list of filters here */

​

6 of 27

Object-Fit Property for Images

Historically, using background images was the only way to crop images without actually modifying the original image (via photoshop or some other image editor). Now, you can also set the CSS object-fit property to crop images. More information here: https://www.w3schools.com/css/css3_object-fit.asp

​

​

7 of 27

Parallax Effects

  • Background images can also be used to enact parallax effects (where background images appear as if they are moving at a different speed as the scrollbar / “curtain effect.”
  • One way of creating this effect is to use the following:� background-attachment: fixed;

​

Demos

  • background-media/02-image-bg-parallax-simple
  • background-media/03-image-bg-parallax-simple-with-text
  • background-media/04-image-bg-parallax

8 of 27

Filters

There are a lot of interesting ways to create filter:

9 of 27

Video Backgrounds

Examples of video backgrounds:

​

Demo: background-media/05-video-background

10 of 27

Audio Tags

Examples of video backgrounds:

  • W3 Schools
  • Sounds effects on buttons (we will learn how to do stuff like this after the break)

​

Demos:

  • background-media/06-audio-simple
  • background-media/06-audio-js

11 of 27

Outline

  • Media and Background Images
  • Pseudo-classes
  • Transitions
  • Keyframes
  • Activity

11

12 of 27

Pseudo-class

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.”

​

When do you use them (see demos):

  • If a user interacts with an element, you can apply a special style that “turns on” when the interaction happens.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

13 of 27

Pseudo-class Demos

Demo walkthrough (transitions/01-pseudo-classes):

  1. Pseudo-classes typically used for links
  2. Pseudo-classes used to select elements that match a pattern
    • e.g. li:nth-of-type(even) {� border: 2px solid orange;�}
  3. Pseudo-classes typically used for forms (e.g., input:focus)
  4. Pseudo-classes for adding additional content (::before and ::after)
  5. Pseudo-classes for contextually showing / hiding information

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

14 of 27

Outline

  • Media and Background Images
  • Pseudo-classes
  • Transitions
  • Keyframes
  • Activity

14

15 of 27

Transitions

Transitions are often used in combination with a pseudo-class to “transition” between the off state and the on state using animation.

  • You can animate colors, sizes, padding and margin – basically anything that can be represented as a number.
  • Transitions allow you specify:
    • The property or properties you want to animate
    • How long the animation will take
    • The timing function
    • Whether there should be a delay in the animation

15

16 of 27

Transition Syntax

div {

transition: <property> <duration> <timing-function> <delay>;

}

16

17 of 27

Transition: Example

a {

color: red;

transition: all 0.3s ease-out 0s;

transition-property: color, margin;

}

​

a:hover {

color: blue;

font-size: 200%;

}

​

17

18 of 27

Transitions: Demo

transitions/02-pseudo-classes-with-transitions

  • Think about the kinds of property changes that might result in an interesting transition effect (text and background color changes, width, height, rotation, border radius, margin, padding, etc.)
  • Experiment with some of the transform property and the many functions that can be applied to it (rotate, skew, translate, scale, etc.)

18

19 of 27

Preview: Using Transitions with JavaScript

Transitions are often used in combination with JavaScript (which we’ll talk more about after Spring Break. Let’s take a look at some techniques that use transitions and JavaScript and talk through how they work…

  • transitions/advanced-techniques/text-animations
  • transitions/advanced-techniques/scrolling-effects-01
  • transitions/advanced-techniques/scrolling-effects-02

20 of 27

Outline

  • Media and Background Images
  • Pseudo-classes
  • Transitions
  • Keyframes
  • Activity

20

21 of 27

Keyframe Animations

What is a keyframe?

Keyframes are a way to make more complex animations.

  • You define a series of keyframes in a separate block inside your CSS file and give it a name.
    • Inside the keyframe definition, you specify what should happen at different time intervals.
  • You then apply the keyframe to specific elements.

22 of 27

Example: Define the keyframe, then apply it

#myMessage {

animation: bounceIn 2s ease-in-out;

}

​

@keyframes bounceIn {

0% {

transform: scale(0.1);

}

60% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

}

23 of 27

Animation properties

animation-name

Name of the keyframe you defined.

animation-timing-function

e.g., linear, ease-in, ease-out

animation-delay

how long to wait before animation starts

animation-iteration-count

How many times animation should repeat

animation-direction

normal, reverse, alternate, alternate-reverse

animation-fill-mode

e.g., forwards, backwards, normal, both

animation-play-state

e.g., paused, running

https://thoughtbot.com/blog/css-animation-for-beginners

24 of 27

Demos

Let’s check out the demo files!

  • keyframes/samples/01-the-basics
  • keyframes/samples/02-heart-infinite
  • keyframes/samples/03-spin-activate-on-hover

25 of 27

Gallery of Inspiration

There are also a ton of animation libraries that you can use to jazz up your websites. For instance:

26 of 27

Outline

  • Media and Background Images
  • Pseudo-classes
  • Transitions
  • Keyframes
  • Activity

26

27 of 27

CSS Flourishes Activity

27