Posts made in April, 2013


While designing my portfolio page, I wanted to bring in a simple desaturate effect to my images. After a little searching, I found that this seemed to be a very easy task, so long as I was using some kind of Javascript framework. This seemed to be a bit overkill for my purposes so I set to trying to find a pure (no script) way to accomplish this task. After some research, I found my method: CSS Transitions. Over the last year or so, the capabilities of web browsers have risen to accommodate the basic use of CSS Transitions in every up-to-date browser. These include size, position, and for the purposes of this tutorial style. For this tutorial, you need 4 things: some markup, a little CSS, and two images, one a de-saturated version of the other. To see a demonstration, check out my portfolio. Images: Markup: CSS: div.image { position: relative; width: auto; height: 100px; float: left; border: solid 2px #333; } div.image img { position: absolute; display: block; top: 0; left: 0; } div.image:hover img.bw { opacity: 0; -webkit-transition: opacity .1s linear .1s; -moz-transition: opacity .1s linear .1s; -o-transition: opacity .1s linear .1s; transition: opacity .1s linear .1s; visibility : hidden; } div.image img.bw { z-index: 21; -webkit-transition: opacity .1s linear .1s; -moz-transition: opacity .1s linear .1s; -o-transition: opacity .1s linear .1s; transition: opacity .1s linear .1s; visibility : visible; } div.image img.color { z-index: 20; } One thing I should explain at this point is that the code in this tutorial does not really transition “between” the two images, but rather creates the illusion of a between transition. We accomplish this by positioning the two given images on top of one another and then adjusting the opacity property of the “top” black-and-white image, revealing the “bottom” colored image. In order to better explain this, let’s break everything down to two separate problems: we need to position the images on top of one another, and we need to be able to transition between the two. First, you can position two items on top of each other using a little-known CSS trick. Normally, when using the code position: absolute in CSS, it causes the element to jump out of the flow of a website and set its positioning based on the origin point (0,0) of the browser. This usually is the top-left of a browser, causing all kinds of problems for center-oriented or fluid-width websites. Now, with this trick, you can fool the browser and change the origin point for any object. Starting with the container (Line 1, markup and css), set your CSS to position: relative, then...

Read More