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
Related
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've tinkered with text-shadow and achieved an effect I really like in safari, however it is rendered differently in ff & chrome. I'm very wet behind the ears but believed that text-shadow would work the same on most browsers as the prefixes (-moz, -webkit, ect) are no longer used for it. Thanks.
h1 { color:#a2d639; text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #66ff33,0 0 40px #66ff33,0 0 70px #ff00de,0 0 80px #66ff33,0 0 100px #ff00de,0 0 150px #ff00de;}
I've experienced the same (and multiple other issues) concerning cross-browser compatibility. Unfortunately, the best current solution is to find a "happy medium" between the browsers. Be sure to check the results frequently if you're making a lot of changes.
If you haven't done so already, download the latest versions of Firefox, Chrome, IE, Safari, and Opera to test your pages. As far as I know, Safari, Chrome and Opera use the Webkit rendering engine, but there are still slight differences in how they are displayed.
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 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 have boxes that have been designed like this
Basically I need to code them so that they can be any size height-wise and width-wise depending on the content inside. Plus the shadow effect needs to be transparent because the background color can change.
Best way to do this so it works in all browsers? (IE6+, FF, Opera, Safari, Chrome)
If you didn't have the requirement for IE6 you could use the very clean & light-weight jQuery Corners: http://jquery.malsup.com/corner/
To achieve this effect in IE6 you'll need to use the arcane method of a table lattice with tiny cells in each corner using semi-transparent corner images.
The best way is to design your website for modern browsers and allow things such as box shadow and border radius to degrade gracefully for older browsers and IE.
If you must have rounded corners in IE I'd use this method which I've found easy and lightweight...
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
I can't help with box shadows in IE, I'm afraid.
Actually, IE has a proprietary CSS extension that allows you to add shadows:
.shadowed {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }
For rounded corners, you'll have to use images or JavaScript. I tried DD_Roundies and I'm quite satisfied with it (it has a few bugs though)
DD_Roundies Website
As for other browsers, you can use this:
/*************************************************/
/* The properties follow this format: */
/* property-name: x-offset y-offset blur #color; */
/*************************************************/
box-shadow: 0 0 4px #000; /* For Opera */
-moz-box-shadow: 0 0 4px #000; /* Firefox */
-webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */
I would strongly recommend CSS3Pie (works in IE6-9).