I found other threads with similar titles, but I couldn't find a solution that works for me in those threads.
I'm trying to produce input labels that are perfect circles by combining equal width/height with border-radius:50%, but the edges come out pixelated. I've tried various pixel values (both even and odd) for width/height, but the problem remains.
How do I make the circles perfect?
Add this border: 0; CSS property in this #mobile-choice-buttons label, and check:)
What you want, as far as I understand, is to anti-alias the shape.
Instead of giving transparent you can make use of rgba(255, 255, 255, 0) for the border. This again gives transparent. But the alpha=0 makes smooth edges.
#circle {
width: 140px;
height: 140px;
background: blue;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
border: 0px solid rgba(255, 255, 255, 0);
}
Check the fiddle.
And this is the browser support for alpha values.
Remove the border: 1px solid #d3d3d3; in the below class.
ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
/* border: 1px solid #d3d3d3; */
I see perfect circle without pixel distraction.
Upon inspecting your css, it seems jQuery UI already has a grey border for the circle.
.ui-state-default,
.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { /* CSS */ }
Which is responsible for the jagged circle. Reset the borders to 0 for all the circle elements.
Still the edges(borders) will be somewhat jaggered. Give a try adding browser's prefixed properties like
-webkit-border-radius
-moz-border-radius
If you're trying to have a perfect circle, svg or images will be better option
Related
I am trying to style up a custom scrollbar that works in Chrome and Safari. I’ve tried the following CSS:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background-color: rgba(100, 100, 100, .5);
width: 15px;
}
::-webkit-scrollbar-thumb {
background-color: #818B99;
border-radius: 9px;
width: 9px;
}
However the width on the -webkit-scrollbar-thumb is being ignored. I would like the thumb to be thinner than the track, as above.
It appears that I can fake the width by setting a border on the -webkit-scrollbar-thumb of 3px with the same colour as the track, however this only works with an opaque background colour, and I need it to work with a transparent colour for the track as above.
Example jsfiddle: http://jsfiddle.net/L6Uzu/1/
You are correct that WebKit ignores the width declaration on the scrollbar-thumb. It also ignores it on the track.
The problem with using a border is that it draws the border within the thumb, so if you just make the colour transparent, it will not work.
The solution is to change where the background is attached. By default the background extends under the border, as mentioned. You can use the background-clip property to change this, so that it only extends to the edge of the padding box instead. Then you just need to make a 3px transparent border, then Bob’s your uncle:
::-webkit-scrollbar-thumb {
background-color: #818B99;
border: 3px solid transparent;
border-radius: 9px;
background-clip: content-box;
}
See http://jsfiddle.net/L6Uzu/3/
This works correctly in Chrome, but Safari doesn’t have as advanced a border-radius implementation, so the rounded corners are not visible.
Guys I do have two very simple CSS doing same thing(creating a triangle), i Need your suggestion which one is better.
Example 1
.leftArrow {
border-right: 5px solid #000;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
height:0px;
width: 0px;
}
In example above, i am trying to define border for right, bottom, and top separately. Now the problem is if i do need to change border from 5px to 10px. I need to make changes in 3 declaration.
So it's not good to make change every time in 3 declaration for a single change. Suppose i do have arrow for all(four) direction. In that case i do need to make change in 4 X 3 = 12 declaration.
It's very time consuming :(
Example 2
.leftArrow {
border: 5px solid transparent;
border-left-width: 0px;
border-right-color: #000;
height:0px;
width: 0px;
}
In second example I'm defining border or all sides in first declaration "border: 5px solid transparent;". In second declaration i am replacing left border width from 5px to 0px. and in third declaration replacing right border color from transparent to black.
Now in my opening it's also not a good idea to define border width in first declaration and then change it in second.
Same situation for third declaration. I'm changing border color from transparent to black.
Please give me your opinion for this type of situation or if you do have any better idea :)
Use http://sass-lang.com/ with variables.
If I understood you right, you're problem is, that you don't wanna change the same things over and over again?
Then Less CSS could be something for you, it also allows you to e.g. nest your CSS, the best thing is, you can either compile the Less CSS to "real" CSS or include the less.js and you don't have to compile it (but I recommend the first, so it will also work with browsers, which have JS disabled).
I'd do it like this:
border: 5px solid #000; /* Set base style */
border-width: 5px 5px 5px 0px; /* All 5px except left */
border-color: #000 transparent /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;
The first line sets a "base" style that is overridden by the next two border- properties. You can use border-width and border-color to set different colours and widths for each of the four sides of the element.
The border-color property above sets the left colour to transparent, but because the left border-width is 0, it doesn't have any effect.
To make things even easier to change, do this:
border: 5px solid #000; /* Set base style */
border-left: none; /* Get rid of left border */
border-color: #000 transparent /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;
Now all you need to change is the first border property. The border-left: none takes care of making sure the left border never shows. You don't have to change
This is pretty much as simple as LESS or alternatives, and sticks to pure CSS.
I'm having trouble visualizing what your are trying to do, but if I understood you correctly, you could do something like this to reduce code rewriting:
Define common arrow properties
.arrow {
border: 5px solid;
color: #000;
height: 0px;
width: 0px;
}
And then turn off the borders where needed
Show the left and bottom border only on the left arrow
.arrow.left {
border-right-color: transparent;
border-top-color: transparent;
}
That way you keep the basic styling in the .arrow block.
I would do it like this:
<div class="arrow arrow-left"></div>
.arrow {
border:5px solid #000;
width:0;
height:0;
}
.arrow-left {
border-left:0;
border-bottom-color:transparent;
border-top-color:transparent;
}
http://jsfiddle.net/pdRYE/15/
In this case you have only one border-width declaration and you are using the second class only to hide the border you don't need.
I want very simple markup (<a class="next">Next</a>) to show a button with rounded corners, but with an arrow pointing right (like the "back" navigation button at the top of some iPhone apps). This is what I have so far (jsfiddle link here):
a.next {
padding: 6px 12px;
border-width: 1px !important;
border-color: #333 !important;
background: #5BFF2D; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5BFF2D', endColorstr='#20CA00'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#5BFF2D), to(#20CA00)); /* for webkit browsers */
background: -moz-linear-gradient(top, #5BFF2D, #20CA00); /* for firefox 3.6+ */
border-radius: 6px 0 0 6px !important;
border-style: solid none solid solid !important;
}
a.next:after {
content: '';
display: block;
width: 0px;
height: 0px;
border-top: 12px solid transparent;
border-left: 16px solid green;
border-bottom: 12px solid transparent;
background: white;
}
..which looks like this:
As you can see, it doesn't work at all. My thoughts at this point are: even if I do get the arrow correctly positioned, it'll never show the background gradient, much less the 1px border, correctly.
Is there a clean way of doing this?
Original Answer
This gets very close, but without a border. If you want to add a span inside, then the border becomes possible also, as well as some smoothing on the 'faked' gradient.
Updated Answer
This achieves the gradient and overall looks better. The main issue is that it requires you to have a solid background color behind it (white, in this case).
Final Answer
This actually does support the gradient leaving the angles transparent. It only will work in browsers supporting CSS3 transforms. I tested in IE9, FF 11, Chrome 18. IE9 is not showing your filter gradient. Chrome renders on my screen with a snubbed point to the arrow (perhaps with some browser targeting, variations like that could be adjusted for).
I'm wondering if it's possible to achieve this effect only with css. As you probably noticed the image have 4 borders if you zoom in a little bit(without that bottom shadow, I don't want to use that).
img http://img265.imageshack.us/img265/192/version203.jpg
It appears that the most outward border is already done using CSS with a simple border effect. The outermost border would be a box with a border and some padding to push the image inside. Then going down to the grey box, you could use another box with border: 3px double since the border color is the same as the background color, and adding background-clip: padding-box so that the background will not cover the white line between the double border. It also appears there would be around a 3px border radius on that box and some padding until you get to the actual image which simply has a white border around it.
A simple example of CSS:
span.imgbox {
background: #CCC;
background-clip: padding-box;
border: 3px double #CCC;
border-radius: 3px;
display: inline-block;
padding: 10px;
}
span.imgbox > img {
border: 1px solid #FFF;
}
This is generally what would be involved, assuming you don't want the white box with black border as shown in the actual website view, but just the borders you want that are shown in the image itself.
With box-shadow you can emulate multiple borders. This is exactly what you're looking for:
http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/
you could mix box-shadow, outline, border, and padding/background-color... but this wouldn't be cross browser..
border: 4px solid #000;
outline: 4px solid #f00;
background-color: #ff0;
padding: 10px;
box-shadow: 0px 0px 0px 4px #333;
demo
I think the only way is to have nested elements.
This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 25 days ago.
I have an li styled as follows:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
When I hover over the li the border appears, but the li's shift around. Is it possible to have the border appear without causing the element to shift? Almost like having an invisible border, and then on hover make it appear?
You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
Many of you must be landing here to find a solution for opaque border instead of a transparent one. In that case you can use rgba, where a stands for alpha.
.your_class {
height: 100px;
width: 100px;
margin: 100px;
border: 10px solid rgba(255,255,255,.5);
}
Demo
Here, you can change the opacity of the border from 0-1
If you simply want a complete transparent border, the best thing to use is transparent, like border: 1px solid transparent;
You could remove the border and increase the padding:
li {
display: inline-block;
padding: 6px;
border-width: 0px;
}
li:hover {
border: 1px solid #FC0;
padding: 5px;
}
<ul>
<li>Hovering is great</li>
</ul>
hey this is the best solution I ever experienced.. this is CSS3
use following property to your div or anywhere you wanna put border trasparent
e.g.
div_class {
border: 10px solid #999;
background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}
this will work..
Yep, you can use border: 1px solid transparent
Another solution is to use outline on hover (and set the border to 0) which doesn't affect the document flow:
li{
display:inline-block;
padding:5px;
border:0;
}
li:hover{
outline:1px solid #FC0;
}
NB. You can only set the outline as a sharthand property, not for individual sides. It's only meant to be used for debugging but it works nicely.
Since you said in a comment that the more options you have, the better, here's another one.
In CSS3, there are two different so-called "box models". One adds the border and padding to the width of a block element, while the other does not. You can use the latter by specifying
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
Then, in modern browsers, the element will always have the same width. I.e., if you apply a border to it on hover, the width of the border will not add to the overall width of the element; the border will be added "inside" the element, so to speak. However, if I remember correctly, you must specify the width explicitly for this to work. Which is probably not an option for you in this particular case, but you can keep it in mind for future situations.
This blog entry has a way to emulate border-color: transparent in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:
/* transparent border */
.testDiv {
width: 200px;
height: 200px;
border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
zoom: 1;
border-color: #FEFEFE;
filter: chroma(color=#FEFEFE);
}
Make sure that the border-color used in the IE6 fix is not used anywhere in the .testDiv element. I changed the example from pink to #FEFEFE because that seems even less likely to be used.
Use transparent property
border-color : transparent;
The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.