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?
Related
I have an HTML element textarea with defined CSS rule { resize: both }. In FF when the user mouse over the right bottom corner of textarea the cursor changed according to value of property resize, but in Chrome cursor doesn't change.
Please open this example in FF and Chrome to check the difference.
Is it a bug of Google Chrome and can I fix it with CSS on my side?
Update
I reported bug to Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=942017
Update 2
The bug was fixed in Chrome 80.
Actually, there are, or at least were ways in which you could style the resizer and add cursor: se-resize; on hover. Check out this post: Can I style the resize grabber of textarea?
It describes how you can use ::-webkit-resizer to style the resizer:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
Unfortunately it stopped working in Chrome and I couldn't anything similar. (I think it still works in Safari).
But fear not, it's not hard to make a custom handle. Actually, I would encourage you to use a custom one as the default one is too small and hard to hit. Especially with touch. There are actually a lot of sites that use custom handles (or at least automatic resizers based which grows based on the content. Works great on touch too!).
Ie. Stackoverflow uses a custom handle (TextAreaResizer):
GIF of Stackoverflows resize handle
There are also lots of libraries for exactly that purpose, just do a Google search, and you'll find something that works for you :)
This is rendered by browser itself cant be designed using css
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.
I need to display a custom scrollbar. I would like to avoid using a jQuery plugin if possible. So can I so something like this with HTML5 & CSS3 ? :
.myScrollableBox {
width: 200px;
height: 500px;
/* Display scrollbar if content is bigger than the box */
overflow: auto;
/* This doesn't work, but can I do something similar? */
scrollbar-image: url(/images/myscrollbar.png);
}
It's actually possible, if browser does support styling of toolbar elements (= is based on WebKit). Although it's not mentioned in many tutorials (such as this brilliant one, for example), you can just use background-url property to use custom image instead of color.
For example, in this page I've changed (in Chrome Developer Tools) styling to...
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
... and voila, I have some cyanid scroller. )
Yes you can, but it is not supported in every browser. Webkit (Chrome etc) has support for this using css:
-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer
Read more: https://www.webkit.org/blog/363/styling-scrollbars/
In Internet Explorer you can user css like
scrollbar-face-color or -ms-scrollbar-face-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
Read more: http://msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx
As far as I know, other browsers do not support this at the moment.
no, that is not really possible. The scrollbar used by the browser is not an image placed inside the html page. It is part of the browser logic. You cannot simply replace that.
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
Here's an example, I'm looking at in in FF 3.6 and the input with background: transparent has a different border to the untouched one.
http://jsfiddle.net/Pa2Kd/
My hypothesis is that, when the style is unaltered, a native Win32 control is used, with its default settings (more or less). But when you do alter the style, a custom control is used, or a more customized version of the Win32 control.
I remember similar things from when I was a boy and toyed with the scrollbars in Internet Explorer 4: They look normal if you do not mess with them (the theme of the OS), but if you do, they get "flat". Another thing is buttons: Windows Aero buttons look like they do - there is not really much to change. If you want to change the color of the button, you need to "disable" Aero theming of the button, and you get an old-style 3D, or flat, button, depending on your browser.
Just some thought. I might be entirely wrong, for web design is not my major field.
I second what Andreas says.
I don't know why exactly this is neither. I deduct from experience that when one of the border background-color visual attributes is altered, the browser switches from "OS rendering style" mode to "create rendering rules yourself" mode. Sadly, to my knowledge there is no CSS way of getting back to the OS rendering style.
The only way I can see to deal with this is to define a consistent ruleset for controls - which is a shame, because it's a perfectly logical choice to leave those styles rules to the user's OS.
Like the others said, this is due to default OS styling that is cleared as soon as you add any properties. You can mimick the default styling with CSS, though it would probably be overkill to do an OS detection and apply different CSS rules accordingly. Instead you could choose an OS styling that you like and apply that as the default for all text-inputs. Mac OSX styling can be reasonably reproduced with the following CSS:
#background {
background: transparent;
border:1px solid #ddd;
padding:2px;
-webkit-box-shadow:inset 0px 1px 2px #333;
-moz-box-shadow:inset 0px 1px 2px #333;
box-shadow:inset 0px 1px 2px #333;
}
Season to taste.