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
Related
I'm setting:
font-size: 13.44px
line-height: 1.4881
Multiplying those, gives us 20.000064
But the rendered/calculated height of the box is 19px
Why?
http://jsbin.com/vokesukeye/2/edit?html,output
The font-size seems to be rounded up or down for this calculation.
When I increase your CSS font-size to 13.6px (via Chrome's "Inspect" function), the text container height was increased from 19px to 20px.
You may want to try to use "Inspect" with your browser and interactively adjust these CSS settings to determine your CSS settings.
As I wrote in my comment earlier: The pixel values are being rounded, first to font-size 13px and then the result to 19px, due to the nature of pixels (which are a whole pixel or no pixel, except possibly on retina displays)
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)
I'm not a big fan of the default text-decoration. I ususally set it to "none" then do a "border-bottom: 1px dotted somecolor" on 'a' and a "border-bottom: 1px solid someothercolor" on 'a:hover'
I've noticed something recently that I don't think was happening before. Even with padding-bottom on the text's container set to 0, there's too much vertical space between the bottom of the letters and my border-bottom.
What's odder is that Chrome still seems to behave nicely and respect my 0 padding, but Firefox and IE appear to be adding about 4 or 5 pixels of vertical space.
When I temporarily revert to "text-decoration: underline" I still see too much space.
Any idea what's going on here?
I'm going to bet the culprit is inline-block as a display setting. See the difference (in Firefox) at http://jsfiddle.net/s8FYS/6/.
EDIT: Some further investigation reveals that inline Firefox (looking in Firebug) sets the height to auto which ends up less than the actual line-height, whereas inline-block calculates the height (since it is now acting like a block) equal to line-height * font-size, which pushes the border down.
You can "compensate" for it by setting the height (in this fiddle, a 1.35em worked with my default font-size of 16px), but I'm not sure that doing such would necessarily compensate correctly at all times.
Change line-height, for example:
a{ line-height:1em; }
Say, I have the following CSS rule defined:
.className {
font-size:0.89em;
}
My question is, how "deep" into fractions can I go while specifying 'em's for browsers actually to support it and for the font size to be rendered differently for a small fractional change in the em's value?
JohnB is right. We're still rendering in pixels whatever the size unit we use, and small changes in ems will not change the displayed size:
For example, for text originally displaying at a height of 20px*, we can see that there is no effective change when a rule is added to make it .99em of its original height:
20 * 0.99 = 19.8
The browser can't display .8 of a pixel, so (assuming it will round up) it will still display it as 20px high.
Though it appears that browsers do not always round off as expected:
http://meyerweb.com/eric/thoughts/2010/02/10/rounding-off/
http://ejohn.org/blog/sub-pixel-problems-in-css/
*Yep, I know a font-size of 20px doesn't alway mean it's displayed at 20px!
It should be kept in mind though, that fractional em values, like all floating point numbers, are susceptible to rounding error.
I found that out while setting my media query boundaries, where one max-width was 0.00001em away from another min-width, and it was rounded up and both queries were activated. After changing the difference to 0.001em the queries worked as expected, exclusively.
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