{"id":5544,"date":"2015-11-21T17:12:20","date_gmt":"2015-11-21T16:12:20","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/en\/?p=5544"},"modified":"2015-11-21T16:52:51","modified_gmt":"2015-11-21T15:52:51","slug":"vintage-washed-effect-on-photographies-in-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/css3\/vintage-washed-effect-on-photographies-in-css","title":{"rendered":"Vintage Washed effect on photographies in CSS"},"content":{"rendered":"

The Vintage Washed effect is actually fashionable. The “users” of this effect are looking for an old aspect, they want to give to their photographies a kind of history by giving them an aged appearance, some people talks about an “authentic” appearance. Let see how to reproduce that effect with CSS.<\/p>\n

<\/p>\n

The expected outcome<\/h2>\n

We are looking for a diminution of colors contrasts by reducing darkest ones. Each photography will need its own treatment depending on its colors exposure.<\/p>\n

See this example:<\/p>\n

\"Photo<\/a>
Original photography<\/figcaption><\/figure>\n
\"Photo<\/a>
Washed photography<\/figcaption><\/figure>\n

To make this effect revelant, we will use the lighten<\/code> blend mode in CSS.
\nThis blend mode multiply two channel (of colors) preserving in each channel the lightest colors.<\/p>\n

See demo<\/a><\/p>\n

How to?<\/h2>\n

I will use this HTML code. You can use the same one in order to have the same bases.<\/p>\n

<div class=\"image\"><\/div><\/code><\/pre>\n
The image I used will be applied as background image. We will use the background-blend-mode<\/code> property to merge the background color to background image.<\/p>\n
Just copy\/paste the following code CSS :<\/p>\n
.image {\r\n\twidth: 800px;\r\n\theight:\u00a0 600px;\r\n\tbackground: url(https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/11\/photo-atelier.jpg), #000;\r\n\tbackground-blend-mode: lighten;\r\n\tbackground-size: contain;\r\n}<\/code><\/pre>\n
You can use multiple background, like here, or simple background-color<\/code> plus background-image<\/code> properties. Actually, you see any differences with the original photo because we use the #000<\/code> color (black). The actual blend mode is a “keep the lightest colors between image and (black) color”-mode, so “keep the photography’s colors” \ud83d\ude42<\/p>\n
Now, replace black color by a medium gray, for example #777<\/code>.<\/p>\n
\"Photo<\/a><\/p>\n
Here, we lost to much colors, we have to be darker with the blended color.<\/p>\n
I let you test #222<\/code> or #333<\/code> colors. We get something good with those values.<\/p>\n
Let try to don’t use a gray shade for that merged color, but a cold or hot dark color. I tried first with a cold one, the one I prefer is #123456<\/code> because it’s easy to remember and its a good dark blue. We get the exactly desired effect.
\nOk, now test with the dark hot color #654321<\/code>, and compare.<\/p>\n
\"Comparaison<\/a><\/p>\n
I actually prefer the left (cold) one, for this photography anyway.
\nWith a hot or cold dark color, you will be able to upset a bad white balance in a photography.<\/p>\n
“Et voil\u00e0”<\/em>, you know how to do a washed effect. Easy? Isn’t it?
\nDon’t hesitate to play with the CodePen I made<\/a> for your.<\/p>\n
Same effect with a “content” image<\/h2>\n
You know the principles of that effect. You can now use one of those methods I will give you to make it on images declared on you HTML code.<\/p>\n
HTML code<\/h3>\n
Place an image inside a container.<\/p>\n
<div class=\"thumbnail\">\r\n\t<img src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/11\/photo-atelier.jpg\" alt=\"\">\r\n<\/div><\/code><\/pre>\n
This container and this code is the same for both methods I will present to you, one by one\u2026<\/p>\n
CSS basics<\/h3>\n
Here, the commun CSS code for both methods \ud83d\ude42<\/p>\n
.thumbnail {\r\n\tposition: relative;\r\n\tmargin: 0 auto;\r\n\twidth: 600px;\r\n\tmax-width: 100%;\r\n\tborder: 3px solid #123456;\r\n\tline-height: 0;\r\n}\r\n.thumbnail img {\r\n\tmax-width: 100%;\r\n\theight: auto;\r\n}<\/code><\/pre>\n
Our two methods will be the followings :<\/p>\n
    \n
  1. Apply a background color to the container, and apply the blend mode to the image.<\/li>\n
  2. Create a pseudo-element with :before<\/code> or :after<\/code>, give a background color to this pseudo-element and apply to it the blend mode.<\/li>\n<\/ol>\n
    1 – Container’s background color<\/h3>\n
    It’s my favorite method, because is blend mode is not supported by the web browser, we get a simple image without specific effect on it.<\/p>\n
    .thumbnail {\r\n\tbackground: #123456;\r\n}\r\n.thumbnail img {\r\n\tmix-blend-mode: lighten;\r\n}<\/code><\/pre>\n
    It’s pretty easy, as you can see. The image is blended with the background color of its container.<\/p>\n
    2 – Pseudo-element as blend layer<\/h3>\n
    This method adds a specific element to create a blend layer. It can be useful if the container background is already used for another effect. However, it creates a layer above the image: imagine if blend mode is not understanding by the web browser\u2026<\/p>\n
    .thumbnail:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0; right: 0; left: 0; bottom: 0;\r\n\tbackground: #123456;\r\n\tmix-blend-mode: lighten;\r\n}<\/code><\/pre>\n
    But, you have an alternative.
    \nWe will attribute a new value of z-index to our elements to make the image above the pseudo-element, and apply blend mode to the image.<\/p>\n
    .thumbnail:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0; right: 0; left: 0; bottom: 0;\r\n\tbackground: #123456;\r\n\tz-index: 1;\r\n}\r\n.thumbnail img {\r\n\tposition: relative;\r\n\tz-index: 2;\r\n\tmix-blend-mode: lighten;\r\n}<\/code><\/pre>\n
    Ok, you have now more lines of code, but this alternative offer us a more secure way to do the same effect with a pseudo-element.<\/p>\n
    You can play with another CodePen demo<\/a>.<\/p>\n
    Have fun!<\/p>\n
    See demo<\/a><\/p>\n
    Sources and inspirations<\/h2>\n