...
Back to exercises

Lessons

Youtube

Module 2

Working with images. Basics of image styling – border, rounded corners, effects and fitting. Using images as backgrounds. Background color and gradient image masks.

Working with images. Basics of image styling – border, rounded corners, effects and fitting. Using images as backgrounds. Background color and gradient image masks.

Lesson 1

Basic image styling
aspect ratio, border, border radius, box shadow, drop shadow, filter, image, object fit, outline
Basic styling of images in CSS. Set the width, height, border-radius for rounded corners, image border and control how the image fits into the frame using object-fit and aspect-ratio properties. Together with some basic filters and drop shadow effects!
Watch the lesson

Lesson 2

Background images
background image, background position, background repeat, background size, contain, cover, fill
How to set background image to divs using only CSS. Set the image source in url of the background-image property. Using background-repeat, background-position and background-size to adjust your background.
Watch the lesson

Lesson 3

Background colors
background color, background gradient, linear gradient, rgba, transparency
How to set a background color or background gradients for divs and other elements in CSS. Using rgba colors instead of hex values to control the transparency.
Watch the lesson

Lesson 4

Image feather gradient
feather gradient, linear gradient, mask image
A cool feather gradient on an image using mask-image property and linear-gradients. You can control the direction and the exact gradient stops, as well as create the effect on one or both sides / edges of the image!
Watch the lesson

General Instructions

Step One: What I will be making

First click on the green ‘What I will be making’ button. This is how your end result should look like.

Step Two: What I need

Next, click on the ‘What I need’ button to get some basic parameters to use in the code. Such as the font family, colors, image URLs etc. These are just recommendations. Use your own judgement for the rest of the values, such as paddings, margins, spacing and size.

Step Three: Read the given HTML code

You don’t need to know how to write HTML for these exercises. However, you WILL need to take a look at the ‘HTML’ code in the exercise. You can switch from HTML to CSS tab in the Codepen screen. Then read the built HTML code for each exercise to understand the structure and find the classes that are defined for the elements that you will be editing. Use those predefined classes to style them in CSS.

Step Four: Click on the ‘CSS’ tab and start coding

Click on the ‘CSS’ tab in the Codepen screen and start typing your CSS code here, just below the ‘Write CSS code here’ comment. You can also delete this comment if you wish.

For example, if a ‘div’ has a class “text-content” in HTML, you can then style this class in CSS tab. Just don’t forget to add a dot before calling a class out (.text-content)

You should see a live preview of the CSS code that you are editing in the ‘Result’ tab to the right of the Codepen screen.

Step Five: Check the solution with the CSS code

If you are stuck, click on the ‘Show me the code’ button. This will reveal the code that you can also completely copy and paste in the CSS tab of the exercise to see the result.

Or you can just go back to the lessons and watch them again.

Have fun and feel free to reach out!

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.