Transparent Border with CSS

So Chris Coyier over at CSS-Tricks.com has an interesting method for creating transparent borders using border clip. I found this method to be a little unreliable in some browsers with some border widths. This is my version, it’s totally manual so if you don’t know what you’re doing with CSS this probably won’t help much.

Basically, I’m setting a container to be positioned absolutely. Then I set a box inside to contain all the other divs. I named this “dialog container”, then I created three boxes inside of that and stacked them on top of eachother. the container is positioned relatively, so if you position all three boxes inside as absolute they will stack over top of eachother. I put the drop shadow on bottom. This has no background or anything, its just dropshadow. I sandwich semi-opaque dive in the middle and make it 1 pixel wider than the rest of the divs. Then I layer on a third box which contains content and has a background color. In this case, a gradient.

This allows us to have a dropshadowed semi-transparent div without making the content change opacity, all in css3 and html5. Whabam bitches!

Check out the demo if you do shit like that…

The CSS…

/*******************************************************************************
                                    DIALOG
*******************************************************************************/

.dialog-positioner {
    position: absolute;
}

.dialog-container {
    position: relative;
}

.dialog-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    -moz-box-shadow: 0px 2px 8px #000; /* Firefox */
    -webkit-box-shadow: 0px 2px 8px #000; /* Safari, Chrome */
    box-shadow: 0px 2px 8px #000; /* CSS3 */

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    z-index: 1;

}

.dialog-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    padding: 1px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
    background-color: white;

    z-index: 2;
}

.dialog {
    position: relative;
    top: 1px;
    left: 1px;
    width: 332px;
    padding: 30px 22px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    background: #3f3b3d;
    background: -webkit-gradient(linear, left top, left bottom, from(#3f3b3d), to(#2c292b));
    background: -webkit-linear-gradient(top, #3f3b3d, #2c292b);
    background: -moz-linear-gradient(top, #3f3b3d, #2c292b);
    background: -ms-linear-gradient(top, #3f3b3d, #2c292b);
    background: -o-linear-gradient(top, #3f3b3d, #2c292b);

    z-index: 3;

}

The HTML…

<div class="dialog-positioner" id="agency-positioner">
                    <div class="dialog-container">

                        <article class="dialog">
                            <h2>HEY, IT'S YOUR AGENCY.</h2>
                            <p>What would you like to see in the building over the next year?</p>
                            <p>Take a look at our current client roster and tell us who you think is missing.</p>
                            <h3>Mouse Over to Explore the Agency</h3>
                        </article>
                        <div class="dialog-border"></div>
                        <div class="dialog-shadow"></div>
                    </div>
                </div>

DEMO

NOTE: something that would make this bitchin’ cool, is if you put a svg in the middle of this layer and put a gaussian blur or something on it so it filtered things behind it… I didn’t have time for that though.