Understanding images for web developers [Part 5]
Web developers' guide to shape of an image
![Understanding images for web developers [Part 5]](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fstock%2Funsplash%2F-SmCKTIcH5E%2Fupload%2Fbccedf682e499849a1b5ab92f2737b4b.jpeg&w=3840&q=75)
Sky always blue
This will be the fifth part of the images for the web developer series. I have covered the whole series in depth; if you are curious, you can check it out here. Let's talk about shapes with images
Shape of an image
we have an image inside a container
We will use border-radius in CSS to change the shape of the box to have a rounded container, When we declare 1 value (2rem) in border-radius, it'll apply the value to all four corners of the box
img {
display:block;
width:100%;
height:auto;
border-radius:2rem; //(X=32rem,Y=32rem)
}
A note is here
{
border-radius:100000rem;
}
When we get to the border radius of the size of the box itself, in this case, the height, it stops changing so even though we set the border-radius to an extremely ridiculous value, the roundness of the corner does not change
With border-radius, we can have different shapes of the container
{
/** as previous **/
border-radius:0 35rem;
}
Custom shapes using clip-path
The clip-pathCSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
Circle
.img {
width: 100%;
height: auto;
clip-path: circle(25% at 50% 50%); (border at X,Y)
}
Explain it in simple terms
clip-path: circle(radius at center);
We will create a circular clipping path for the image with a radius of 25% of the container size, centered at 50% from the left and 50% from the top of the container.
Ellipse
.img {
clip-path:ellipse(25% 50%);
}
/* with ellipse we'll have to set both of X and Y value */
Polygon (aflatshapewith three or morestraightsides)
img {
polygon(50% 0,100% 50%,50% 100%,0 50%)
}
/* You have to declare at least 3 points */
Inset
The inset property allows you to inset from top , right , bottom , left
.section {
background-color:yellow;
}
.img {
clip-path:inset(25%);
}
Path
It doesn't work well with other browsers, and it depends on the other software (adobe, Photoshop, etc) to create the path for us
clip-path: path(
"M158.73,292.46A85.5,85.5,0,0,1,279.65,
171.54l.35.36.35-.36A85.5,85.5,0,0,1,401.27,
292.46L280,413.73Z"
);
But this technique has a drawback: It is not responsive when we resize the container
Mask an image
Themask-image property specifies an image to be used as a mask layer for an element.
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
<body>
<h1>The mask-image Property</h1>
<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
https://www.w3schools.com/cssref/tryit.php?filename=trycss3_mask-image0
Image text
Create the knockout effect when we can see the background image inside the text
.content h1 {
padding: 4rem;
font-size: 5rem;
text-align: center;
background: url(https://source.unsplash.com/7ne3hNnojvU/1800x1200);
background-size: cover;
background-clip: text;
-webkit-background-clip: text; /** chrome is not supported **/
color: transparent; /** the text has it own color we'll have to
transparent it **/
}
In this chapter, we have discovered how we can change the shape of the images on various techniques. Having these techniques in hand, we can make images displayed in whatever shape we want ( circle, ellipse, polygon, inset, with custom SVG, mask an image, knockout effect with text, etc ). I hope you find this article helpful. If you like this article, don't forget to like and subscribe to my channel. It would mean a lot to me, until next time take care and see you soon
