I faced a very interesting fact, and hope you have an answer for that.
I have this code:
width:940px; margin:0 auto; padding:13px 29px 39px 31px; background:#fff;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0 0 2px 1px #e3e6e9;
-moz-box-shadow:0 0 2px 1px #e3e6e9;
box-shadow:0 0 2px 1px #e3e6e9;
I saw it on Joomla 1.6 template - and it works cool on IE8, but when I pasted the same code to my template, it doesn't work on IE8, maybe there are some tricks to accomplish that?
Thanks in advance
Internet explorer doesn't support border-radius and box-shadow. There are some projects that try to bring css3 to ie like css3pie or ie-css3. Of course for shadows you can use filters. Read more here.
As others mentioned, that code doesn't work on IE8. Most likely there is a IE8 only stylesheet that uses images to get the same effect.
Personally I just let IE8 and below be a little blocky if I can get away with it. The % of users on those browsers is diminishing fast and I don't mind helping that along. And if your rounded corners are subtle then it's not something many users would even notice. Same goes for box shadow.
Related
I have been trying to get the curl shadow effects given here for box-shadow:inset but have failed to get any thing. Any onw has any clues how I can make it work?
Been trying to get it to work on this jsfiddle
Changing this to box-shadow:inset and trying variations on transform rotate has not yealded any results:
box-shadow: inset 0 10px 13px -3px #000000;
transform: skewY(-12.5deg);
I am basically trying to make something like this for a unordered list in my html/css design.
yes - see this link for some really nice CSS effects: nicolas gallagher
Specifically "Lifted Corners"
Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}
I want to implement badges like on Stack Overflow. Maybe you can give me some nice CSS code?
Introducing the brand new
Stack Overflow BadgeMaker 3000
It makes Badges™
Just pop in a name, tell it what color you want your shiny new badge to be, and you're all set!
Browser support: All modern browsers, up to and including IE7. Round corners not supported in IE8 and below.
Maybe you can use the nice Firebug and take a peek at how SO does it.
You mean rounded corners? It uses CSS3 rounded corners:
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
Or you can run a search for 'badge' on their CSS file:
.badge,.badge-tag{color:#fff!important;background-color:#333;border:1px solid #333;margin:0 3px 3px 0;padding:0 6px 0 3px;display:inline-block;text-decoration:none;line-height:1.9;-moz-border-radius:6px;-webkit-border-radius:6px;}
.badge:hover,.badge-tag:hover{border:1px solid #555;background-color:#555;text-decoration:none;}
.badge-tag:hover{color:#fff!important;border:2px solid #555;}
.badge-tag{color:#333!important;border:2px solid #333;background-color:#eee;}
What's the easiest way to create drop shadows around div boxes? A print media designer sent me this example design:
http://glacialsummit.com/shadow.jpg
As you can see, the drop shadow seems to "glow" around the div box. Is this easy to re-create with CSS? Or should I tell the designer it's impractical to create this?
Yes, it is possible, even in IE6.
It is possible with CSS3. But the browsers still use their own CSS property names.
Yes, it is possible with CSS3. Here is the sample:
selector {
-moz-box-shadow: 5px 5px 10px #666;
-webkit-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Would work in most of major browsers except IE.
Here is the explain:
selector {
box-shadow: x-coordinate y-coordinate blur-radius color;
}
Cheers.
I'm interested to find which way of creating box shadows with css is most effective. But that I mean : ease of implementation, flexibility, and cross browser compatibility.
Onion skinning is my personal favorite.
An example can be found in this alistapart article.
This is now very simple to achieve:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33);
First value is the horizontal offset.
Second value is vertical offset.
Third value is spread of blur effect.
Fourth Value is color.
Additionally, you can add another value of inset, which will make the shadow appear on the inside of you block element:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;
This is now very well supported: https://caniuse.com/#feat=css-boxshadow
The way I find most effective currently is this:
The CSS rules needed :
.shadow{
position:relative;
display:block;
background-color:#bbb;
border:1px solid black;
}
.shadowed_item{
position:relative;
border:1px solid black;
background-color:white;
top:-5px;
left:-5px;
}
HTML code on which the CSS is applied:
<div class='shadow'>
<div class='shadowed_item'>I have a shadow.</div>
</div>
I found it very simple to implement, flexible and it works the same on FF 3, IE 6 & 7.