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;}
Related
I used the CSS border radius to curve a dotted border. It looks great in every browser except firefox where only the corners have a solid curve.
Thanks in advance
Some years ago this was a bug of FireFox as far as I remember. Not sure how it's now.
Show us your CSS please. Maybe you have to use browser specific CSS like this:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
Also there can be some dependency of what HTML version you use. HTML 5 hope :)
That's the way Firefox renders it.
There is no solution for this.
http://jsfiddle.net/437sp/
.border {
width:200px;
height: 50px;
border:5px dotted green;
border-radius:10px;
}
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.
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;
}
There doesn't seem to be a way to support border-radius other than to provide the CSS for each engine separately. Right now it seems you have to declare the property three or four times (possibly more if you want to support more obscure engines).
My interim solution is to pass all of my CSS through this regular expression:
Regexp:
border(-)?(top|bottom)?(-)?(left|right)?-radius:(.+?);
Replace:
-moz-border-radius$1$2$4:$5;
-webkit-border$1$2$3$4-radius:$5;
-khtml-border$1$2$3$4-radius:$5;
border$1$2$3$4-radius:$5;
This searches for all instances of the official CSS3 selector and replaces it with itself, plus the engine-specific selectors for Mozilla, WebKit and KHTML.
Is there a better way?
When are WebKit and Mozilla planning to support the CSS3 selectors? (Do they already?)
It should be :
.myClass
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
with border-radius below the other one.
why ? Because, now that new browsers doesn't need their own engine hack anymore (like firefox 4 for example), they should use the last command they receive in the CSS file. That way, the rounded corner should be the same in all browser understanding CSS3 specifications and you won't have to change your CSS soon.
For all four corner you can use the following one
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
and if you want to add curve at any one corner (for now i show the bottom left) try the below
-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-radius-bottomleft: 4px;
Thanks
Like this in CSS:
.myClass
{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
IE is the only browser that currently doesn't support it (until IE9 makes its launch). But until then you can use this script: DD Roundies. This is a script that will round the corners in IE, with a little bit of setting up. There is another one here at Curvy Corners which looks for the webkit rule and adds them to IE as well.
i used this corner style:
.corners4{
background:url(../img/panelHeaderColor.jpg) repeat-x;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
but, this doesn't work in IE, is there any IE equivalent for this?
thanks
If you remove the -moz- part of the property, you will have border-radius-topleft and so on. These are the border-radius properties. These are only in the CSS3 standard. With IE's current track record, CSS3 should be supported sometime around 2017. If you want it to work in Safari, you can use -webkit-border-radius. See this question for more information on rounded corners.
The -moz- part stands for "Mozilla" - this property is not supported by IE.
There is no CSS only equivalent for this that works across all browsers. At least not yet.
Curved corners are a serious pain in the behind to implement with javascript, and most solutions aren't very robust. The absolute best way to achieve this in a way all your users will be able to enjoy is the old school way of using your own images as corners, unfortunately. This website makes the process easier, at least. If you want to venture into JS solutions, I've heard good things about curvyCorners.
IE seems to be tricky with rounded corners a lot of times. All in all, you will find it isn't supported very well, and there are still plenty of users going back to IE5.5 or so. I would recommend a different approach.
While I don't remember exactly where I learned it, I can give you the code I have on my website.
HTML Code that goes before your element:
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
HTML Code that comes after your element
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background: #000; margin:0 4px;}
.b2 {height:1px; background: #fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 2px;}
.b3 {height:1px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
.b4 {height:2px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 0px;}
The above CSS code, the #000 is going to be your border color. The #FFF is going to be
the color of your content box.
You will want to have no top and no bottom border on your content block, but then set the left and right border to be 1px and then the color you want the border to be.
Depending on your current implementation this may seem somewhat not as nice looking, and feel free to add more b tags applying the same logic to get a bigger radius. If you would like a larger radius and can't figure it out, just let me know and I'll extend this to be larger.
One final note, depending on where you are placing these you may have to tweek the margin settings a bit.
Check this site: http://border-radius.com/ it generats css for WebKit, Gecko, CSS3.
Example:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
The corner radius issue of IE gonna solve.
http://kbala.com/ie-9-supports-corner-radius/