Learn how to enhance your website's appearance using CSS graphic design styles. Discover how to insert background images, create text and box shadows, apply color gradients, and more.
Overview
Syllabus
Introduction
- Welcome
- What you should know
- Using the exercise files
- CSS colors
- Add background color
- Insert a background image
- Background image options
- Use the background style
- Combine multiple backgrounds
- Challenge: Building a background
- Solution: Building a background
- Use the border style
- Circle style corners
- Ellipse style corners
- Apply border images
- Challenge: Element borders with flair
- Solution: Element borders with flair
- Create a text shadow
- Create a box shadow
- Challenge: Shadow challenge
- Solution: Shadow challenge
- Create a linear gradient
- Create a radial gradient
- Repeating a gradient
- Gradients as background images
- Challenge: Building a gradient
- Solution: Buidling a gradient
- Use the filter property
- Combine multiple filters
- Challenge: Transforming a website
- Solution: Transforming a website
- Next steps
Taught by
Patrick Carey