I have a simple 30x30px div that has a box-shadow. The shadow shows up fine, except when using a rotation. With a rotation, the box-shadow dissapears. I can't figure what's causing this. Is it my fault, or a browser bug? A nested div in which the parent is rotated and the child is rotated back works fine.
I am using Firefox 28.0a2 on Windows XP. It does work in Chrome, as far as I can tell.
It is working fine in my machine. If you use Firefox, check the version that supports html5 as well as css3.
Don't forget to add <!DOCTYPE html> at the top of the html page.
You should include the browser-specific styles in your CSS:
div {
width: 30px;
height: 30px;
background-color: lightgrey;
box-shadow: 2px 2px 2px grey;
-webkit-box-shadow: 2px 2px 2px grey;
-moz-box-shadow: 2px 2px 2px grey;
-ms-box-shadow: 2px 2px 2px grey;
-o-box-shadow: 2px 2px 2px grey;
}
Hope this helps!
Related
This is the top of the sketch of my website, I've done this in a HTML editor.
The circle we can see in the image is my logo, it's an image with alpha color background.
Shadows, borders, etc are working perfectly even in IE.
Now I'm trying to do something similar with HTML5 and CSS3 but I'm having lots of problems with image shadows and borders.
box-shadow doesn't work because it's a square image (remember it's a image with alpha color background)
The last thing I've found for image shadow is filter: drop-shadow. In theory it should work on all browsers but it's only working with chrome.
On the other hand, i can't get a border like the one on the picture. As you know, my logo is a image with alpha color background and it always makes a square border.
Can anybody give me some help. I would appreciate it. Thanxs
After using the solution Lloan Alas gave me it's working perfectly but not on mobile phone
I use dolphin browser and this is what i get:
This is my code: css:
#logo {
margin-top: -100px;
height: 188px;
width: 300px;
background-image: url("../imagenes/logo.png");
border: 5px solid white;
border-radius: 50% ;
box-shadow: 0 10px 15px #000;
-moz-box-shadow: 0 10px 15px #000;
-webkit-box-shadow: 0 10px 15px #000;
-ms-box-shadow: 0 10px 15px #000;
-o-box-shadow: 0 10px 15px #000;
-khtml-box-shadow: 0 10px 15px #000;
}html:
<div id="logo"></div>
Here is a live demo - Let me know if it helps! LIVE DEMO JSBIN
Compatible with IE 9-10, Firefox, Safari and Opera. (Supposedly)
I don't get very well what are you looking for, but if you want to add a shadow to that ellipse what you need is box-shadow, as you know
The use is:
box-shadow: horizontal-shadow-position v-shadow-pos blur spread color inset;
where you can ommit a property but you cannot change its order.
So for instance your shadow will be something like
box-shadow: 3px 3px 8px 2px #666;
because it's not inset.
In addition, to be able to use it in more browsers, you will need the browser prefix, such as
box-shadow: 3px 3px 8px 2px #666; /*Firefox (and new versions of Opera)*/
-o-box-shadow: 3px 3px 8px 2px #666; /*Opera*/
-ms-box-shadow: 3px 3px 8px 2px #666; /*Internet Explorer*/
-webkit-box-shadow: 3px 3px 8px 2px #666; /*Webkit: Safari, Chrome, Chromium...*/
Also, remember that the alpha-filter you mentioned is just the equivalent to opacity property for Firefox, Chrome, Opera, ...
On my new site border-radius doesnt seem to be working.
I can see the border curving, but the background doesn't.
border-radius should work.
following works in IE 9
http://jsfiddle.net/Ec86p/3/
if supporting border-radius in IE7/IE8 is not a requirement then you should not include CSS3PIE as IE9 inclues support of border-radius css property.
edit:
i have updated your fiddle
http://jsfiddle.net/Zr8vE/3/
and changed following:
#main-menu li.first{
border-left:1px solid #feb800;
border-top-left-radius: 5px 5px;
-moz-border-top-left-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-moz-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
padding-left:10px;
}
edit : # 2
as soon as i removed following from ( #main-menu li )
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9900', endColorstr='#ff7c00',GradientType=0 );
it started working. ( I tried it in IE 9, orange background seems to be curving similar to border )
http://jsfiddle.net/Zr8vE/15/
in fact, it is not only the IE9, but also IE9 -.
you can either follow #Bert answer, or you can try CSS3PIE
the usage is just the same, but CSS3PIE provide more CSS3 features for IEs.
i think this is the solution you needed.
in your css apply this to the element that needs the rounded corner
#element{
behavior: url(border-radius.htc);
}
download and search it in google border-radius.htc and save it in your image folder or anywhere you like it is an image with curve and it is use to fix IE problem.
I will post my css for my main menu that works for me with rounded border.
#main-nav {
width: 100%;
background: #ccc;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
Please try this.
here is the link http://jsfiddle.net/vZaJX/
Hope it helped.
Here is now the answer.
try to just edit the spacing of the words.
http://jsfiddle.net/ApYw4/
for IE 9 solution as i have told you
download this border-radius.htc and add to your css like this
#main-menu{
behavior: url(border-radius.htc);
//all css
}
Dont hesitate to correct me if anything wrong.
I'm new to shadow in css can we set shadows for
round image(i mean to a circle image).
if it is possible, please give me a code for this in css.
thanks in advance
This is impossible since CSS does not know the shape of the image contents (e.g. interpret transparency).
You could make a circle with CSS3 and give a shadow, see this jsFiddle.
div {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
Yes, just add a border-radius: 50% to your image along with the box shadow property :) works in my img tag.
shadows are independent of shapes in css, you can use the shadow property for circle after creating circle.
You can use the following code for that, it should work fine
.circle{
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is of a circle, the shadow will be applied to the rectangular image element, not the actual subject of the image.
UPDATE:
Of course, you can always use the canvas element to play with shadows. Here's a jsFiddle example of both drawing a circle and loading a circle, then applying a shadow effect to both.
There is great tutorial for box-shadowing with examples here
Also, simple css3 for rounding corners in cross browser
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
just adjust the pix to the corner roundness you want, or use ems instead
This thing worked for me. I wanted a rounded shadow around the image 32x32.
<a class="media-links" href="">
<img class="media-imgs" src="">
</a>
CSS is like this.
img.media-imgs
{
-webkit-border-radius: 20px;
}
img.media-imgs:hover
{
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-box-shadow: 0 0 18px #91bd09;
}
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2); // this is must but values are just an example, set accordingly.
border-radius: 50%; //this is must.
Apply this CSS to your tag or its class, and you are done.
Easy peasy! Set border-radius: 50%; on your image element.
It rounds your image tag and it's drop-shadow.
CSS does not allow you to add shadows to shapes INSIDE images. CSS has no clue what the image looks like.
There is a property in css3 doing exactly what you whant. But, of course, this is not yet implemented by all browsers (IE...)
Have a look there : http://css-tricks.com/snippets/css/css-box-shadow/
The best and easy way i can get is to put the image in a div and then provide the border radius same as image to that div and apply box-shadow to that div
.topDiv{
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.img{
border-radius:50%;
}
this will do the work.
Please take a look at this simple code:
http://jsfiddle.net/kerp3/
The box has an inner box shadow o all 4 sides. I need the box shadow to only appear on the left and bottom sides.
How to change this code:
box-shadow: inset 0 0 9px 0 #000;
Does this help, this should work cross browser.
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Here is the original author :
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
See this page:
http://css-tricks.com/snippets/css/css-box-shadow/
With a small change to the color and the offsets it becomes fairly simple:
div { width: 300px; height: 300px;
box-shadow: inset 5px 5px 5px -3px #666;
}
The jsFiddle of it.
I was going to suggest using negative values like so:
div { width: 300px; height: 300px;
/* Try this. */
box-shadow: inset 4px -4px 7px -4px #000;
}
The first 4px pushes the shadow box to the left by 4px, hiding what you would normally see on the right, if you left it at 0.
The second -4px value pushes the shadow vertically down, again hiding the top shadow.
The higher 7px blur value gives me a more than a I need, but if I add a spread of -4px, that extra blur will be clipped. Leaving only a soft grey shadow edge, instead of the hard black one you'll usually see.
See my example here:
http://jsfiddle.net/khalifah/vVUB5/
You can't apply a shadow only to certain sides of a <div>, but you can adjust the X and Y offsets so that the shadow gets clipped on the sides where you don't want it.
This gave me the effect you're looking for in Safari:
box-shadow: 7px -7px 9px #000 inset;
I need to create shaded divs like those shown in the image below, using only CSS. Any idea about how to create them using less coding?
Thank you!
Here's a method using CSS's box-shadow, which is compatible in Firefox 3.5+, Safari 3+, Chrome, Opera 10.5+ and IE9+.
http://jsbin.com/usabe4
Multiple box-shadows are being used to get closer to the desired effect than a single box-shadow is capable of:
#box1 {
background: yellow;
-moz-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
-webkit-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
}
Did you try using box shadow in css 3:
box-shadow:5px 5px 0 #CCCCCC
For more details check:
http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm
Put two div's on top of each other (use z-index) and move the lower one two pixels down/right.
Is a CSS3 box-shadow close enough?
http://jsfiddle.net/4kS4F/
.box {
width: 120px;
height: 60px;
border: 1px solid #000;
background: yellow;
-webkit-box-shadow: 3px 3px 0px #777;
-moz-box-shadow: 3px 3px 0px #777;
box-shadow: 3px 3px 0px #777;
}
It's supported in many browsers: http://caniuse.com/#search=box-shadow
The notable exceptions are IE 7 and 8. If you need it to work there, you could use CSS3 PIE to provide the box-shadow.
If you need only a white background (or any fixed background color) you can make the box an image with the colored part being transparent and the edges being your background color. Then you set that as the background image, while the background color can control the face color of the box.