Color Mode

Visual Effects Practice

You have spent this week learning four categories of CSS visual effects: transforms and shapes, gradients, blend modes, and filters. This assignment asks you to use all four in a single gospel-themed page. The goal is not to create a catalog of every technique you learned. The goal is to use each category purposefully, in service of a real design, so that the effects feel intentional rather than tacked on.

Content must come from the New Testament or the Book of Mormon. Choose a subject that gives you enough material to build a complete, well-designed page: a parable, a missionary journey, a doctrinal theme, a person, a place, or a collection of related scriptures.

What You Are Building

A single, well-designed gospel-themed page that uses CSS visual effects as genuine design tools. The page should feel cohesive: the effects you choose should serve the design, not compete with it. A subtle gradient background, a blended image overlay, a filtered photograph, and a transformed UI element working together is far more impressive than every technique at full intensity fighting for attention.

Content ideas: A profile of a Book of Mormon figure with a rich visual background. A parable page where the imagery reinforces the teaching. A scripture collection built around a theme like faith, light, or covenant. A place in the scriptures brought to life with photography and visual effects. Choose what interests you.

Visual Effects Requirements

Your page must demonstrate all four effect categories from this week's readings. Within each category, you only need to use something meaningful, not everything possible. One well-chosen effect per category is enough if it is used with intention.

1. Transforms

Use at least one CSS transform in your design. This could be a hover effect on a card or image, a rotated decorative element, a scaled interactive component, or a translated UI element. The transform should enhance the user experience or the visual design, not just exist for the sake of existing.

2. Gradients

Use at least one gradient somewhere in your design. A gradient background, a text overlay, a section divider, a card background, a subtle pattern: any of these count as long as the gradient is doing real visual work. Avoid using a gradient only as a fallback for something you could not accomplish with a solid color.

3. Blend Modes

Use mix-blend-mode or background-blend-mode at least once. A colored overlay on a photograph, text that blends into a background image, a tinted texture: these are all strong natural fits for gospel imagery and photography.

4. Filters

Use at least one CSS filter function. A grayscale-to-color hover effect on images, a frosted glass panel using backdrop-filter, a brightness or contrast adjustment, or a drop shadow that follows content shape: pick what fits your design.

Effects Should Feel Designed, Not Demonstrated

The strongest submissions will be pages where a visitor would not immediately identify the visual effects as the assignment requirements. If someone looks at your page and says "that gradient is beautiful" rather than "I see you used a gradient," you have done it right.

Technical Requirements

Beyond the visual effects, your page must meet these standards:

Portfolio Setup

Add this project to your portfolio repository using the following structure: 


        portfolio/
        └── unit-4/
            └── visual-effects-practice/
                ├── index.html
                ├── css/
                │   └── styles.css
                └── images/
                    └── (your images here)

Test your live GitHub Pages URL in an incognito window before submitting to confirm all assets load correctly.

Submission

Complete the form below, download the PDF, and submit it to Canvas along with your portfolio link.

Visual Effects Practice
Project Link

Provide the live URL to your visual effects page in your portfolio.

Portfolio URL:

Visual Effects Used

For each category, identify the specific property and element you used. One or two sentences each.

Transforms
Gradients
Blend Modes
Filters
Reflection

CSS visual effects are easy to apply individually but difficult to use together without the result feeling cluttered or inconsistent. Analyze how the effects you chose work together as a unified design. Where do they reinforce each other, where did you make tradeoffs to keep the design cohesive, and what would you do differently if this were a high-traffic production site rather than a portfolio project?

Evaluation Criteria

Your work will be evaluated on the following: