Tag Archives: box-shadow
CSS3 Box Shadow in Internet Explorer [Blur-Shadow]
For a recent project I was given the task of creating a lightbox style help dialog. The dialog was intended to highlight content of an odd or unknown size in addition to the more controlled information box. Essentially a figure in the shape of 2 adjacent rectangles of variable sizes that needed to be highlighted. The backbreaker — the 8 sided popup needed a large, opaque & diffuse drop shadow to make it stand out off the content.
This was the perfect use case for CSS box-shadow, but its also a public facing promotional site that for good reasons couldn’t just thumb its nose atMicrosoft Internet Explorer. The value proposition for any new CSS property – to make things like shadows and gradients easy to develop and manage with one rule replacing old complex solutions – is lost if you still have to code for that old complex solution juggling multiple PNG images and layering in added markup. Still, that work sounded painful to write for IE6, IE7 & IE8 as well as Firefox, Safari and Chrome so I started looking for an alternative in the proprietary MS filters which are supported in Internet Explorer 5.5 and up.
This entry was posted in project52, web and tagged blur, box-shadow, css, drop shadow, ie filters, msie, p52, tutorial, web design, web development. Bookmark the permalink.
CSS3 Trials: Box-Shadow And More
With some recent projects — like the redesign of Hike New Jersey and a little Flickr View Larger tool — I’ve had the opportunity to try a few bleeding edge techniques as a means of enhancing the look of a site while keeping code and maintenance down. In his recent book Handcrafted CSS, Dan Cederholm calls this ‘progressive enrichment’ — or providing a little extra spice in the visuals for the few browsers that can follow along, while functionality, page structure, and general styling rules remain at some stated baseline across browsers. While working with these new properties like box-shadow and rgba colors I hit a few quirks that I thought I’d share.
This entry was posted in web and tagged box-shadow, browsers, bugs, CSS3, Handcrafted CSS, quirks, rgba, web design, web development, web standards, WebKit. Bookmark the permalink.
Site Launch: Hike New Jersey
A little while back I mentioned that I had reclaimed an old domain of mine and was looking for something to do with it. It took about two months to pull the free time together to design and build it, but I’ve just relaunched the site: Hike New Jersey.
This entry was posted in outdoors, web and tagged blog, box-shadow, css, CSS3, hikenj, hiking, local, new jersey, NJ, photography, resource, site launch, text-shadow, trails, updates. Bookmark the permalink.
