This is for web dev. When using a 1px border radius on a circle or a square with really rounded corners, the stroke starts to break. If we were to change it to 2px's it would get better and better the more px we add. But is there a way to fix this problem with a 1px stroke?
background: rgba(32, 32, 32, .9);
height: 30px;
width: 30px;
border: 1px solid white;
border-radius: 20px;
:hover {
height: 300px;
width: 200px;
}
Images attached!
add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; that will give you the anti-aliasing you're looking for.
There isn't much you can do about this, unfortunately. That's up to the browser to determine how to render the sub-pixels that make up a curved 1px border. Some browsers will antialias it nicely, others will not.
The only reliable solution is to use images, which is so... 90s. Or something XD Point is, we shouldn't have to do things like that, but sometimes we have to either settle for imperfect rendering, or use outdated methods.
This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.
See this article for a better explanation.
Related
Let's say someone is working on a web site that allows users to create a profile. This designer really likes the way input fields look with rounded corners, but Chrome's autofill feature is doing something odd to them. Of course, they could take the easy way out and remove the border-radius definition, therefore avoiding the weird corners, but then the site wouldn't have the look they were hoping for.
Here are before-and-after images of what the fields would look like when autofill is used.
And here's a JSFiddle for anyone that would like to play around with it.
If helpful, here is the relevant code being used to modify the fields:
.field {
background-color: #202020;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 0 5px #000;
color: #d8d8d8;
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
Several attempts were made to find the culprit behind this problem, including removing the outer shadow from both definitions, as well as changing the inner shadow's position and blur radius. The greyish corners were still there. The only real "solution" was to revert to square corners, but that option is being reserved as a last resort.
After numerous searches for a solution to this issue, all that could be found were ways to circumvent the default pale yellow background. And that's great news, but the designer is still left with those ugly corners. Is there a way to get rid of them entirely and maintain the field's original style? or is it a glitch that has no work-around?
Thank you for any insight or help you can provide.
Kreven's solution, while not the most elegant line of code, will definitely get the job done for most people I reckon. However, I'd like to modify it a bit and explain why it even works in the first place. Let's take a look at this line of code:
transition: background-color 2147483647s;
Here is a transition that would take 68.24 years to complete. Looks silly, right? If you're wondering where that magic number came from (2147483647), this is the maximum size of an integer, and thus the maximum duration for a CSS transition. What this transition is doing is making it take 64 years for your browser's autofill implementation to change the background color of your input.
It's also worth noting that this cheap trick will negate the need for you to use the "-webkit-box-shadow" CSS command (unless, of course, you need the autofill background-color to be different than the non-autofill background-color).
Hope this helps somebody! Cheers.
I found that increasing the border width and making it the same colour as the input background seems to help. Then reduce the padding to achieve the same height:
https://jsfiddle.net/Lguucatv/1/
border: 4px solid #202020;
padding: 1px;
Also modified the box-shadow to match original design:
box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;
Is there a way to get rid of them entirely and maintain the field's original style?
Here is the css
body {
background-color: #282828;
}
.field {
background-color: #202020;
border: 1px solid #000;
color: #d8d8d8;
margin: 100px; /* adding space around it to */
padding: 5px; /* make it easier to see */
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
DEMO
add transition to background-color with high animation time to the .field element
.field {
...
transition: background-color 5000s;
}
solutuion found here
demo on codepen
I fixed the problem by adding this to my css:
#media (prefers-color-scheme: dark) {
[data-theme*=dark] {
color-scheme: dark;
}
}
Assuming I have a set font color that I must maintain, and that it overlays content that can be of any color, how can I make sure the font is readable no matter what it's overlaying?
Here is a jsFiddle to demonstrate the effect I am trying to describe.
http://jsfiddle.net/4AUDr/
#overlay
{
position: relative;
top: -150px;
color: #860101;
}
Meme captions utilize white text with a black outline to make it readable over any hypothetical meme image, however I don't think there is a cross-browser compatible CSS only method of achieving that, and it would potentially look quite horrible with smaller fonts.
What solutions are there to this problem?
While text-shadow is nice, it doesn't actually give the result you want. A shadow is a shadow and what you need to have for most readable text is a "text border". Unfortunately. there is no such thing as text-border in css, but we can make one !
I am surprised by how much unpopular multiple shadows are. This is a case where by multiple shadows you can do miracles :
CSS
p {
color: white;
font-size: 20px;
text-shadow:
0.07em 0 black,
0 0.07em black,
-0.07em 0 black,
0 -0.07em black;
}
This style will simply add a thin shadow (as thin as 7% of your actual font-size) around your text (up, down, left, right).
But are four shadows enough ? Maybe you can get a better result with eight ? It looks like the answer is yes, makes sense to me, but it could also be that we are overkilling things here. Note that in this case I also decreased each shadow's size :
CSS
p.with-eight {
text-shadow:
0.05em 0 black,
0 0.05em black,
-0.05em 0 black,
0 -0.05em black,
-0.05em -0.05em black,
-0.05em 0.05em black,
0.05em -0.05em black,
0.05em 0.05em black;
}
Then in this markup in a colourful background you have a nicely readable text:
HTML
<html>
<body>
<p>This text is readable on any background.</p>
<p class="with-eight">This text is using eight text-shadows.</p>
</body>
</html>
JSFiddle example here
You can experiment with text-shadow property (MDN doc), for instance:
text-shadow: white 0px 0px 10px;
(jsFiddle)
It's supported in IE10. For IE9, you can use proprietary Internet Explorer filters as per this answer.
You can use the css3 property text-shadow
Warning: Browser compatibility problems (IE9 no support)
http://caniuse.com/css-textshadow
a simple example:
.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}
http://jsfiddle.net/H4JtR/
If you use white shadow over black fonts, or vice-versa, your text will be readable no matter what is overlaying.
Another option is to use a background-color with transparency (you may want to apply this to an inline element like a span or a p instead of a div because background-color is going to apply to the whole div area even where there is no text)
background: rgba(33, 33, 33, .9);
http://jsfiddle.net/LSRkE/
Just use a transparency that contrasts with your font color. Then you can lower the alpha-channel value so the image from the background will be visible enough.
Related answer here https://stackoverflow.com/a/5135033/953684
Perhaps this CSS was not around at the time this question was answered, but you can use stroke to add a nice border around text. Like this:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(0, 0, 0, 1);
I need to create a HTML div with custom border. According to what the designer told me, the border has a radius of 3px and stroke of 8px, color f7f7f7 and position outside
What I have so far is:
div#content {
padding : 10px 20px;
border-style : solid;
border-width : 8px;
border-color : #F7F7F7;
-webkit-border-radius : 3px;
-moz-border-radius : 3px;
border-radius : 3px;
}
I really don't know what the stroke effect is and how to do it with css.
Stroke basically means outline or border - this is the professional name of it. your code seems fine. didn't it work?
It works in this jsFiddle. it creates a thick, light grey border with a little bit of rounded corners.
also, you can use shorthand: border: 8px solid #f7f7f7;
i understand 'stroke' as outlined , like usually said for a text effect.
I would go ,since outline isn't friendly with radius:
div {
border:solid; /* no info for size nor color yet */
box-shadow: 0 0 0 8px #f7f7f7;
border-radius:3px; /* prefix not needed anymore */
}
What you are looking for is border: dashed;
If the designer said stroke, chances are they mean dashed.
I've updated Yotam's fiddle
border-style : dashed;
jsfiddle
I'm thinking on relying on box-shadow but it renders differently even on Firefox and Chrome/Chromium. The difference is very subtle with low values, but very noticeable with bigger ones.
In this example, you can see the differences arise when using negative values to make the shadow smaller. Left render is Chromium 25, right is Firefox 21.
HTML:
<div>
Hello there!
</div>
CSS:
div{
margin:100px;
padding:100px;
border:1px solid red;
box-shadow:0 80px 15px -85px #000;
}
How can I workaround this problem? Or maybe I should drop box-shadow by now?
Browsers use different algorithms to generate the shadow blur, in Chrome the opacity of shadow pixels decreases more quickly from the inner edge of the shadow area to the outer, and since the inner 1/3 of the shadow is hidden under the box in this example, it appears to look as having different start color. If we make the blur entirely visible by reducing the blur radius and the negative spread distance by 5px, and replace the solid shadow color with semi-transparent rgba(), the difference in the rendering becomes much less significant (demo).
Try to use the -moz-box-shadow property for firefox, it will render better.
div{
margin:100px;
padding:100px;
border:1px solid red;
-moz-box-shadow: 0 80px 15px -85px #000;
box-shadow:0 80px 15px -85px #000;
}
I'm trying to get an effect like an inset drop shadow effect in CSS that looks like the following image:
(source: gyazo.com)
Does any body know how I can get that effect with CSS?
The key here is multiple box shadows, a larger darker one inset from the top left and a very subtle shadow below thats slightly brighter than the background.
Notice the form of box-shadow is "x-offset, y-offset, blur, color"
Learn to use the blur amounts and multiple shadows and you can make some really nice effects.
Example style (for display on a background of #222):
.button {
display:inline-block;
padding: 10px 15px;
color: white;
border-radius: 20px;
box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}
The answer has already been given to you (box-shadow: inset ..), so here's a quick demonstration of how it could work:
http://jsfiddle.net/L6nJj/
The important part is box-shadow: inset 2px 2px 3px 0 red.
For an explanation of the available options: https://developer.mozilla.org/en/css/box-shadow#Values
Be sure to take into account the browser support for box-shadow, which is that it doesn't work in older versions of IE, but works "everywhere" else: http://caniuse.com/css-boxshadow
Have a look at the CSS3 box-shadow property, in particular, inset box shadows. Example L in this article should provide the effect you're looking for.