Image styling in CSS

Styling images in CSS

Images are important elements on a website as they can help convey a message or make content more visually appealing. However, it is often necessary to style these images to better integrate them into the website design. In this article, we'll cover some image styling techniques in CSS.

Adding borders

One of the simplest ways to style an image is by adding borders. For this, we can use the border property in CSS. For example:

img {
  border: 1px solid #ccc;
}

In this example, we are adding a 1-pixel light gray border around the image.

Applying filters

Another interesting technique is to apply filters to images. This can be useful for correcting lighting, adding color effects, and more. To apply a filter to an image, we can use the filter property in CSS. For example:

img {
  filter: grayscale(100%);
}

In this example, we are applying a grayscale filter to the image. There are several other filters available in CSS, such as blur(), brightness(), contrast(), among others.

Adding shadows

Adding shadows around images can help make them stand out from the rest of your content. For that, we can use the box-shadow property in CSS. For example:

img {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

In this example, we are adding a shadow of 2 pixels of horizontal and vertical offset, with 5 pixels of blur and 30% opacity in the black color. You can use other colors and adjust offset, blur, and opacity values ​​to get the desired effect.

Resizing images

Finally, it's important to mention that we can also resize images in CSS. This can be useful for adjusting the image size according to your website layout. To resize an image, we can use the width property in CSS. For example:

img {
  width: 100%;
  height: auto;
}

In this example, we are setting the image width to 100% of the parent element's size. The height is set to automatic to maintain the aspect ratio. It is important to remember that resizing an image can affect its quality, so it is recommended to use images with adequate resolution for each size.

These are some of the image styling techniques in CSS. It is possible to combine these techniques and use other properties to obtain even more interesting results. It's worth experimenting and exploring the possibilities of CSS to make your website's images even more beautiful and attractive.

Next page of the Free Ebook:

18CSS menu styling

4 minutes