DCSS - Transforming Images with CSS [LESSON]

Transforming Images with CSS

Web Images

You might be familiar with the Chinese proverb that states "a picture is worth 1000 words." The images you add to a website can portray a message without the need to have your audience read details in a paragraph. Earlier in this course, you discovered that the Graphics Interchange Format (.gif), Joint Photographic Experts Group (.jpeg), and Portable Network Graphics (.png) are the most common formats of images used on websites. These formats are referred to as bitmap (also referred to as raster) images. The images consist of colorized pixels typically showcasing real-life subjects.   When bitmap images are resized, the resolution of the image is compromised leaving it with a look that is grainy or distorted. When using bitmap images, make sure to save the file with the needed dimensions so it does not skew the image's appearance.

Vector images, like logos, line art, and buttons are made up of objects. These graphics are generated by a computer and are used in HTML 5. These images can be sized up and down without losing resolution.  That is why logos should be vector images rather than bitmap images. 

Adding CSS to Images

There are a lot of effects that you can do to images using CSS to totally transform the appearance of either the image or the website. You can use CSS to add an image background to your site, you can also use CSS to alter the image. 

Background Images

When designing a site, we often don't want the default white background. We usually will use a solid color background that is entered like this: body {background-color: lightblue;}. However, sometimes we want some texture or a background image. In that case, there are several ways to enter a background image onto a website. You can also use backgrounds for other elements such as paragraphs, divs, and even horizontal rules.

To enter a background image, you use the background image property: background-image.  The standard background image in CSS is entered like this example: div {background-image: url("images.jpeg");}.  The designation "URL" is telling the browser to look for the image name (however, it can also refer to an online image identified by the image webpage URL).

When you enter a background image with the basic CSS, the image will by default repeat both horizontally and vertically.  This could end up looking strange, so you will typically tell the browser to either repeat the image horizontally or vertically.  To do that we use the property: background-repeat and the value repeat-x or repeat-y, with X being horizontal and Y being vertical. 

You can add additional CSS to have the image not repeat, position it to a certain place on the screen, and make it to where it either scrolls or doesn't scroll when the user scrolls. You can also use a shorthand property to add all your CSS for the background in one property: body {background: url("assets/owl.png") no-repeat right top;}. This code would tell the browser to display the owl background image on the top right without repeating.

See the video below to learn how to add Background Images to your website.

Effect Types

The application of effects can add pizzazz to the images on the website. In many instances you, or a member of your web design team, will access image editing programs to apply photo effects to images that can be added to a web page. It is also possible to code the effect using the CSS Filter. The CSS Filter property would be used to apply the filter effect.

The table below provides a description of some of the common CSS Filters that are applied to images.

The filters are added to the CSS for the site, page, or element. Below is a list of how you add filters. When you add a filter, you also add the value you want the image to be changed (percentage, decimal, pixel, etc.) depending on the filter.

• img {filter: blur (5%);}
• <img src="image.jpg" style="filter: blur (5%)">
• Multiple filters:  img {filter: contrast(200%) drop-shadow(8px 8px 10px green);}

Try the CSS Filter Review activity below by dragging the image to the correct title.

Image Sprites

Image sprites are a technique where multiple images are combined into a single image. This can reduce the number of server requests and improve page load times. To use image sprites, you can set the "background-position" property to specify the position of the image within the sprite.

Watch the Sprite Video to learn more about sprites.

Rounding Corners on Images

When placing images on a website, sometimes you want it to have a different appearance, you can place borders around images. You can also use CSS to round the corners of images. When images come into HTML, they are rectangles. You can use CSS to change the shape of the image by using border-radius as well as by using masking. The border-radius property applies an amount of curve to the corners of the image. You can create a rounded corner rectangle/square up to an oval using border-radius. The more pixels you use as the value for the border-radius property, the more round the corners will be. 

In this image, the corners are labeled in the order of the code. When you put the amount of border-radius, you can list each corner with the amount you want. The first number is the top-left, the second number is the top-right, the third number is the bottom-right, and the fourth number is the bottom-left. In the image below you can see that each corner was given a different amount.

You can use the CSS shorthand to place the radius, in this image, the 15 pixels is for the top-left and bottom-right and the 50 pixels is for the top-right and the bottom-left. 

In this image, the image is an oval because the amount of border-radius is much larger (150 pixels). 

Image Masking Using CSS

Image masking is when you use one image (usually words or logos) to cut out the picture into that design. Here we have an image of a tree frog:

In this image the letters GAVS are placed over it to cut out those letters from the image.

This was done using CSS Masking. This requires the use of a "WebKit"*. You enter your image with a style Class or ID on the HTML page in the image code and then on the CSS page you enter the WebKit into the class or ID code. 

This is the code for the image mask above.

There are many more things you can do with images and CSS, you can add borders, transitions, rotations, galleries, reflections and more. New ways to use CSS to alter the appearance on your websites continue to be discovered.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION