Visual artifact in Firefox, perhaps due to css-transform or ::after element?
I'm attempting to give a 'card' element a drop-shadow which looks like it is lifted from the page. I'm doing this with the ::after pseudo-element, a css-transform, and a box shadow.
I'm using Mac OSX, Chrome (latest version) and Firefox 5. T开发者_运维百科he results are
As you can see, there is a strange border-like artifact in the firefox rendering. The color of this seems to be linked to the body background color - as you can see in the second firefox example.
To do this I have the following code:
HTML:
<div class="card_container">
<div class="card">
<!-- Content //-->
</div>
</div>
CSS:
.card{
padding: 5px;
background-color: #fff;
border: 1px solid #aaa;
height: 375px;
margin-bottom: 20px;
}
.card_container::after{
content: "";
width: 210px;
height: 10px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
box-shadow: 3px 3px 3px #4a4a4a;
background-color: #4a4a4a;
position:absolute;
bottom: 20px;
right: 8px;
z-index: -1;
}
There's some more CSS around, but I'm fairly sure I've played around enough to rule anything else out.
Any ideas why this is happening, if it's platform/browser specific, and/or any fix? Thanks for any help!
:after
is a tricky selector: you add an HTML element to your document, but you cannot manipulate its position freely. I suggest changing the HTML like this:
<div class="card_container">
<div class="card">
<!-- Content //-->
</div>
<div class="shadow"></div>
</div>
You have to add some the "shadow" div to every card elements in use, which might take some time.
Now for the CSS:
.card {
padding: 5px;
background-color: #fff;
border: 1px solid #aaa;
margin-bottom: 20px;
height:100px; /* just for show, can be set to auto */
}
.card_container {
width:210px;
overflow-x:hidden; /* preventing the shadow from leaking out on the sides */
}
.shadow {
width: 93%;
height: 10px;
/* rotation */
transform:rotate(2deg);
-moz-transform:rotate(2deg); /* Firefox */
-webkit-transform:rotate(2deg); /* Safari and Chrome */
/* shadow */
box-shadow: 3px 3px 3px #4a4a4a;
-moz-box-shadow: 3px 3px 3px #4a4a4a;
-webkit-box-shadow: 3px 3px 3px #4a4a4a;
background-color: #4a4a4a;
border: 1px solid #4a4a4a;
position: relative;
bottom: 33px;
left: 5px;
z-index: -1;
}
This solution is not very flexible: you will need to adjust the shadow element if you change the card's width (the wider the shadow, the less rotation, for instance).
精彩评论