CSCI 185: Fall 2023

Introduction to Programming for the Web

CSCI 185: Fall 2023

UNCA Logo

Fish by @akeatk

Activity: Transitions

This in-class activity consists of 3 parts:

  1. Experimenting with some transitions
  2. Trying to implement one of the CSS Tricks
  3. Experimenting with the ::before and ::after pseudo-classes

Please download the exercise files (below).

Download Activity Files

1. Experimenting with Transitions

Relevant References

Uncomment the relevant CSS style blocks

Inside of the in-class-exercise folder, take a look at the HTML and CSS files to get oriented with them. Then, before making any changes to the code, preview the index.html page in your web browser.

After previewing your webpage, uncomment the following lines inside your styles.css style block:

/*
#section1 {
    background: #0c7474;
    color: white;
    transition: all 0.3s ease-out;
}

#section1:hover {
    background: purple;
    width: 220px;
    height: 220px;
}
*/

When you’re done, preview the page, noting what changed. When you hover over the first section, you the section should grow and change color (horray)!

Create two more transition effects

Your job is to experiment with the other two section tags (#section2 and #section3) by making some interesting interactions, using transitions. Some tips:

  1. To make a transition, you define a transition inside of a style block (e.g., #section1) as follows: transition: <property> <duration> <timing-function> <delay>; Examples:
    • transition: all 0.3s ease-out;
    • transition: background 1s ease-in;
    • transition: all 3s linear;
    • transition: all 0.3s ease;
  2. Some properties that you may want to change:
    • border-radius
    • margin
    • padding
    • width
    • height
    • border-width
    • background-color
    • rotation
    • opacity
    • transform. Examples
      transform: skewX(20deg);
      transform: rotate(-10deg);

Feel free to look at sample-files/01-pseudo-classes and sample-files/02-pseudo-classes-with-transitions to get ideas.

2. Implement one of the CSS Tricks Effects

Relevant References

When you’re done with parts 1-2, please try experimenting with hyperlink hover effects. Recall that hyperlinks have several relevant states that you want to style:

Click on some of the “CSS Tricks” links above, and see if you can implement one of the techniques that you find interesting.

3. selector::before and selector::after pseudo-classes

If you have time, try to implement a “before” or an “after” pseudo-class on an eleement. See the sample-files/01-pseudo-classes folder for some examples (or you can copy in the example and then adapt it).