Professional Documents
Culture Documents
Images and Shapes: CN 0113 - IWT
Images and Shapes: CN 0113 - IWT
Images and Shapes: CN 0113 - IWT
CN 0113 - IWT
Images
Worth 1000 words.
• Sometimes too much text can be boring. You might want to add
an image or two.
• Images load with their full height and width. Use css to make the
image smaller or larger.
Images
Graphic Elements
• The most common type of image extensions are .jpg .jpeg .png
• However, HTML and CSS support other types like :
.svg .gif .tiff
fi
Images
• All images come with their own default size. You may have seen
images with 4000px by 2000px. If that was to load into your
document, it would overflow all over your page.
• To x this, you can change either the height or the width of that
image. This will keep the proportions of the image similar to the
original size.
fi
Overflow
Hiding what doesn’t t
Shapes
Shapes
• You can build almost any shape you like using HTML and CSS.
• Some shapes maybe 1 element, some maybe 2, some maybe
even hundreds of elements.
Circle
Triangle Up
Triangle Down
Pac Man
Egg
Heart
Heart
www.getcssscan.com/css-shapes
Exercise 1
Create the following look using HTML and CSS
Exercise 2
Find any three shapes, and keep them in one line using HTML and CSS