Matt RaibleMatt Raible is a writer with a passion for software. Connect with him on LinkedIn.

The Angular Mini-Book The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.

Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

For book updates, follow @angular_book on Twitter.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: Angular, Bootstrap, and Spring Boot. All of these frameworks are wrapped up in an easy-to-use project called JHipster.

This book shows you how to build an app with JHipster, and guides you through the plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks so you understand the underpinnings of your great application.

For book updates, follow @jhipster-book on Twitter.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

RECENT ENTRIES


Tag Cloud


abbie appfuse birthday denver family grails gwt jack java javascript jhipster jsf linkedin maven roller skiing softwaresummit spring springmvc struts2 travel trish vacation webframeworks wicket
« Happy Anniversary... | Main | Google Zeitgeist »
Friday April 23, 2004

CSS Drop Shadows

A List Apart has a new article on how to make CSS Drop Shadows that work in IE. The first article shows how to do it for all the other browsers. I dig the technique, so I've decided to use it on this site. To add it, all I did was add the following to the <head> of this page: 

<style type="text/css">
    div.alpha-shadow {
        clear: both;
        float: left;
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow.gif) no-repeat bottom right;
        margin: 5px 0 0 10px;
    }
    div.alpha-shadow div {
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow2.png) no-repeat left top !important;
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow2.gif) no-repeat left top;
        float: left;
        padding: 0px 6px 6px 0px;
    }
    div.alpha-shadow img {
        background-color: #fff;
        border: 1px solid #a9a9a9;
        padding: 4px;
        margin: 0;
    }
</style>
<!--[if gte ie 5.5000]>
<link rel="stylesheet" type="text/css" href="http://www.alistapart.com/articles/cssdrop2/ie.css" />
<![endif]-->

Then I wrapped the following image with:

<div class="alpha-shadow">
  <div><img src="..." alt=""/></div>
</div>

If I decide I like this, I'll make sure and download the images/stylesheets locally so not to hog bandwidth from alistapart.com. Too bad there's not a technique to make text drop-shadows work. To see what I mean, see my Struts Resume demo. All the <h1> tags (titles) should have a drop-shadow - and they do in Mozilla, Firefox and Safari (but no go in IE).

The real question is - how do I get it to NOT float:left, but still get the drop-shadows to work? I guess I'll have to ask that question on alistapart.com.

Hmmmmm, my version doesn't work in Safari, what's up with that?!

Posted in The Web at Apr 23 2004, 07:59:47 AM MDT 8 Comments
Comments:

Not working on Moz 1.5 either. I see a nice 'border' added around your little cutie, but no drop shadow. I see you reversed the margin: from "10px 0 0 5px" to "5px 0 0 10px". So you aren't pushing the image so far down, but more to the right? Also, you've added 4px of padding to the img, could htat be doing anything?

Posted by Lance on April 23, 2004 at 04:03 PM MDT #

Firefox 0.8 not showing the shadow, only the border.

Posted by Gabriel Mihalache on April 24, 2004 at 04:03 PM MDT #

Hey Matt, I figured out your problem here. For some reason the ALA URL without the www prefix initially comes back with 1 x 1 blank images. Once I added the "www." to the beginning of the image URL, the images loaded correctly as 800 x 800. Once I did this, even the image on your site showed the shadows correctly (browser or proxy cache I suspect). Therefore, I surmise that you can update those URL's with www and all will be correct, although I suspect a better solution is to relocate them to your site. Ciao, Chris

Posted by Chris Custine on April 25, 2004 at 03:47 PM MDT #

Thanks Chris. I also found another way to do this without the IE hack.

Posted by Matt Raible on April 27, 2004 at 03:35 AM MDT #

Did you ever figure out how to make the drop shadow without the float? Scott

Posted by Scott McClure on June 30, 2004 at 02:46 AM MDT #

Nope. But I never looked much beyond this post. ;-)

Posted by Matt Raible on June 30, 2004 at 07:16 PM MDT #

Hey this looks really cool. The shadows are always welcome on web pages with your shadow effect. Best part about this being: you dont need to manually edit all the images. Just wrap ur img tag inside the divs and you have it! Thanks for sharing ur thought too..

Posted by prem ypi on February 21, 2009 at 06:00 PM MST #

Hey this looks really cool. The shadows are always welcome on web pages with your shadow effect. Best part about this being: you dont need to manually edit all the images. Just wrap ur img tag inside the divs and you have it! Thanks for sharing ur thought too..

Posted by prem ypi on February 21, 2009 at 06:01 PM MST #

Post a Comment:
  • HTML Syntax: Allowed