The trick to all three of these is the CSS box-shadow. CSS box-shadows take the parameters: offset-x, offset-y, blur-radius, spread-radius, and color. The only required values however are offset-x and offset-y.
Gradient CSS & HTML
.grad_border { /* Gradient Border */ -moz-box-shadow:0 0 10px black; -webkit-box-shadow:0 0 10px black; box-shadow:inset 0 0 10px black; } <img src="/image.jpg" alt="Image" class="grad_border">
We create a shadow border with a radius of 10px and no offsets. This applies the border evenly to all sides of the image. It is necessary to create the border 3 ways so it will be cross browser compatible.
Drop Shadow CSS & HTML
.drop_shadow { /* Gradient Border */ -moz-box-shadow:5px 5px 10px black; -webkit-box-shadow:5px 5px 10px black; box-shadow:inset 5px 5px 10px black; } <img src="/image.jpg" alt="Image" class="drop_shadow">
The drop shadow css is the same, except this time we set an x and y offset of 5px.
The Border Overlay CSS & HTML
.border_overlay { /* Image Dimensions */ width:160px; height:160px; /* Moves overlay over Image */ position:relative; z-index:1; margin-bottom:-180px; /* Inner Shadow */ -moz-box-shadow:0 0 10px #000000 inset; -webkit-box-shadow:0 0 10px #000000; box-shadow:inset 0 0 10px #000000; /* Border width and color */ border:10px solid white; /* Border Opacity */ opacity:0.4; .filter:alpha(opacity=40); -ms-filter: 'alpha (opacity=40)'; } <div class="border_overlay"></div> <img src="/image.jpg" alt="Image"> </div>
This one is a bit more complicated. Notice the closed div above the image. In this example, we create the border and then position it over the image using a negative bottom margin. The box shadow's optional inset parameter is set causing the shadow to appear on the inside of the border. The div's opacity is set to 40% 3 different ways for cross-browser compatibility.
You might also be interested in
