Skip to content

RESOURCES / BLOG / CSS

Results for Tag ‘CSS’

Adding a Blur Effect to a Background Image With CSS and Cloudinary

Topics CSS, Image Transformation
Read Time

Working with images and texts in a web application is a complex task. In many scenarios, you want to blur a picture to make it less distracting or to make the text on top of it more readable. For example, blurring the background image of a modal window or page…

Creating a Transparent Effect on Background Images With CSS Opacity and Cloudinary

Topics CSS, Image Transformation
Read Time

Adding a background pattern or image to a website makes it more visually appealing and creates a strong brand impression. But we don’t want the background image to be too distracting, especially when text is overlaid on top. In this case, we can apply a transparent effect to the background…

Handle Image Asset Bundling Using Vite in Vue.js

Topics CSS, Guest Post, Image, JAMStack, Optimize, Vue
Read Time

The by-product of human evolution with the internet has become ambitious web applications to cater for our ever-growing list of web application needs. As larger websites usually mean slower websites, Vite provides faster development experiences. Being platform-agnostic means Vite is versatile and can be used across various platforms, providing an…

CSS Image Overlay: Overlaying Text and Images for Visual Effect

Topics Asset Management, CSS, Performance Optimization
Read Time

CSS image overlays are a common technique for transposing text or images over each other. For example, you can combine images and text on a website when captioning an image, or place a live text element over a button. CSS image overlays can be a solid color, a gradient,…

Working With CSS Images

Topics Asset Management, CSS, Javascript, Performance Optimization
Read Time

With Cascading Style Sheets (CSS), you can style your site and transform the related images. For example, you can create static or sticky positioning for the graphics, define backgrounds and borders, resize, and create cool filters to show off the artistry. CSS offers numerous options for those tasks. Gratifyingly, CSS…

Creating Image-Filter Effects With CSS and Riveting Transformations

Topics Asset Management, CSS
Read Time

You can transform images with CSS image filters, applying popular effects like blur, brightness, contrast, drop shadow, grayscale, hue, invert, opacity, saturate, and sepia. With Cloudinary, image-transformation tasks, such as blurring or pixelating faces, adjusting brightness and contrast, and transferring image styles, are much simpler and often automated. This…

CSS Image Effects: Five Examples and a Quick Animation Guide

Topics CSS, Performance Optimization
Read Time

Image effects, which you can set up with CSS, define how images are served to users. This article describes how to create basic effects, image hover, and animated images through parameter configurations in your main CSS stylesheet and—much faster and dynamically—in Cloudinary. Here are the topics: Creating basic…

Image Resizing: Manually With CSS and Automatically With Cloudinary

Topics Asset Management, CSS, Performance Optimization
Read Time

With Cascading Style Sheets (CSS), you can change the size and aspect ratio of images and backgrounds. Three resizing options are available: absolute resizing, retention of the aspect ratio, and relative resizing. You can also scale and fill backgrounds. However, those are all manual chores that take time, skill,…

Best Practices for Responsive Web Design

Topics CSS, Responsive Images
Read Time

Responsive design turns 8 this year, and to celebrate, we asked experts from across the web industry a simple question: what does responsive design mean to you and your work, in 2018? I’m fascinated by their answers. As many state, the technical aspects of responsive design – flexible…

Start Using Cloudinary

Sign up for our free plan and start creating stunning visual experiences in minutes.

Sign Up for Free