While using CSS3's box-shadow I am having an issue I do not usually have.
The box shadow usually just bleeds over the div edges, but not on this one.
box-shadow that is being cut off on the top and right hand side..
Heres the css I'm using for box-shadow:
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
Cheers
The problem is your center-main div is cropping off the edge of the shadow. Set overflow:visible on this and you should see it.
If box-shadow is being cut-off, make sure overflow:visible is set on any div(s) your element is contained in.
use padding + negative margin like:
.img {
padding: 10px;
margin: -10px;
}
I have run into this problem multiple times with IE, and the best solution I've found is to use a transparent outline around the div. This seems to prevent IE from clipping the box shadow, as it does even in cases where Gecko and Webkit don't. One great thing about using outline to fix this problem is that it doesn't affect the position of the div.
For example, I had a div with which I had used position: absolute and bottom: -30px to put it in a certain place relative to its parent div. IE, and only IE, was cutting off the top and bottom of the box shadow. Adding this outline fixed it, without changing the position.
outline: 10px solid transparent;
you can set this style img tag for show shadow-box correctly
.img{
margin:20px;
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
}
you can use
.img{
filter: drop-shadow(0 0 5px #555);
}
instead
I managed to resolve the same issue on my local project by setting the image to have the following css property:
position: relative;
I've also encountered this issue. In these cases I add position: relative and a z-index to the box shadow container.
Please see this fiddle for a visual.
Related
I am trying to create a page like this:
All the things are going fine where as i am not able to create the first div which is looking little a bit up as compared to the other divs. it also has a border-bottom shadow. Please guide me how can i create the similar image using css.
Thanks..
The only thing special about the first item is the shadow which creates that depth effect, you can try something like this to reproduce it:
li:first-child{
background: #ccc;
-webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.5);
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.5);
position: relative;
z-index: 1;
}
Demo fiddle
This question already has answers here:
Outline radius?
(24 answers)
Closed 2 years ago.
So I have these four boxes, floated left, each with a 50% width of the page. I want them to have an outline of 1px solid gray, and I want to round the corners with 6px. I know I could use border:1px solid gray; and border-radius:6px; but the problem is that border adds width to the element. And because the boxes have 50% width, and they're floated left, I can't add a border to them. So is it possible to make outline corners round?
Edit:CSS-only solution would be best, because I need to support every browser excluding IE6.
You can still do this with borders by using box-sizing. It includes the border's width in the elements total width and is fairly supported.
My idea is untested, but how about using the 50% divs as containers for your actual divs with border?
The bordered-divs then have height and width to auto and set their left, right, top and bottom to 0px
There is a workaround as per this answer. But you would still have to set outline:0 and use border-radius and/or box-shadow.
use following css property to make rounded corner border
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;
If you use this. please post some codes you used. Then only we can able to find the errors or any modification need ...
Thanks
The best way to have control on borders is to use box-shadow. It keep rounded corners and can be outside or inside (with inset).
Exemple :
box-shadow: 0px 0px 0px 2px black;
/*outside border black 2px width*/
box-shadow: 0px 0px 0px 2px black inset;
/*inside border black 2px width*/
Another way to do this is to use the OUTLINE property as well as a BORDER-RADIUS of 80 pixels. Like followed:
outline: 5px #FFF;
border-radius: 80px;
This works for small images, not too large of ones. If you want to use the round edge system on larger images, you will have to do just as someone else stated and use the following code:
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;
In the image below, the top image is what I currently have on a site, it uses an actual Image.
What I want to do is make something more like the bottom image using pure CSS, I cannot figure out how to do it though, can anyone help?
CSS3 has a lot of solutions. Try this:
div.exampleboxshadowj {
background-color: #EEE;
float: left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width: 160px;
text-align: center;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}
Though you can change the color to blue, if you want.
Here is a great link for all the info you could want.
You can try using this link to get the gradient effect on those buttons (I haven't tested it myself)
http://webdesignerwall.com/tutorials/cross-browser-css-gradient
I'd imagine that since they use the background property, you would need to have the actual images on the buttons inside some sort of position container.
It would be easier and possible more cross-browser friendly to simply create the images in a sprite map and switch the background-position when they are clicked.
If I understood you properly, you are trying to change the image when it is clicked or is active. If so, for that you can use :focus or :active to generate such effect.
Here is a demo with background color instead of a picture.
hi you can use this css3 browsers compatible css code for your requirement :-
.shadow {
width:150px;
height:150px;
background-color: rgb(55,79,99); /* Needed for IEs */
-moz-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
-webkit-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
or see the live demo :- http://jsfiddle.net/dte78/32/
and can read more about box shadow
I am using jQuery Multi Level CSS Menu #2 for one of my wordpress theme.
But when I add a CSS3 box-shadow property to my main div, for background box shadow, than the menu drop down effect becomes slow down, and is not as smooth as it supposed to be.
But when I remove, the CSS3 box-shadow property from the main div, than the menu drop down effect becomes perfectly smooth.
This is my main div:
#main { background: #fff; margin-top:20px; margin-bottom:0px; -moz-box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
box-shadow: 0 0 10px #000000;
}
Am I doing something wrong?
Animated shadows are very slow because they have to be recaulculated every time they move. You will see a performance improvement if you reduce the radius of your dropshadow, i.e.:
-webkit-box-shadow: 0 0 3px #000000;
But I would drop dropshadows (ha!) and use a semitransparent border instead:
border: solid #ccc 10px; /*for older browsers*/
border: solid rgba(255,255,255,0.3) 10px; /*transparent border*/
This question already has answers here:
Placing border inside of div and not on its edge
(15 answers)
Closed 1 year ago.
On click I am adding, 1px border to div, so Div size increases by 2px X 2px.
I dont want to get div size increased. Is there any simple way to do so?
Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.
EDIT:
Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..
This is also helpful in this scenario. It allows you to set borders without changing div width
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Taken from http://css-tricks.com/box-sizing/
If you don't have a border-radius change border to outline:
outline: 1px solid black;
Having used many of these solutions, I find using the trick of setting border-color: transparent to be the most flexible and widely-supported:
.some-element {
border: solid 1px transparent;
}
.some-element-selected {
border: solid 1px black;
}
Why it's better:
No need to to hard-code the element's width
Great cross-browser support (only IE6 missed)
Unlike with outline, you can still specify, e.g., top and bottom borders separately
Unlike setting border color to be that of the background, you don't need to update this if you change the background, and it's compatible with non-solid colored backgrounds.
The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.
Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.
For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.
Eg:
div.navitem
{
width: 15px;
height: 15px;
/* padding: 5px; */
}
div.navitem .selected
{
border: 1px solid;
width: 13px;
height: 13px;
/* padding: 4px */
}
set a border on it before you click to be the same color as the background.
Then when you click just change the background color and the width will not change.
Another good solution is to use outline instead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.
(https://stackoverflow.com/a/8319190/2105930)
I usually use padding to solve this issue. The padding will be added when the border is not there and removed when it is back. Example:
.good-border {
padding: 1px;
}
.good-border:hover {
padding: 0px;
border: 1px solid blue;
}
See my code here: https://jsfiddle.net/3t7vyebt/4/
Try this
box-sizing: border-box;
Sometimes you don't want height or width to be affected without explicitly setting either. In that case, I find it helpful to use pseudo elements.
.border-me {
position: relative;
}
.border-me::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: solid 1px black;
}
You can also do a lot more with the pseudo element so this is a pretty powerful pattern.
Just decrease the width and height by double of border-width
You can do some fancy things with inset shadows. Example to put a border on the bottom of an element without changing its size:
.bottom-border {
box-shadow:inset 0px -3px 0px #000;
}
Try decreasing the margin size when you increase the border
I needed to be able to "border" any element by adding a class and not affect its dimensions. A good solution for me was to use box-shadow. But in some cases the effect was not visible due to other siblings. So I combined both typical box-shadow as well as inset box-shadow. The result is a border look without changing any dimensions.
Values separated by comma. Here's a simple example:
.add_border {
box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}
jsfiddle
Adjust for your preferred look and you're good to go!
We can also use css calc() function
width: calc(100% - 2px);
subtracting 2px for borders
You can try a box-shadow inset
something like this:
box-shadow:inset 0px -5px 0px 0px #fff
adds a white 5px border to the bottom of the element without increasing the size
.filter_list_button_remove {
border: 1px solid transparent;
background-color: transparent;
}
.filter_list_button_remove:hover {
border: 1px solid;
}
You can create the element with border with the same color of your background,
then when you want the border to show, just change its color.
In case content of your div is rendered dynamically and you want to set its height, you can use a simple trick with outline:
button {
padding: 10px;
border: 4px solid blue;
border-radius: 4px;
outline: 2px solid white;
outline-offset: -4px;
}
button:hover {
outline-color: transparent;
}
Example here: https://codepen.io/Happysk/pen/zeQzaZ