Blog Post: CSS Black & White Transitions

Red Deer & Blackfalds Web Design Writes:

Once again, trying to push the envelope for the possibilities of working with CSS on your website is what we as Web Developers wake up and think about (right after coffee…). In some instances you get the opportunity to work with some very graphic heavy websites, with lots of pictures and interesting elements. In this case it’s fun to mix things up a little bit and try out some new ideas to add to the User Experience of the website.

Now most designers/developers have access to a plethora of photo editing and vector programs, but ultimately the powers of CSS can allow us to make photos really special and don’t involve other softwares that can slow down our development time. Below is a very simple script complete with HTML example and CSS code for changing an image resolution to a Black & White tone.

Fair warning. This is a new addition to CSS3 and is not available on all browsers/windows combinations. Development is never perfect for all situations, but included are some fixes to help make this rule work on different browsers. I will update this article when all combinations are account for*

Standard Black & White

Standard Image
CSS Edited Image
 

HTML
<div class=”split-page-left” align=”center”>
<em>Standard Image</em>
<img src=”http://redanchorwebdesign.com/wp-content/uploads/2014/11/black-and-white-css-transitions-red-deer-web-design.jpg” class=”standard-photo-article” />
</div>

<div class=”split-page-right” align=”center”>
<em>CSS Edited Image</em>
<img src=”http://redanchorwebdesign.com/wp-content/uploads/2014/11/black-and-white-css-transitions-red-deer-web-design.jpg” class=”standard-photo-article bw-opacity-article” />
</div>


CSS

img.standard-photo-article {width: 80%; margin-top: 10px}

img[class*=”bw-opacity-article”] {
filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0’/></filter></svg>#grayscale”);
filter: gray;
-webkit-filter: grayscale(100%);
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;
filter: alpha(opacity=90);
-moz-opacity: .9;
-khtml-opacity: .9;
opacity: .9;
-webkit-transition: all 1.0s ease;
-webkit-backface-visibility: hidden;}

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)