I apply same values for box-shadow property, but on IE11, the shadows seem thinner and I even can't see it in some case.
See this fiddle: http://jsfiddle.net/anhhnt/8pvgZ/2/
Here is result of IE11 for who don't have this browser:
The original property value is :
box-shadow: 0px 1px 3px 0px #777;
When I change it into
box-shadow: 0px 1px 6px 0px #777;
... then it seems OK, but why there is this difference? and what is best solution to work around this?
Thanks in advanced
This happens because each browser has it's own way of rendering elements.
The best way to work around this really is to make your page non-dependant on graphic elements that may differ from browser to browser (such as box-shadow). When i have to use box-shadow, i usually put an almost invisble one, with a subtle border. It works out really nice, and avoid most of the problems we usually have with the absurd difference between browsers' interpretation of the box-shadowproperty.
I made a fiddle based on the one you posted.
Related
The problem
I'm currently working on a project where I build a frontend using bootstrap4. To match the CI, I changed the highlighting colour of inputs to match the companies main colour scheme.
Basically I did the following:
:root{
--custom-red: #871d33;
}
...
input:focus, textarea:focus, select:focus{
border-color: var(--custom-red);
box-shadow: 0 0 3px var(--custom-red);
-moz-box-shadow: 0 0 3px var(--custom-red);
-webkit-box-shadow: 0 0 3px var(--custom-red);
}
Which produces the following result in a form (Firefox), which is alright: Screenshot
But somehow date input fields are messed up in a strange way as soon as a value has been selected; take a look: Screenshot Interestingly, the cropping problem is reseted as soon as the viewport is resized, which means there is some kind of rendering issue.
Now I was looking around what was happening to my date fields and ended up detecting the source: border-color: var(--custom-red);
As soon as I remove this line from my css and therefore stick with the default bootstrap-blue highlighting everything works as expected - no more cropping.
I found out, that somehow there is a 8px border-left and border-right setting, hidden somewhere, since this setting does not appear on the element inspector but the values can clearly be seen on the box values: Screenshot before
Interestingly, these 8px settings change, when I re-add my css back again and :focus on my field: Screenshot after
Since I was not editing anything on the border-left or border-right parameter I could not get my head around what was going on. My suggestion now is, that border-color somehow 'resets' other border-xy settings silently in the background. That sounds completely crazy in my opinion but I even noticed, that border-radius is definitely overwritten, when :focus is triggered. Take a look on this (need to zoom in): border-radius unfocused, border-radius focused
Testing on other browsers
Update
I just discovered that outline: none; removes the default chrome based :focus behaviour and uses the desired css like a fallback. This way the behaviour on chrome based browsers is at least now similar to the one on Firefox but on Firefox the cropping issue still stays the same.
Original
Now I was not sure whether this is maybe a browser based issue, so I checked on chrome based browsers as well and ... well it looks like :focus is here something totally different, than clicking into the field!
Triggering :focus using the element inspector gives the expected result: Screenshot inspector based triggering
But simply clicking into the field only 'highlights' it darkish for some reason:
Screenshot manually clicking
Interestingly, one can see the overwritten border-radius on this example even more, than on Firefox!
Despite the fact I do not understand why there are obviously two different types of 'focusing' in chrome based browsers, the date field is working as expected and not cropping off content: Sorry, had to remove this screenshot for I have not enough points, yet
End
So now I'm completely confused:
Why is border-color behaving as it behaves under Firefox? Did somebody ever encounter anything like that?
Why are there different :focus triggers on chrome based browsers, despite the fact :focus is listed as supported by GoogleChrome and derivatives?
I need some fresh coffee now. Thanks for every reply!
Example code
As requested, here you go:
input:focus{
outline: none;
border-color: red;
box-shadow: 0 0 3px red;
-moz-box-shadow: 0 0 3px red;
-webkit-box-shadow: 0 0 3px red;
}
<input type="date">
Workaround
So I could not find any root for this problem but I found at least a workaround by adding custom default border settings as well:
input{
width: 100%;
border: 1px solid gray;
border-radius: 0.2rem;
padding: 0.3rem 0.5rem;
}
input:focus{
outline: none;
border-color: red;
}
<input type="date">
This way the default behaviour is overwritten and the date input finally working as expected.
But still - I would like to know what is happening in the default case?
When I use the text shadow css, mozilla and chrome are showing different smudging levels.
#dfg{
color: #fff;
text-shadow: 0px 0px 2px white;
}
In mozilla I'm getting a more smudged look which i don't want. I've tried
-moz-text-shadow : 0px 0px 1px white;
but it doesn't help. Is there a method in css to give browser specific text shadow values or should i go for a javascript to identify the browser and then select a shadow level.? Please help.
chrome version
mozilla version
Personally I think a Javascript based method would work best, all modren browsers support the standard CSS shadow function, I think you were thinking of -moz-window-shadow which is a OSX feature.
also look into the blur property of text-shadow, perhaps explicitly defining it?
I've been trying to get the same shadow in all modern browsers (except IE version 9).
Unfortunately, for example Google Chrome doesn't blur it as nice as Firefox does.
Here's my code..
HTML:
<div id="box">Every browser should see my shadow the same way!</div>
CSS:
#box {
box-shadow: 0 4px 4px -4px #000, 4px 0 0 0 #E8EBEF;
padding: 10px;
background-color: #E8EBEF;
width: 200px;
}
and here's a fiddle:
http://jsfiddle.net/hLp8J/1/
What can I do to get the same shadow in at least the latest versions of Firefox, Google Chrome, Safari and Opera? Thanks for your ideas!
The different rendering engines draw the shadow slightly differently (Firefox for example has a smoother falloff than Webkit based browsers, looks better if you ask me)
The only way to guarantee it'll look identical across browsers is to be dumb about it and use images.
Otherwise you need to find a way to deal with the minor differences without adversely affecting your design.
You may try online CSS3 Generator or CSS3 Box Shadow Generator or CSS3 Maker
I find myself seeing things like buttons, inputs, header, ect. and wanting the code so I can reference off them and make my elementary designs look better. I always try to change it up a bit, I don't like stealing other peoples designs.
Viewing the page source from just the browser is very sloppy and usually hard to read. I tried using Firebug but I noticed one huge problem. It doesn't show all the CSS.
Example
Firebug will only show:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
When the full code is:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-webkit-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-moz-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
If leaves out the moz and webkit.
I can speak with experience in the Chrome Inspect tool, when debugging the page elements the browser automatically ignores and does not show the invalid properties or styles, but if you look at the actual page source code (or the css) your styles will be there.
I think that if Firebug does not show those styles it means Firefox is ignoring them, in this case you are using the -moz-box-shadow but Firefox uses box-shadow to render the element.
download the latest version of any browser and you see absolutely all the css.
With Inspector in Chrome you can see even the different states like :hover :active and so on
Why not just use the inspect element that's built in to Chrome? I use it every day of my life and love it.
I also use "stylebot" to show me some styles of websites, but I only use that to style websites (clientside) that I feel need a bit of fixing, like making buttons bigger, etc.
I'm having a problem applying a outline/stroke to text that looks good and/or even works on every browser. Right now I'm using:
<div style="font-family: Helvetica,sans-serif;color: #FFFFFF;font-size:40px;font-weight:bold;letter-spacing:-1px;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;filter:DropShadow(Color=#000000, OffX=2, OffY=2);">Text Example</div>
And while this applies an outline to the text on Firefox, Chrome, and Safari -- it doesn't look that good with some corners not using an outline and the outline doesn't even work in IE so it switches to just using a shadow. Is there a better method of applying a text outline/stroke that will look better and work in every browser?
Text shadow wasn't intended to emulate stroke, so caveat emptor.
Use SVG instead.Take a look here
Actually text-shadow is not meant to add stroke to text, so it doesn't generate accurate effect you want. However it look acceptable if you are using 1px/-1px size of shadow.
you can try JavaScript for that.. "http://www.netzgesta.de/dev/text/#overview"
see if it helps you.