CSS Filter Effects in Action

Ever since CSS filter effects landed in WebKit, I thought about theirs practical implementation. How will they fit with the current web design trends? At this time, my initial impressions are that the best way to showcase the power of CSS filters is something like an image gallery.

With so many CSS filters to choose from, it will be fun to create image galleries in the future. Further in this article we’ll create a simple image gallery using CSS filters and the CSS3 :not selector.

View demo

Whilst at the beginning we had just WebKit nightlies support, now you can view the filter effects usingChrome Canary too. I encourage you to download it in order to view the CSS filter effects in action. Also, I’m pretty sure that soon we’ll see filters support also in stable Chrome’s releases.

Here are the current filter effects: grayscale, sepia, saturate, hue-rotate, opacity, invert, brightness, contrast, blur, drop-shadow. Read more about them here.

In this article we’ll be using just the blur and grayscale effects in order to create our small gallery. Also, the CSS3 :not selector will help us here as you’ll see below.

The HTML

Getting back to our image gallery, let’s see how the markup looks like:

view source

print?

<ul class="gallery">

<li><img src="jpg"></li>

...

<li><img src="jpg"></li>

</ul>

The CSS

I think it’s the first time in a long time when I don’t have too many CSS lines to show you. This time, less is more :)

The interesting part is related to the .gallery:hover li:not(:hover) selector. When you hover over the list, we’ll assume you’ll hover also over a list element and we’ll apply some filters to the non hovered list elements.

This is how the other images looks like when the tulip image is hovered.

view source

print?

.gallery{

list-style: none;

margin: 50px auto; padding: 0;

width: 642px;

font-size: 0; /* fix inline-block spacing */

}

.gallery li{

display: inline-block;

*display: inline;

zoom: 1;

width: 200px; height: 150px;

margin: 2px;

border: 5px solid #fff;

box-shadow: 0 2px 2px rgba(0,0,0,.1);

transition: all .3s ease;

}

.gallery:hover li:not(:hover){

-webkit-filter: blur(2px) grayscale(1);

opacity: .7; /* fallback */

}

For this example I chose to use inline-block instead float and font-size: 0 is my “kung-fu” move to fight the space between inline-block elements.

Regarding degradation, here’s my method:

·         If the browser support CSS filters and :not, then apply filters and also decrease opacity.

·         If the browser does not support CSS filters (currently all except Canary) but it does support the :not, then just decrease opacity.

·         If the browser is too old and does not support neither opacity nor :not selector, then do nothing.

Browser support

Here’s the current support for the CSS filter effects: Chrome 110 (currently Canary) and Webkit nightly.

Conclusion

The future sounds good. We already have a Flexbox Module and CSS Filters, I like to think that in the near future we’ll also have variables and the CSS parent selector ready to use. Exciting times for web developers, don’t you think so?

Venn Diagram entirely in CSS

A friend of mine alerted me this weekend to just how much I have a weird fascination with Venn diagrams. I decided to roll with it. So yeah, I have an irrational love of Venn diagrams. But that begs the question, can I make a Venn diagram with just CSS?

I found a couple of examples out there:

·         Dusting off front-end skills: CSS Venn Diagram

·         HTML And CSS Venn Diagram

But I felt like they had a bit too much fluff in the HTML markup. Not that there is anything technically wrong with their implementations. I prefer complexity in my CSS and not in my HTML. It's probably just a subjective thing, but I do.

So how do you do it?

First you create 3 divs. 1 for each Venn circle, and 1 for the overlap section. Each div contains a p with content in it.

view source

print?

<div id="venn">

<div><p>People Who like Venn Diagrams</p></div>

<div><p>People who read my blog articles</p></div>

<div id="overlap"><p>Just me.</p></div>

</div>

Then you go to style each of the circles. Give them matching heights and widths, and a border radius of half of the height. This creates the circle. Then give each one an opacity below  This will ensure that when they overlap they will form a new color.

view source

print?

#venn div{

height: 360px;

width: 360px;

border-radius:180px;

-khtml-border-radius:180px;

-moz-border-radius:180px;

-webkit-border-radius:180px;

border: 1px solid #000;

display: table;

float: left;

opacity: .6;

}

I then created two rules based on the nth child css selector to color each of the circles. I also padded to ensure that there would be a space to write in the overlap section.

view source

print?

#venn div:nth-child(1){

background-color: #FF0000;

color: #FFF;

padding-right: 60px;

}

#venn div:nth-child(2){

background-color: #0000FF;

color: #FFF;

margin-left: -60px;

padding-left: 60px;

}

Finally I styled the overlap section using relative positioning and pulled it back towards the center.

view source

print?

#venn #overlap{

border: 0;

height: 30px;

width: 30px;

left: -350px;

top: 150px;

color: #ccc;

position: relative;

text-align: center;

z-index: 10;

opacity: 1;

}

The real trick is to watch the pixel counts because a couple are directly related.

To create a circle:

·         width must equal height

·         border radius must equal 50% of width.

To overlap circles:

·         Circle 2 must have negative x left margin

·         (Or Circle 1 must have negative x right margin)

·         Each circle must have x padding-left or x padding-right to ensure its text doesn't spill over borders

It looks like the example works across modern browsers, including IE 9, but not previous versions.