Find file
Fetching contributors…
Cannot retrieve contributors at this time
212 lines (120 sloc) 8.37 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vignettes with CSS3 Box Shadows | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="Paul Irish (why nobody else sends me such awesome stuff beats me), showed me yet another CSS3/HTML5 website. What is interesting is, the site author &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/book-reviews-for-july-2010-part-1.html" title="Book Reviews for July 2010 - Part 1">❬</a>
<a class="next" href="/wee-marquee.html" title="Wee! Marquee">❭</a>
<time datetime="2010-07-12T00:00:00-07:00" pubdate><span class='month'>Jul</span> <span class='day'>12</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></h1>
<div class="entry-content"><p><a href=""><img src="" alt="vignette.png" border="0" width="604" height="331"> </a></p>
<p><a href="">Paul Irish</a> (why nobody else sends me such awesome stuff beats me), showed me yet another <a href="">CSS3/HTML5 website</a>.</p>
<p>What is interesting is, the site author uses 4 empty divs to create the vignetting effect on the four corners of the viewport. I thought it would be a good use of box-shadow property to recreate the same effect, minus the 3 extra divs (<a href="">I am not the first to think of it</a>).</p>
<p>The caveat is, the CSS3 <code>box-shadow</code> property slows down webkit browsers considerably. So, until <a href="">this bug is resolved</a> this demo will only work on non-webkit browsers like Opera 10.5x, Firefox 3.5+ (IE 9 Platform Preview claims <code>box-shadow</code> support, but this demo does not render box-shadows there).</p>
<p>You could use the same technique to add vignetting to images. Here is how: </p>
<li><p>In your HTML document, add a wrapper element to the image, I have this: </p>
<pre><code>&lt;p class=&quot;vignette&quot;&gt;&lt;img src=&quot;image.jpg&quot;&gt;&lt;/p&gt;</code></pre>
<li><p>In your CSS file, add this:</p>
<pre><code>p.vignette {
position: relative;
p.vignette img {
display: block;
p.vignette:after {
-moz-box-shadow: inset 0 0 10em #666;
-webkit-box-shadow: inset 0 0 10em #666;
box-shadow: inset 0 0 10em #666;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
content: "";
<p>The <code>content: ""</code> is essential to <a href="">make sure the pseudo-element is generated</a>. <code>z-index</code> positions the pseudo-element above the image.</p>
<em>Die Ende!</em>
<p>Yes, I do wish webkit would hurry up and fix those horrible box-shadow bugs. Till then, you can indulge with me in this fantasy and <a href="">view the demo</a> :) </p>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2010-07-12T00:00:00-07:00" pubdate><span class='month'>Jul</span> <span class='day'>12</span> <span class='year'>2010</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];