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. The 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).
Related
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>
how do you use border box with percentage and margins?
example follows.
<style>
.half{
width: 50%;
float: left;
background: red;
margin: 5px;
box-sizing: border-box;
box-shadow: 0px 0px 3px black;
}
</style>
<div class="half">half</div>
<div class="half">half</div>
i want the div(.half) to take up 50% of the screen - a 5px margin all around the div is this posable every time i try it makes it wider than 50% and puts the second box on the next row i would like to avoid % based margins if posable.
margins are never computed as part of the width, even using box-sizing: border-box;
So try replacing margin with border: 5px solid transparent
Or, if you can't override borders, depending on the effect you want to achieve try with :after/:before pseudoelements, e.g.
.half {
width: 50%;
float: left;
background: red;
box-sizing: border-box;
box-shadow: 0px 0px 3px black;
}
.half:after, .half:before {
content: "";
width: 5px; /* or more if you need more space */
display: inline-block;
}
Example: http://jsbin.com/imiqak/1/edit
Or you may use some nested elements, like so:
.half {
width: 50%;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
}
.half p {
background: red;
box-shadow: 0px 0px 3px black;
}
Example: http://jsbin.com/imiqak/3/edit
margin are considered as outside the box (it's spaces around your box, not in the box). Margins size are not counted as part of the container width.
Indeed, when you type box-sizing: border-box;, you means the size of the box includes the border size, and if you look at this image below, you'll see that the margin are after the border, so it's ignored.
Try this:
CSS:
<style type="text/css">
.half{
width: 49%;
float: left;
background: red;
box-sizing: border-box;
}
.half:last-child{
margin-left: 1%;
}
</style>
HTML:
<div class="half">half</div>
<div class="half">half</div>
I just can't figure this out. The links below work absolutely fine in every browser except IE8. If you click on the elements in IE8, the button disappears. If you click again where it was it reappears. But no amount of clicking will actually lead you to the href location. Can anybody explain to me why that might be? I've exhausted all of my thoughts and it still doesn't work. Many thanks for all your thoughts!
The html...
<div style="padding:0px 0px 30px 0px; clear: both;">
<div style="width: 50%; display: block; float: left;">
Learn More
</div>
<div style="width: 50%; display: block; float: left;">
Get Started
</div>
</div>
...and the stylesheet...
.big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (
startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}
.big_button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
background-color: #378de5;
}
.big_button:active {
position: relative;
top: 1px;
}
Its because of the 'filter:' part in your css, remove it, then it will work...
I just figured it out. IE8 seems to have a problem with :active in css. So the following section of the stylesheet was causing issues:
.big_button:active {
position: relative;
top: 1px;
}
Current fix is to exclude the ':active' part of the css for the button as it's not essential. If anybody has any further information on why IE8 has issues with :active, I'd be interested to know about it.
i have this code:
<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>
that produce:
in firefox,
but in chrome (linux, and windows - didnt try in mac) i see nothing why?
I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.
JSFiddle example.
Because you gave 0px width and 0px height to the div so you see nothing.
width: 0px;
height: 0px;
Change this, hope it'll be visible.
Adding the following style to my page removes the rounded corners from FireFox and Chrome. (IE didn't have rounded corners to start with). In FireFox and Chrome it also removes the padding between the editor and the border but in IE it does not. I am totally stomped as to why the padding is not being removed in IE
span.cke_skin_kama
{
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-o-border-radius: 0px;
border: 1px solid #D3D3D3;
padding: 0px;
}
This solved the problem
span.cke_skin_kama
{
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-o-border-radius: 0px;
border: 1px solid #D3D3D3;
padding: 0px !important;
}