Rounded Black and White Image Effect using CSS

Search for a command to run...

No comments yet. Be the first to comment.
This blog post is fourteenth in the Advent of Code 2021 series and shows a JavaScript-based solution to the problem described in Day 14. This challenge was about optimizing an algorithm that generates exponentially larger and larger strings. I found ...

This blog post is thirteenth in the Advent of Code 2021 series and shows a JavaScript-based solution to the problem described in Day 13. All solutions are in this GitHub repository. Solving Part One Given a list of x, y coordinates representing dots ...

This blog post is twelfth in the Advent of Code 2021 series and shows a JavaScript-based solution to the problem described on Day 12. All solutions are in this GitHub repository. Solving Part One Given a set of connections between underground caves, ...

This blog post is eleventh in the Advent of Code 2021 series and shows a JavaScript-based solution to the problem described in Day 11. This day had many similarities to Day 9, and I solved the challenge using similar methods. All solutions are in thi...

This blog post is the tenth in the Advent of Code 2021 series and shows a JavaScript-based solution to the problem described in Day 10. All solutions are in this GitHub repository. Solving Part One Given a set of lines with opening and closing bracke...

In web applications, you might not have control of user-uploaded content such as images. Moreover, creating a beautiful web design, a rich user interface, and great experience requires taking full advantage of CSS.
A great example of custom-styled images is on most social media applications such as Facebook, Twitter, and Linkedin, where profile pictures are displayed in a circle.
This article shows you how you can create a similar effect to display a black and white image with rounded corners.
This is the markup for the image in HTML:
<img
src="profile.jpg"
width="200"
height="200"
alt="Profile picture"
class="rounded grayscale"
/>
The img tag is styled using two CSS utility classes rounded and grayscale.
The rounded class turns the square image into a circle by using the border-radius property and setting it to 50% of the image's width.
.rounded {
border-radius: 50%;
}
Sara Cope explores the wonderful border-radius property in depth on CSS Tricks.
The grayscale class creates the black and white effect. You need to use the filter property with the grayscale option and specify 100% which completely saturates the color. According to MDN Web Docs most modern browsers support filter property with the -webkit- vendor prefix.
.grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
To sum up, you can use the border-radius and filter with grayscale properties to stylize an image with rounded corners and a black and white appearance. This is especially useful when you don't have control over the image content.
Thanks for reading and I hope you found this interesting!