So, I'm in the process of building a website designer and I have come across something strange, if you set the text-shadow: 0 0 0 someColor on a element the shadow is actually applied, I have made a fiddle where this is very clear here FIDDLE.
Is this a bug?
It's not a bug in that it's not an incorrect implementation of the spec; the spec implies that a shadow is generated as long as the computed value is something other than none. The only values that can compute to none are none or initial.
Text shadows are drawn similarly to box shadows. Because of this, most of the behavior of text shadows follows the spec for box shadows. Nowhere in either spec is it stated that a value with all zeros should generate no shadow. All it says is that either property can take one of two possible values: none, or a comma-separated list of one or more <shadow> value groups, each of which corresponds to a set of values: in the case of text-shadow, it's [ <length>{2,3} && <color>? ]# as given in its own spec. As long as you have a value that isn't none, either spec assumes a shadow will be drawn and specifies all the behavior based on that assumption.
For both properties, even if you don't specify a color, both specs state that currentColor should be used (it says in prose that it's "taken from the color property" or "the resulting color of the ink that it shadows"; the result in code is currentColor).
Since the shadow is always drawn for a value other than none, and zero lengths result in a shadow that's exactly the same size as the text, what happens here then is probably the result of compositing two or more layers of semitransparent pixels due to anti-aliasing of the glyphs as well as the shadow (as stated in the comments). This applies not only to text shadows, but also box shadows, an archetypal example of which would be in a box with rounded corners, where the only hints of anti-aliasing are on the rounded corners themselves, and not the straight edges of the box. This also happens in all browsers, at least based on testing and prior experiences.
With all that said, if you absolutely cannot accept none as a value, you can always specify transparent for the color. The shadow will still be drawn, but since it's completely transparent, you won't see it.
If you want to remove a text-shadow, I suggest setting text-shadow: none;
text-shadow:none;
Optional. This is a value. If not specified, it defaults to 0. The higher this value, the bigger the blur; the shadow becomes
wider and lighter.
The blur property does not indicate no blur when set to zero.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
text-shadow: 0px 0px 0px #FFFFFF; these properties not for hide or show. move shadow up down, move shadow right left and blur level 0 is clear.
if you want hide Shadow Then : Write "text-shadow:;" but dont set any value it should be empty.
sorry for bad english :)
If you're building a page builder and want initial "empty" values (which they're not empty, the first two zeroes indicate positioning and the last how much blur) you may just want to set the color as a default to the element background color. Or you can change your blur value to -1.
text-shadow: 0 0 -1px red;
The other option I can think is to have them enable text-shadow and then put in your 0 0 0 red using an if else statement. Pseudocode:
if text-shadow option is checked
use text-shadow:0 0 0 red;
else
use text-shadow:none;
Good luck.
Related
Weather.com is the only example I know of that is doing this, showing a dashed red line under misspelled text instead of squiggles. This is on Chrome in Windows 7
What I'd like to replicate
Any ideas on how this is done? Unfortunately going to inspector clears text from the field.
What most sites show
This turns out to not be a style, but rather an effect of a precisely sized text box/precisely tuned line height. The squiggle is 2px tall, but the bottom 1px was cut off, giving it the appearance of a dashed line, but in fact it is not.
This method can be used to replicate the effect shown IF you are using a font where the letters that extend below the baseline don't go so far down that they touch the spellcheck squiggle.
It seems possible to move the squiggle independently of the text, which could possibly present a way to do emulate this style with any font.
If I find a way to do this, I will update further.
This is a browser feature that can be achieved (at least in Webkit/Blink) on input fields and contentEditable elements with spellcheck="true". Not every browser will implement it the same way. For that, you would have to build the text markers yourself in conjunction with a dictionary service (like Google Docs does, as one example).
https://jsfiddle.net/bn7pfyf3/
(change the "true"s to "false"s and you won't see any highlights on focus)
In Webkit/Blink, this is a DocumentMarker type (which is used for Ctrl+F, highlights, typos in input fields, and more). They are not exposed in the DOM or CSS.
https://github.com/crosswalk-project/blink-crosswalk/blob/master/Source/core/dom/DocumentMarker.h
I'm attempting to use "mx:HorizontalList" to take advantage of its build-in support for drag-n-drop operations. Since I don't want the list to show the border, I set "borderVisible" to "false", which works as expected. However, whenever the drag-n-drop is being performed and an element is being moved from its original position to the new position, a border in light blue color shows up. Once the drag-n-drop is completed, the border goes away and everything is back to normal.Is there way to make it not show the border even during the drag-n-drop? Thanks.
make focusAlpha equal to zero. Hope this solves your problem
Problem: Certain values of matrix3d cause a div not to render at all, but the inspector's highlight area for the div is the correct shape.
I have an app which uses the camera to recognize four dots near the corners of a rectangular object. I calculate a matrix from the positions of those dots to map a div with a certain size to the quadrilateral defined by the screen positions of the dots. This is all fine, but at certain arrangements of the dots, the div being transformed by the matrix does not render at all. After implementing this, I found this example, which does much the same thing I'm doing, albeit without the AR: http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/
If you inspect a div with such a matrix, the blue highlight has the correct shape, but the div doesn't render. It also seems not to calculate pointer events, otherwise the cursor style would be visible. If you run the following snippet, you should be able to inspect the div and highlight it to see the shape is ought to have.
.rect {
position:absolute;
left:0;
top:0;
width:736px;
height:414px;
transform-origin:0 0;
background:red;
cursor:crosshair;
}
<div class="rect" style="transform:matrix3d(0.009359283667, 0.010930981398, 0, 0.000104500516, -0.092142538522, -0.121434733223, 0, -0.000225136056, 0, 0, 1, 0, -21.813928384019, -10.640940675131, 0, -0.106409406751)"></div>
<div>Inspect my invisible sibling...</div>
I'm currently using .toFixed(12) on each element of the matrix after calculation and right before applying it to the div. In my prior research to solve this, it was suggested that it could be a precision problem, but that doesn't seem to be the case. I have tried down to .toFixed(6), but that served only to make the matrix less correct.
I see this in Chrome, Version 42.0.2311.135 (64-bit) and Safari Version 7.1.5 (9537.85.14.17). I haven't tried other browsers.
Now, Frank Ta's example doesn't seem to have the same problem as mine, so I suspect there is some way I could calculate the matrices differently such that they would render correctly. However, that's not relevant to what I'm asking. My question is this: Why do these certain matrices cause normal rendering to fail, but highlighting them in the inspector shows the expected shape?
I can give a list of additional examples of such matrices if it would help.
I'm not sure if this is possible - I would like to have a conditional type formating on a field in a continous form, which will give the font colour of the field a transparent colour, so that the result is hidden.
I would like to do this to hide out a bunch of zero values. So far, I've tried setting the font colour to white on a zero value, but my odd lines have a light grey background, so it's still showing there. Is it possible to have a transparent font color, or to match it to the background colour of the line it's on?
If it's invalid for you to have 0s in the your results, don't refomat the colour to hide them, rewrite the query to exclude them / replace them with a blank or null value. If 0 is a valid result, then you shouldn't hide it, even if it looks ugly.
I want to create an Html List box in html such that there is no space/gap between the option element's top-left coordinate and the select element's top-left.By default there is about 3px gap between them (As shown by Accessibility explorer)
With respect to the above image, I want to get rid of of the white space between the edges of the option apple and the border of the select.
Currently the option apple is at offset 3px,3px w.r.t the select element , I want to make the offset as 0px,0px .
So that if select's screen position is 10,10 , the option's screen position would also be 10,10.
I have seen such thing possible but can't get the source to see how is it done.(but it was done using asp.net)
Thanks for your time.
EDIT:
Following is how it looks after setting martin to 0px in the Acc Explorer:
Give it a negative margin:
http://jsfiddle.net/zTatx/14/
Actually a simple padding: 0; should remove all the white space:
http://jsfiddle.net/TAxuD/1/