CSS: Enhancing Website Graphics

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.

Introduction

• Welcome
• What you should know
• Using the exercise files

1. Defining the Element Background

• 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

2. Creating Borders

• Use the border style
• Circle style corners
• Ellipse style corners
• Apply border images
• Challenge: Element borders with flair
• Solution: Element borders with flair

3. Defining Shadows

• Create a text shadow
• Create a box shadow
• Challenge: Shadow challenge
• Solution: Shadow challenge

4. Applying Color Gradients

• Create a linear gradient
• Create a radial gradient
• Repeating a gradient
• Gradients as background images
• Challenge: Building a gradient
• Solution: Buidling a gradient

5. Formating with Filters

• Use the filter property
• Combine multiple filters
• Challenge: Transforming a website
• Solution: Transforming a website

Conclusion

• Next steps