RESOURCES / BLOG / CSS
Results for Tag ‘CSS’
Adding a Blur Effect to a Background Image With CSS and Cloudinary
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…
Read More ->
Creating a Transparent Effect on Background Images With CSS Opacity and Cloudinary
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…
Read More ->
Handle Image Asset Bundling Using Vite in Vue.js
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…
Read More ->
CSS Image Overlay: Overlaying Text and Images for Visual Effect
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,…
Read More ->
Working With CSS Images
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…
Read More ->
Creating Image-Filter Effects With CSS and Riveting Transformations
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…
Read More ->
CSS Image Effects: Five Examples and a Quick Animation Guide
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…
Read More ->
Image Resizing: Manually With CSS and Automatically With Cloudinary
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,…
Read More ->
Best Practices for Responsive Web Design
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…
Read More ->
Start Using Cloudinary
Sign up for our free plan and start creating stunning visual experiences in minutes.
Sign Up for Free