I am having an unexpected 1px margin under a div residing in a fixed container. This issue only occurs in Edge (possibly in IE as well). After some testing, I was able to reproduce the bug with a bare bones example.
This picture, which you can reproduce running the snippet below, is composed of 3 square divs inside a fixed div. Firefox
In Edge, you can "fix" this issue by either disabling the property top: 50% in the container div, or by disabling border-*-right-radius: 6px in the divs inside it. Naturally, this isn't a fix, because I need both these properties to effectively implement this design.
How can I fix this? I tried adding borders the same color as the background, but the background is not opaque.
Edit: If you can't see it right away in IE/Edge, try to select the container div and slowly increase the value of the top property. In IE11, changing it from 5% to 6% already made the problem obvious again.
.box {
background-color: rgba(0,0,0,0.15);
height: 70px;
line-height: 70px;
text-align: center;
border-right: 1px solid rgba(0,0,0,0.2);
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
.box:first-child {
border-top-right-radius: 6px;
border-top: 1px solid rgba(0,0,0,0.2);
}
.box:last-child {
border-bottom-right-radius: 6px;
border-bottom:1px solid rgba(0,0,0,0.2);
}
.main {
width: 70px;
position: fixed;
left: 0;
top: 5%;
}
<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Try to use border on parent div: http://jsfiddle.net/gtf0fa8n/1/
Border radius on parent does not brake inner divs rendering in IE
.main {
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: 0;
border-radius: 0 6px 6px 0;
overflow: hidden;
}
.box {
background-color: rgba(0, 0, 0, 0.3);
height: 70px;
line-height: 70px;
text-align: center;
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
Just give boxshadow of 1px with same color on bottom.
box-shadow: #2a2e37 0px 1px 0px;
Related
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
i'm trying to add shadow effect only for single border while other borders have sharp borders. Does CSS has this power or are there other techniques i don't know?
#panel {
-moz-box-shadow:0 1px 10px #00c6ff;
-webkit-box-shadow: 0 1px 10px #00c6ff;
box-shadow:0 1px 10px #00c6ff;
width:25%;
height: 50px;
background-color:#161616;
color: #fff;
margin: 20px auto;
text-align: center;
}
HTML
<div id="panel">
<p>Panel Content</p>
</div>
i'm trying to do something like this
Instead of a box-shadow, you could use a :pseudo-element with linear-gradient.
#panel {
position: relative;
width: 25%;
height: 50px;
background-color: #161616;
color: #fff;
margin: 20px auto;
text-align: center;
}
#panel:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top : -10px;
left: 0;
background: linear-gradient(0deg, #00c6ff, #00c6ff calc(100% - 20px), rgba(0, 198, 255, 0));
z-index: -1;
}
<div id="panel">
<p>Panel Content</p>
</div>
Like this:
box-shadow: 0px -8px 5px -5px #00c6ff;
The fourth value is the spread radius. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
So basically you make the shadow smaller than your box, and make sure it sticks out on one side only.
shadows are not related to borders. They are independent of each other. There's no such thing as a "border shadow".
I have the following div stricture.
<div class="profile_outer>
<div class="profile"></div>
</div>
And the following CSS
.profile_outer {
border: 2px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 100;
}
.profile_outer:hover {
background-color: blue;
}
you can find the fiddle here
Both divs do not have a background, the background is determined by an image on some parent div. So they are transparent.
So, on a hover I just want to change the background of the outer profile. It only works if I also change the background color of the inner div using
.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}
I tried the following combinations of these:
.profile_outer:hover .profile {
display: block;
background : none !important;
background-color:transparent;
}
Thanks for your help.
Well, I guess that the effect that you want is this
.profile_outer {
border: 2px solid #660000;
border-radius: 5px;
overflow: hidden;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
border-radius: 5px;
z-index: 100;
}
.profile:hover {
box-shadow: 0px 0px 0px 1000px blue;
}
fiddle
... but you should review your ideas about transparency ...
After re-reading the question, I think that Moob's sugestion is right, the answer to the question is
.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
Set the child's background to #fff and it'll work.
Your problem happens because the default background color for all elements is transparent
There is one other way to get this effect but it could be really annoying to implement. I'm only offering it up as a solution for completeness. Effectively you have the SAME background image on the bit that is supposed to appear masked:
body {
margin:0px;
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}
http://jsfiddle.net/PdQFJ/1/
I guess the title is kind of hard to understand, so I'll explain.
I am trying to achieve this effect:
(a box which has rounded corners and its border, which also has rounded borders).
I've managed to do this, by using the background-clip property:
(rounded corners for border but not for inner box)
The question is, how can I achieve rounded corners for the inner box?
Thank you!
EDIT
The HTML I am using:
<header class="body template-bg template-border radius-all">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
And the CSS:
.radius-all {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.template-bg {
background: #FFF;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.template-border {
border: 5px solid rgba(255, 255, 255, 0.2);
}
Inner border calculations
First, you'll need to remove -vendor-background-clip: padding-box or set them to border-box the default in order to achieve the inner border radius.
The inner border radius is calculated as the difference of the outer border radius (border-radius) and the border width (border-width) such that
inner border radius = outer border radius - border width
Whenever the border-width is greater than the border-radius, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the inner-border-radius, so you'll need to calculate it manually.
In your case:
inner border radius = 6px - 5px = 1px
Your new CSS should be:
.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }
Simply subtract the border-radius (6px) values from the border-width value (5px) in order to achieve your desired inner-border-radius:
Code that works for me
Tested on Firefox 3.x, Google Chrome, and Safari 5.0
.radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */
Adding color overlays in JavaScript
<script type="text/javascript">
var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;
// insert opacity decreasing code here for hexadecimal
var header = document.getElementsByTagName('header')[0];
header.style.backgroundColor = bodyBgColor;
</script>
I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.
Applying General Borders
Are you using a separate box <div> for your border through its background property? If so, you'll need to apply border-radius and its vendor specific properties on both the border box and the inner box:
<div id="border-box" style="border-radius: 5px;">
<div id="inner-box" style="border-radius: 5px;">
</div>
</div>
A much more efficient way would simply have the inner-box manage its own border:
<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
<!-- Content -->
</div>
CSS-wise, you could just declare a .rounded-border class and apply it to every box that will have rounded borders:
.rounded-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
And apply the class to any boxes that will have rounded borders:
<div id="border-box" class="rounded-borders">
<div id="inner-box" class="rounded-borders">
</div>
</div>
For a single box element, you'll still be required to declare the border size in order to be shown:
<style type="text/css">
#inner-box { border: 4px solid blue; }
</style>
<div id="inner-box" class="rounded-borders">
</div>
Another solution is to have matching inner and outer borders combined with border-radius is to "fake" the border using the <spread-radius> value of the box-shadow property. This produces a solid shadow which can easily pass for a regular border.
For instance, to achieve a 4px border and a 4px white border radius, try this:
/* rounded corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;
If you want to add a "real" drop shadow to the entire container, you can simply chain your shadow statements like so:
/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
Note: Keep in mind here that the order of the statements is the order in which it will be rendered.
The only thing to beware of is that the initial "faux border" will overlap the first X pixels (where X is the width of the border) of any shadow you want beneath it (and combine, if you're using RGBa opacity on it below 100%.)
So it won't work in all situations, but it'll get the majority. I use this pretty frequently when regular borders are not ideal.
Since there is no such thing as inner-border-radius for CSS, the browsers default it to border-radius - border-width. If you don't like that, the typical solution is to create two divs with borders to mimic the inner border radius but this solution brings in more design into the html. It is also a pain if it's a common border template used through out the site.
I managed to figure a way to keep it all in css by producing the inner div using :after and content: "". So for your case it would be:
.template-border {
position: relative;
border-radius: 5px;
background-color: #000;
border: 10px solid #000;
z-index: -2;
}
.template-border:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #FFF;
z-index: -1;
}
Most of the solutions on this page are from the web stone ages (before 2013 - i.e. even before IE11).
Since IE11, the way to do this is easy...
Just in case someone is Googling for this answer after 2013 (it's almost 2020 today) and got sent here, here is the most simple, compatible, and easy way to do this, even if you need to support IE11...
(Feel free to change the px values for the look you want, or better yet, use variables and transpile with Stylus or SASS)
Example HTML...
<div class="wrapper">
<div class="content">
your content goes here
</div>
</div>
Example CSS...
.wrapper {
border-radius: 25px;
border: solid 25px blue;
background-color: blue;
}
.content {
border-radius: 10px;
background-color: white;
}
...Presto.
The problem is not the coding of the CSS but the mathematics of a circle.
Essentially your border-inner-radius (I know this property does not exist) is equal to the border-radius - border-width.
Quite simply work out what you want your inner radius to be and then add the width of the border to achieve the desired effect.
border-inner-radius + border-width = border-radius
Based on Leo Wu's idea, here it is my solution:
.my-div
{
background-color: white;
border: solid 20px black;
border-radius: 10px;
box-shadow: 0 0 10px black;
height: 100px;
left: 30px;
position: relative;
top: 20px;
width: 200px;
}
.my-div:before
{
background-color: white;
border-radius: 5px;
content: "";
display: block;
height: calc(100% + 20px);
left: -10px;
position: absolute;
top: -10px;
width: calc(100% + 20px);
z-index: 1;
}
.some-content
{
height: calc(100% + 20px);
left: -10px;
position: relative;
top: -10px;
width: calc(100% + 20px);
z-index: 3;
}
.some-header
{
background-color: green;
border-radius: 5px 5px 0 0;
height: 30px;
}
<html>
<body>
<div class="my-div">
<div class="some-content">
<div class="some-header">my title</div>
<div>some other content</div>
</div>
</div>
</body>
</html>
You need to have two div elements, one inside the other, and use a cross browser rounded corner css, like this:
.small-rounded {
border: 1px solid ##000;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}
Today I run into this "problem". My solution uses two divs and overlaps the inner div on the outer one.
A good thing about my solution is that it does not alter the background color (it can be transparent).
You can control the outer border radius by modifying the outer-border class and the inner border with the inner-border class.
.outer-border {
border: 10px solid #20b2aa;
border-radius: 5px;
display: flex;
flex-direction: column;
min-height: 100px;
}
.inner-border, .inner-border-evidence {
flex: 1;
border: 10px solid #20b2aa;
border-radius: 30px;
margin: -9px;
}
.inner-border-evidence {
border-color: #0a3b8a;
}
<div class="outer-border">
<div class="inner-border">
</div>
</div>
<br />
<p>Here you can see how the inner div overlaps the outer div.</p>
<div class="outer-border">
<div class="inner-border-evidence">
</div>
</div>
Another idea is to consider multiple radial-gradient to simulate the inner radius and you can control the outer and inner radius like you want without the need of any extra element:
.box {
width:150px;
height:150px;
margin:10px;
border:10px solid red;
border-radius:10px; /* Outer Radius*/
background:
radial-gradient(farthest-side at bottom right,#0000 98%,red) top left,
radial-gradient(farthest-side at top right,#0000 98%,red) bottom left,
radial-gradient(farthest-side at bottom left ,#0000 98%,red) top right,
radial-gradient(farthest-side at top left ,#0000 98%,red) bottom right,
blue;
background-size:25px 25px; /* inner Radius*/
background-repeat:no-repeat;
background-origin:padding-box;
}
<div class="box">
</div>
You can also have different values for each side:
.box {
width:150px;
height:150px;
margin:10px;
border:10px solid red;
border-radius:10px; /* Outer Radius*/
background:
radial-gradient(farthest-side at bottom right,#0000 98%,red) top left / 30px 30px,
radial-gradient(farthest-side at top right,#0000 98%,red) bottom left / 20px 20px,
radial-gradient(farthest-side at bottom left ,#0000 98%,red) top right / 50px 50px,
radial-gradient(farthest-side at top left ,#0000 98%,red) bottom right/ 10px 10px,
blue;
background-repeat:no-repeat;
background-origin:padding-box;
}
<div class="box">
</div>
You need to make the border-radius to a value greater than the border-width until you start to see a curve. It's not a set formula to set the border-radius of +1px greater than border-width. However, it's going to be a positive value, definitely. You need to experiment in the different browsers where you need this until you see the smallest possible border-radius value that works good enough for you in most browsers. (Some browsers may not support this.) For instance, in Google Chrome, I set a border-width to 10px, but had to set the border-radius to 13px before I started to see a semblance of an inner border curve, while 15px worked even better.
The best and fastest way is to do this
.curve {
width : 300px;
height: 100px;
border: 4px solid black;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
<div class='curve'></div>
If you can't add an extra div you can accomplish this with a background images in each corner.
#nice-corners {
border: 5px solid green;
border-radius: 5px;
background-image: url(top-left.svg), url(top-right.svg), url(bottom-left.svg), url(bottom-right.svg);
background-position: left top, right top, left bottom, right bottom;
background-repeat: no-repeat;
background-size: 16px
}
I'm trying to replicate the CSS 'Vignette' effect, detailed on Trent Walton's site.
.vignette1 {
box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
float: left;
}
.vignette1 img {
margin: 0;
position: relative;
z-index: -1;
width: 320px;
height: 247px;
}
It works well in isolation, but has problems on my production site, where the background settings for a parent div override the z-index on the image - live jsFiddle demo here.
The second approach - mentioned in the original article's comments and included in the demo - works well, but my image has to be wrapped in the tag - it can't be below it.
page has a solid white background, you're giving the image a z-index of -1, so it's going underneath that div. There are several workarounds, depending on how your final design is going to look, but if you just make #page transparent it works:
http://jsfiddle.net/tA8EA/
Or you can also set page to position realtive and give it a lower z-index than the image:
http://jsfiddle.net/PEgBv/
In the end I found the' Overlay & Inset Method', the second of Jordon Dobsons's techniques to be the most effective and least reliant on negative z-indexes:
/* Border & Vignette Setup */
figure{
position: relative;
display: block;
line-height: 0;
width: 500px;
height: 333px;
margin-bottom: 2em;
border: 1em solid #fff;
-webkit-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
-moz-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
}
figure::before{
content: "";
position: absolute;
top: -1em;
bottom: -1em;
left: -1em;
right: -1em;
}
figure::before,
figure img{
outline: 1px solid #ccc;
}
figure.vignette img{
z-index: 1;
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* Overlay & Inset Method */
figure.overlay.inset::after{
/* Mozilla Settings */
-moz-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
/* Webkit Setting */
-webkit-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
}
(jsFiddle demo using original layout)
I've post an answer with dynamic image list loading here. Instead of under-z-indexed image there's just DIVs with background-image and image dimensions set.