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*/
Related
There is a border around the pics on this site www.waynesboroheritagefoundation.com but the way that the achieve this border is by placing a border around the image in photoshop, or whichever program that they use.
I was wondering if it is possible to achieve the same, or similar, effect using just css?
I think that a purely CSS solution would be much more flexible and you wouldn't have to worry about the load time for an image (which I know is not generally a great concern now but I am old school. :) )
Thanks for reading and any suggestions!
Jim
You probably mean this effect:
As you can see, it is in the picture itself, made with some kind of photo editor.
You can also do it with pure CSS, by wrapping your image in a span (or some other element):
HTML:
<span><img src='...' /></span>
CSS:
span {
padding: 5px;
background: white;
display: inline-block;
-moz-box-shadow: 0 0 3px 3px #ccc;
-webkit-box-shadow: 0 0 3px 3px #ccc;
box-shadow: 0 0 3px 3px #ccc;
}
Live demo: JSFiddle.
EDIT
Based on King King's excellent comment, an even better solution is to add a white border to the image instead of wrapping it in a span.
img {
display: inline-block;
border: 5px solid white;
-moz-box-shadow: 0 0 3px 3px #ccc;
-webkit-box-shadow: 0 0 3px 3px #ccc;
box-shadow: 0 0 3px 3px #ccc;
}
Check this demo.
padding: 5px; // how wide the border has to be
background: white;// border colour (in this case)
display: inline-block;
the white border can be given by putting above code.
further read : http://css-tricks.com/understanding-border-image/
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.
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 applied the following style to the submit button visible in this test page :
border-radius: 25px;
border: none;
background: #FE6181;
box-shadow: 0 0 0px 0.4em #f4f4f4 inset;
padding: 20px;
As you can see there's some awfully irregular pink border which has nothing to do here around the button. Why is that ?
Your inset box shadow doesn't QUITE fill right out to the edges, leaving the background visible.
I'm not familiar with box shadow, but you need a shadow that is both inset and outset, but only outset by about a pixel, so it covers up the outline.
The property "box-shadow" apparently render bad because of the background.
In your case using "border" may solve the problem
border-radius: 25px;
border: 0.4em solid #F4F4F4;
background: #FE6181;
padding: 20px;
How can I apply a border to a div without occupying any extra space? The border must be inside the div.
You have 3 choices:
Inner and outer boxes(as #xpapad stated).
Using outline, e.g., outline:1px #000 solid;. Read more.
Using box-sizing, which is a css3 property. E.g., box-sizing:border-box;. Read more.
you can compensate it with negative margin, or simply use outline.
div { border: 10px solid red; margin: -10px};
or
div { outline: 10px solid red; }
alternatively you could use css3 boxshadow to fake a border...
example:
http://jsfiddle.net/meo/K23s7/
Try using a negative margin equivalent to your border, eg.
border-right: 1px;
margin-right: -1px;
For my use case, the box-shadow property was the right choice.
More precisely, box-shadow with 0 blur and a bit of spread.
The "border" it creates is not inside the div, but it doesn't occupy extra HTML space.
button {
background: white;
font-size:2rem;
padding:1rem 2rem;
color: #4f93df;
border-radius: 2rem;
margin:1rem;
}
.withABorder{
box-shadow: 0px 0px 0px 4px #4f93df;
}
<div>
<button>Hello</button>
<button class="withABorder">World</button>
<br>
<button>Hello Again</button>
</div>
Include an inner div inside your current div, using the required border.
Another option is to add a border using box-shadow, like this:
box-shadow: 0 1px 0 0 red; /* Border bottom */
box-shadow: 0 -1px 0 0 red; /* Border top */
box-shadow: -1px 0 0 0 red; /* Border left */
box-shadow: 1px 0 0 0 red; /* Border right */
box-shadow: 0 0 0 1px red; /* All the borders by using the spread properties */