Comments on: Pure CSS Vignette

By: Ben

Ben — Thu, 02 Jun 2011 21:17:26 +0000

why make 4 divs when you can make it in one?
That’s the beauty of inset box shadow in CSS3.
Here’s the code:
min-height: 100%;
min-width: 100%;
background-color: #DDD;
-moz-box-shadow: inset 0 0 150px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 150px 5px rgba(0,0,0,0.5);
box-shadow: inset 0 0 150px 5px rgba(0,0,0,0.5);

By: dan cave

dan cave — Mon, 09 May 2011 22:06:44 +0000

Thank you. I just read my comment back and it didn’t come across quite as light hearted as I meant it to

I always commend standards developers, especially you guys who push things forwards and then share with the rest of us.

I just made my vignette as quickly as I could with my out of date CSS.

Thank you for pointing out the jitteryness, I would love to fix it, but alas my script-fu is weak.

By: James Brocklehurst

James Brocklehurst — Mon, 09 May 2011 20:33:55 +0000

Hi Radu, I got to your site via the Masonry CSS post, then saw this, which got my attention ’cause I’d been working on something similar.

Anyway, getting to the point, I’m wondering if you could be able to achieve a similar result using a radial gradient (black to transparent) applied to an absolutely positioned :after pseudo element attached to the html element, and make the body a lower z-index. Haven’t tried but it may offer a way of avoiding all the divs?

I have some nice vignetted buttons that you may find interesting here

By: Radu Chelariu

Radu Chelariu — Mon, 09 May 2011 17:25:17 +0000

Good implementation! Yes, there’s a but. Actually two:
1) It’s a bit buggy if you scroll medium-fast, in Mozilla. The vignettes get a bit jittery.
2) It’s got Javascript The whole point of my post was that it’s about a pure CSS vignette. Not sure why you’d prefer using the JS version, especially since you get a few extra divs in there (not that my four are any better).

By: dancave

dancave — Mon, 09 May 2011 15:29:10 +0000

I made a version of this that works across the ‘main modern browsers’, resizes, scrolls, and has the nice curved adges this one doesnt… feel free to pull the code apart and use it if you know how…

Its basiclly CSS2, HTML 4, and some borrowed javascript to calculate some positions so that it works on scroll to.

http://www.colourpool.com/newtest/

The site is just something im working on. If you use it and feel like linking to http://www.colourpool.com then I would apreciate it. If not, thats fine too.

By: MyWhirledView

MyWhirledView — Thu, 10 Jun 2010 23:04:52 +0000

This worked for me in a couple browsers:

body {
margin:0; padding:0;height:100%;
box-shadow:inset 0 0 200px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 0 200px rgba(0,0,0,.7);
-webkit-box-shadow:inset 0 0 200px rgba(0,0,0,.7);
background-image:url(http://t2.gstatic.com/images?q=tbn:UkkysNWvrTEZdM);
}

By: Radu Chelariu

Radu Chelariu — Tue, 01 Jun 2010 17:49:08 +0000

Thanks, Bud. I’m glad you enjoy Sickdesigner and hope to see you around here some more!

By: Bud

Bud — Tue, 01 Jun 2010 03:32:49 +0000

I just love how your website is designed & structure. very creative & great articles. BLESS YOU

By: Radu Chelariu

Radu Chelariu — Thu, 29 Apr 2010 03:20:32 +0000

Chris: thanks for using the Vignette technique on your website, it’s great! Also, very good pointer with using position:fixed

By: Chris Armstrong

Chris Armstrong — Wed, 28 Apr 2010 21:16:33 +0000

I put it to use one my site here http://chris-armstrong.com/ (still a work in progress). Have a few suggestions…
- Make it position:fixed instead of position:absolute
- add top:0; to #left and #right

By: Radu Chelariu

Radu Chelariu — Sat, 24 Apr 2010 12:26:49 +0000

@Chris Armstrong: Hi Chris, I’m glad you like the vignette effect! Yes, you could use a Radial Gradient but you’d have to have apply it behind the content. If you’d position this Radial Gradient div above all the content, users couldn’t select anything, because you’d essentially have another layer above everything on your site. This is why I prefer the 4 div approach. Sure, there’s a bit too much markup but it ensures that the design doesn’t get in the way of usability. Still, your call!

By: Chris Armstrong

Chris Armstrong — Sat, 24 Apr 2010 11:44:51 +0000

Great tutorial thanks, its perfect for an effect I’m trying to get on my site redesign. Would it be possible to use one Radial Gradients instead of 4 Linear ones?

By: Radu Chelariu

Radu Chelariu — Thu, 22 Apr 2010 13:54:39 +0000

@Sean: heeey, it’s nice to see a Linux user here! I thought you all were ignoring me or something Just kiddin’ it’s nice to have you!

By: Sean

Sean — Thu, 22 Apr 2010 13:52:51 +0000

Very nice.

FYI it works in Win Firefox 3.6.3 but not in Linux Firefox 3.5.9 (but it degrades fine).

Just found your site, looks great, will be back.

By: Eric

Eric — Fri, 16 Apr 2010 21:00:53 +0000

Neat little effect. Another one to hold on to! Thanks.

By: Radu Chelariu

Radu Chelariu — Fri, 16 Apr 2010 09:11:51 +0000

@Adam: that wouldn’t work out as well, since the vignette would either be fixed in size or the images would be stretched out. Also, that would require the use of 9 images, which isn’t very nice to maintain.
What version of Firefox are you using? It should work ok for anything above 3.0.
Congratulations on being a Photographer and Designer, both with capitals.

By: Adam

Adam — Fri, 16 Apr 2010 09:07:10 +0000

It’s a cheap look that does not work in FireFox or IE – the 2 major browsers of the net (atleast didnt work in your example). Do you want to know a nice cross browser solution? Do the effect in photoshot. And that’s coming from a Photographer and Designer.

By: Kevin Rapley

Kevin Rapley — Fri, 16 Apr 2010 08:25:17 +0000

@Denis/Radu you can also add the argument for progressive enhancement. Why not do it? All Webkit browsers and Mozilla can render these styles, and likely are future browsers. IE and older browsers will have a lesser user experience, yes, but they still receive an experience (they get to see the photos/images) and an experience they are use to. Many IE users are unaware that websites have rounded corners and drop-shadows in more modern browsers.

By: Radu Chelariu

Radu Chelariu — Fri, 16 Apr 2010 07:58:53 +0000

@Denis: because one browser shouldn’t hinder progress; because IE9 is just around the corner; because we’ve been catering to IE for far too long; because other browsers are gaining ground, user wise, by the minute. Just a few days ago, Opera hit 100 milion users, for example. Just a few ideas.

By: Radu Chelariu

Radu Chelariu — Fri, 16 Apr 2010 07:56:25 +0000

@Hans: I am aware of the proprietary IE filter properties but I decided to not include them in this tutorial. The reason is simple: it’s not valid. Also, if I’m not mistaking, the filter properties apply only to IE versions 7 an below. Though I could be mistaking.

By: Denis Samoilov

Denis Samoilov — Fri, 16 Apr 2010 07:55:37 +0000

Nice, but why do we need it, if it doesn’t work even in ie8?

By: Hans Chr. Reinl

Hans Chr. Reinl — Fri, 16 Apr 2010 07:54:06 +0000

Hey,
I had just a thought for IE. Isn’t it possible to do the gradient-stuff with a filter?

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=’#bed6ce’,endColorstr=’#8ccbb6′);

This works with > IE 6. I don’t know how it supports transparencies.
It’s not perfect but it’s better than leaving IE totally out.

By: Radu Chelariu

Radu Chelariu — Fri, 16 Apr 2010 07:41:51 +0000

@Hugh: good point.
@Kevin: you know what? I think it could be done! With an inverse box-shadow directly on the body tag, one could, theoretically, create the same effect without extra divs. I’ll give your idea a bash and if it works out, I’ll post an update. Nice catch!

By: Kevin Rapley

Kevin Rapley — Fri, 16 Apr 2010 07:39:05 +0000

Could this not be achieved with box-shadow: inset 0 0 1em black; ? I am not a big fan of using extraneous markup to achieve visual design. The HTML should be semantic with style kept separate. Markup should never be edited to assist styling. I am pretty sure box-shadow that I mentioned can be used either directly to the image tag (not tested) or on just one div absolutely positioned over the image. We should always strive to avoid tag soup.

By: Hugh Guiney

Hugh Guiney — Fri, 16 Apr 2010 07:36:24 +0000

Pretty cool, but I’m not too keen on the use of non-semantic divs. I wonder if there’s another way to achieve the same effect.

By: Radu Chelariu

Radu Chelariu — Thu, 15 Apr 2010 14:37:49 +0000

Hi Brennan, that’s actually pretty clever, but I imagine browser rendering turned it into a freaky pixel nightmare. The technique in this post is efficient and easy to maintain/modify but it’s not without it’s downsides; most of which come from the fact that CSS3 has only yet hit puberty. In about a year or so I imagine we’ll be able to fully use CSS3 in production without any major issues.

By: Brennan

Brennan — Thu, 15 Apr 2010 14:29:54 +0000

I achieved the same effect years ago by stretching a background that had the gradient. Needless to say it was really inefficient and nasty.

This, I imagine, would be much more efficient.

By: Radu Chelariu

Radu Chelariu — Wed, 14 Apr 2010 13:18:55 +0000

@everyone: thanks for the great responses and the appreciation!

By: Chris

Chris — Wed, 14 Apr 2010 13:15:55 +0000

Nice man, really useful I’ve indexed at toptuts.com to share with everyone else

By: Mary Lou

Mary Lou — Tue, 13 Apr 2010 16:50:25 +0000

Oh, I love this effect! Thanks for sharing it!