5 Cool Image Effects You Can Achieve with Basic CSS
Cascading style Sheets (CSS) is a programming language that describes how to display markup languages on documents, and its usual use is to set the visual style of HTML on web pages. By learning CSS, you can alter the colors, layout, images, and fonts on web pages, even adapting page design to suit different devices.
CSS is easy to learn, and there are hundreds of excellent (and free) tutorials available online to quickly get to grips with the basics. The language is also supported by multiple browsers and it establishes a consistent framework for Web designers. Some drawbacks of CSS include its different syntax from HTML and the fact that it takes longer to load Web pages styled using CSS.
Images play a vital role in how people interact with a web page, and there are several CSS image effects that can bolster how images look on your website. Let’s now go through give cool image effects you can achieve with basic CSS. You can also check out this wiki page from Cloudinary with quite a few resources on CSS image effects, including some cool filters to touch up images and make them more aesthetically pleasing.
1. Rounded Corners
One of the most widely used CSS image effects, the rounded corners option provides a fresh, modern look to images and forms displayed on Web pages. Rounded corners can really make elements stand out, and you can choose to implement this CSS image effect by defining the border-radius property.
For example, to round the corners of an email form that has an image background entitled paper.jpg, you could use the following code:
rcorners {
border-radius: 15px;
background: paper.jpg);
background-position: left top;
padding: 20px;
width: 200px;
height: 150px;
}
The above code rounds all corners. However, you can adjust this CSS image effect to create many different shapes for web page elements, such as buttons and images, by specifying four values instead of a single value in the border-radius property. In this way, you can round just one corner or create other unique shaped for Web page elements.
2. Create Image Thumbnails
Image thumbnails are great for linking to posts from elsewhere on a site, such as related posts. Thumbnails can also be helpful for affiliate marketing or eCommerce sites in displaying clickable product images.
To create a simple thumbnail from the image tshirt.jpg, apply the following CSS:
img {
border: 1px solid #ddd;
border-radius: 3px;
padding: 5px;
width: 160px;
}
<img src="tshirt.jpg"alt="stylish tshirt for men">
The above code sets a grey border that is 3 pixels thick around a thumbnail of tshirt.jpg that is 160 pixels wide.
3. Full Page Background
One of the best ways to take advantage of the ideal background for your website is to cover the entire browser window with that background, letting users appreciate the full detail of the photo. This CSS image effect is particularly helpful for photographers or anyone who wants their website background image to be prominent.
To achieve this effect with CSS, you can specify the border-radius property in your HTML element and set its value as cover. Setting this value in the HTML element ensures the chosen image is always at least the height of the browser window. You’ll also need to center and fix the background.
4. Responsive Image Sizes
We are firmly in the era of mobile Internet browsing, making it imperative to style websites in such a way that visual content looks great, regardless of the device used to browse sites. There are various levels of complexity to set image sizes so that they adjust to the devices used for browsing a website, however, simple is always better.
To make an image size responsive, you simply need to make sure its width displays at most 100% of its maximum width and set its display height to automatically adjust depending on display width, image width, and image height. The code for this CSS image effect is as follows:
img {
max-width: 100%;
height: auto;
}
5.Transform Images
This is another cool and impressive CSS image effect that doesn’t require anything beyond basic CSS. The transform property is a relatively new CSS property, meaning it’s unsupported on older Web browsers.
With transform, you can rotate, tilt, and scale visual elements to achieve some unique effects on your website, such as rotating shapes and moving buttons that attract visitor attention (great for CTAs).
The following code rotates the chosen element 25 degrees clockwise from its starting point:
.image {
transform: rotate(25deg);
}
);
}
If you wanted to rotate that element in the opposite direction, you could choose a negative rotation value.
Closing Thoughts
These five CSS image effects mark a great starting point for anyone who wants to learn how CSS can help to create a beautifully presented website.
The CSS knowledge required to implement these effects is pretty basic, however, you’ll want to move on to implementing some cool image filters and effects as you progress with the language and understand it better.
