I was just wondering what could be the maximum value of CSS property blur in 'text-shadow'?
As the value keep on increasing it is hard to see any changes because things start getting blurred up.
text-shadow:0 0 0px #000;
text-shadow:0 0 10px #000;
text-shadow:0 0 50px #000;
text-shadow:0 0 100px #000;
text-shadow:0 0 200px #000;
text-shadow:0 0 300px #000;
text-shadow:0 0 400px #000;
300px and 400px looks pretty much same. As we keep on increasing I don't see any difference. May be few pixels are fading away / moving away that are hard to notice. I believe that it will be different for each browser.
Kind of unproductive question but I believe that we can at least increase our knowledge about this.
Disclaimer: I hope I can express this in English correctly. Please feel free to correct this answer.
This is how blur is defined: 7.2. Drop Shadows: the ‘box-shadow’ property
The third length is a blur radius. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred.
A non-zero blur distance indicates that the resulting shadow should be blurred, such as by a Gaussian filter. The exact algorithm is not defined; however the resulting shadow must approximate (with each pixel being within 5% of its expected value) the image that would be generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius.
So you see that the blur radius is used in a Gaussian Filter with a defined standard deviation.
Take a look at this image:
from Wikipedia "Gauß-Filter" (German, English link above)
You see that as greater the values get the smoother the edges become but it doens't distribute the other values differently.
There's no such thing called maximum for the blur, you are just setting the radius too high, which is just making the effect useless, set it to minimal.
So the more the radius you set, the more blur the text-shadow gets, let me illustrate this you with an image, we have a font, and we have set the size say 12px and a radius say 100px, the blur effect will be negligible here..
In the above image, the font is in the center, and shadow is spanned across large area(Black border), thus it diminishes the effect of the text-shadow as you are setting the blur value too high.
But if you set it proportionally, it will show up as you expect it should
Demo 1 (Negligible for second p)
Demo 2 (Making it propotional)
Related
Lets say there's a drop shadow for the following div element.
div {
width: 100px;
height: 100px;
background-color: red;
box-shadow: 60px 60px 50px black;
}
what does 50px mean to that element. That the size of kernel (no of pixels accounted for in calculation of new pixel value) is 50 ?
How does the standard deviation (by default half the blur radius) changes the outcome ?
Is it just the pixels that belong to the area (50px from the edge) that are blurred or the whole shadow?
Why after a certain maximum value of blur radius the effect is unchanged?
In my understanding the blur is generated from the middle of the shadow kernel point. So 25px outward and 25px inward. This is what I see when adding a fourth 'spread' property.
In my experiments I didn't notice a value cap.
Standard definition of the box-shadow blur radius: The blur effect is now defined by css3-background and by HTML to be a Gaussian blur with the standard deviation (σ) equal to half the given blur radius, with allowance for reasonable approximation error.
The pixels nearest the center of the kernel are given more weight than those far away from the center. This averaging is done on a channel-by-channel basis, and the average channel values become the new value for the filtered pixel.
After a definite value the changes are so mere that they are invisible to human eye. That's why it seems like nothing is changing further.
I am trying to create a very precise matrix on top of a board. I know it's 48cm tall and wide, and therefore I am using the metric system. According to my code, they should align perfectly, but I'm experiencing some weird issues, which might be related to anti-aliasing. I honestly have no idea.
Take a look at this screenshot:
and then at this code: https://jsfiddle.net/o21rdwvw/3/
I use two methods:
background: black;
//one of these according to horizontal/vertical
width: 4px;
height: 4px;
and
outline: 4px solid black;
As you can see in this image, that is not really the case. It looks like some of the boxes has a shadow, with the HEX color #576c73, which has no relation to the color #000000 (unless the browsers somehow pick a shadow, which is some % brighter or darker than the original color).
I have tried changing the units around to pixel (even and odd numbers) as well as remove the transform: scale(), but none of them changed anything.
What kind of wizardry is this, and how can I prevent them from messing up my alignment?
EDIT: As you can see, the small boxes are differently sized, even though all the browsers report they're the same size. The bottom one is square, whereas the top and middle ones are slightly shorter:
EDIT 2: It appears to be a browser problem. Edge does not render the actual shadow, for example. It's just not as tall or wide as the others.
CSS3 uses the border-radius attribute to set rounded corners in elements. The values, normally, are set in px, and the lowest value allowed is 0px. The visual result are variable, according to the dimensions of the element with this attribute. For example, an element with dimensions 100px X 100px with border-radius: 20px;, will not get totally rounded(circle), otherwise, an element with dimensions 10px X 10px will be. There are no limit to the maximum value allowed.
The question is: how to calculate the maximum value, according to the element size, to make it 100% rounded?
Fiddle page
EDIT : How to calculate the value in pixels (px)?
Why not use a percent?
border-radius: 50%;
Just make sure whatever you're applying it to is square.
The right way should be
border-radius: 50%;
The spec states you can use a percentage value here, and it should be derived from the corresponding dimensions of the border-box of the element.
The image from the spec illustrates why 50% is the right value if you need a circle:
If your element is not square (height != width), you could still use it to get a nice ellipse.
Lets say I want to add shadow to a text of size 33 px.
The unit I prefer for shadows is em as I want the shadows to scale when the page is browser zoomed.
I want my shadow fuzziness to be 2px. So my em value is 2/33 =0.0606 em.
So,
text-shadow: 0em 0em 0.0606em black;
Bu there is a problem!The value 0.0606 is not exact (2/33 is recurring) 0.0303 is lesser than the actual value.
Mozilla rounds up the em values to the higher px value. In this case it would remain 2px.
But Chrome rounds it down. So in this case it would be 1px only.
Now there is a bad disagreement I want to get rid of. How do I?
I know it may sound redundant by try addressing each browser individually with css. That way the browsers can beat to their own drum. http://davidwalsh.name/css-box-shadow
I know how to set a background in a div like:
background: url(/images/image.gif) no-repeat top right;
Sometimes I need more fine grained control, other than say top, center or bottom.
I have seen people using 'em' in the position section, what is that doing?
See the MDN reference for background-position. Instead of general terms, you can also use percentages or other CSS units of measurement to set an x- or y-offset. em is a unit that refers to the font size for the current element, but you can also use px for pixel offset.
Keep in mind the em is a RELATIVE size - so a 1em is a relative to my container and NOT actual size. A 1, is a 1em based on my browsers default.
So a parent (say .parent) class with a 1em and a child with a 0.75em would be .75 of the parent. A grandchild of that parent with 0.5em would be 0.5em of the 0.75, or approx 0.375 of the original 1em and not 0.5 of that original.
I don't use .px - it is easier to start, but when you need to change everything, you need to change it everywhere - so if you change the 1em to a 1.25em, it also changes the child and grandchild nested within those.
for a concrete example, if I put a margin-top: 0.5em; in a CSS, I am saying to put half the height of my current font as the top margin.
.px - pixels which change depending on the monitor setting and has origins in screen resolution.
.pt - is point, which means that on a printed page, 72 point is approx 1 inch - it has origins in printed material.
% has origins in well, percentage, and I find it more difficult to manage long term.
em has origins in markup.
Most browsers have 12pt (point) font as the base (if I remember correctly), which is 1em, which is - an unknown number of pixels really. SO, off the cuff if I remember .625em is approx 10pt, so if I set the body to .625em, then my .5em below that is 5 point in size, 2em below the body would be 20 point and so forth.
EDIT: my math bites at the end of the day :) so 10/12 is .8333 - so we need .8333 not .625, but you get the idea.
Gradients can be controlled by
background:#fff url(images/vertical_sliced_image.gif) repeat-y;
or
background:#fff url(images/horizontal_sliced_image.gif) repeat-x;
You can slice 1px height or 1px width (Gradient image) and repeat it in the background horizontally or vertically...
hope this helps