HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

How To Turn Image Into Vintage With CSS

in CSS
Reading Time: 2 mins read
396 4
0
How To Turn Image Into Vintage With CSS
550
SHARES
2.5k
VIEWS
Share on FacebookShare on Twitter

Applying Grayscale, Sepia, and Hue-Rotate Filters to an Element with CSS

This set of CSS code applies three filters to the element with the class “vintage”. The first filter, grayscale(1), removes all color from the element and displays it in black and white. The second filter, sepia(1), gives the element a brownish-grey tint, giving it a vintage or old-fashioned appearance. The third filter, hue-rotate(35deg), changes the overall color of the element by rotating its hue by 35 degrees. These filters are applied in the order they are listed, so the element is first converted to grayscale, then given a sepia tint, and then has its hue rotated. This can create a combination of these effects on the element.

.vintage {
  filter: grayscale(1) sepia(1) hue-rotate(35deg);
}
<img src="trophy.jpg" class="vintage" />
<img src="trophy.jpg"/>

Targeting Multiple Elements with CSS Filters

It’s worth noting that these filters will only be applied to the element with the class “vintage”. If you want to apply these filters to multiple elements, you’ll need to use a class selector or some other method for targeting multiple elements.

RelatedPosts

How To Create a Beating Heart Shape Animation Using CSS

How To Transition a Height of Zero to a Height of Auto?

How To Apply CSS to Half of a Character

Browser Support for CSS Filters

The CSS filters (grayscale, sepia, and hue-rotate) are widely supported in modern web browsers. According to CanIUse, all major desktop and mobile browsers support these filters, including Internet Explorer, Edge, Chrome, Firefox, Safari, and Opera. However, it’s worth noting that some older or less widely used browsers may not support these filters.

Testing Your Code in Different Browsers

It’s always a good idea to test your code in a variety of browsers to ensure that it works as intended across different platforms. You can use a tool like CanIUse to check the level of browser support for different CSS features and plan your code accordingly.

Tags: css filter
Share220Tweet138Share55

Related Posts

How To Create a Beating Heart Shape Animation Using CSS
CSS

How To Create a Beating Heart Shape Animation Using CSS

by 22bulbjungle
December 28, 2022
0

Create the HTML structure Create the HTML structure for the heart shape. We'll use a div element with the class "heart": <div...

Read more
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.