Hey i was using google chrome to write html, css, JS. CSS frame work i will use Bootstrap.
so i was tested on Chrome my code design how i am expect it works perfect and fine, when it comes to another browsers like Firefox and Opera, Internet Explorer, Safari it was not much expectedly work.
Like Box shadow and linear gradient some other.
i saw some CSS have -webkit, -o, -moz etc...
What are those means? and how i can learn them?
Kindly please tell how i can able to target css for particular browser like Opera and Firefox and safari.
-moz #media(min-width: 320px) and (max-width: 767px) {
/*
Here i would like to target only firefox
*/
}
Some css properties are named depending on which browser is being used so we add what is called a prefix so its compatible with all of them. Let's see box shadow:
.shadow {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
There are autoprefixers also!
I have been trying to get a shadow working on explorer, I already have it working in chrome and mozilla but I cant on explorer. I have been trying code like this
<!-- Internet Explorer -->
<!--[if IE]>
<style>
#blur_min
{
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=5,
Color='gray', Positive='true')
}
</style>
<![endif]-->
Use a box or text shadow in CSS, it works in all the browsers. Filters are legacy and very inefficient.
-webkit-box-shadow: 2px 2px 2px 2px #575757;
box-shadow: 2px 2px 2px 2px #575757;
Check out http://css3generator.com/ for help creating CSS.
Alright, so I'm trying to implement text-shadow across various browsers. I have IE6, IE7, FF, Chrome, and Opera all working... but IE8 wont' show any shadows unless it is in 'Compatibility View'.
I've looked at a number of 'solutions' via search / Google, but the shadow is still only appearing in 'Compatibility View'.
Any ideas on how to get it to show up without having to change modes?
Note: Using HTML5 Boilerplate and Modernizr.
edit: Added that I'm using Modernizr, and I clicked the wrong button in my tester. This isn't working in IE9 either, but I don't think it is related.
CSS:
#links li a {
font-size: 24px;
text-shadow: 0 3px 3px #102530, 0 3px 3px #102530;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530');
filter:DropShadow(Color=#102530, OffX=0, OffY=3);
zoom: 1;
}
HTML
<ul id="links">
<li><a href="#"/>Text</a></li>
</ul>
I tried Modernizer (also with heygrady's polyfill). I tried cssSandpaper. I tried CSS3PIE. But none of them displayed me a text-shadow in Internet Explorer 8 (CSS3PIE doesn't feature text-shadow). I also tried the double-markup method. But that really can't be it.
And then I found Whykiki's blog post and simply added filter: dropshadow(color=#000000, offx=2, offy=2); in combination with display: block;. And that's it. Some of you might try zoom: 1; instead of display: block; to activate it. filter: glow(color=#000000,strength=2); works, too. As you will see, the MS dropshadow doesn't come with blur. I can live with that.
h1 {
color: #fce934;
text-shadow: 2px 2px 2px #000000;
-moz-text-shadow: 2px 2px 2px #000000;
-webkit-text-shadow: 2px 2px 2px #000000;
filter: dropshadow(color=#000000, offx=2, offy=2);
display: block; /* that's the important part */
}
A website must not necessarily look the same in every browser. Plus MS filters are crap.
I would recommend to use Modernizer an apply a different solution for IE8.
It will save you from headaches :)
If so, which PNG IE fix would you recommend?
If you do not necessarily need your CSS to validate, you might use this:
.box-shadow {
-moz-box-shadow: 2px 2px 3px #969696; /* FF 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* Webkit = Safari + Chrome */
-khtml-box-shadow: 2px 2px 3px #969696; /* Konqueror */
box-shadow: 2px 2px 3px #969696; /* Opera */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* IE */
}
It uses the box-shadow CSS3 property where appropriate and for MSIE it uses filters. If you can trust your users have updated browser or use IE, you should be safe.
The code is not entirely from my head, I used http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ for reference.
If your drop shadow is partially transparent and can't use a .gif then yes that is really the only way to go. Firstly, I must say the obligatory %^&* IE 6. Second, I have had great luck with http://jquery.andreaseberhard.de/pngFix/ but I loves me some jquery so take this as just personal opinion and if you arn't already using jquery may not be the best for you.
I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers
ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail. Help!
Box Shadow works in all mordern [IE>8] browsers, This code uses no images and works in all browsers in IE versions below 9.
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
/* For IE<9 */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);
Box shadow supported from IE 9 onwards.
CSS3pie is a tool that lets you use some css3 properties in IE.
What you're trying to do is fairly widespread css3 in newer browsers, and emulated really well (and easily) in IE with the .htc file you can download from there.
As for the markup, I see just 2 elements, with the top one floated right, for example. You'd have to play with z-index to hide excess shadows.
In that site there's also a very similar effect, you should be able to adapt it for your needs.
This should work in all browsers:
.allSidesShadow {
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
/* For IE 5.5 - 7 */
/* for IE4 - IE7 */
filter:
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
-ms-filter: "
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
";
}
As Ventus said is not possible to use css shadows with ie (only ie9). But you can use shadowOn. It's a great jquery plugin and very easy in use. With it you will have cross browser compatibility.
The answer posted by Sekar, needs a little editing,
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
this doesnot work on IE(I checked on IE8).
box-shadow: inset 0 0 3px 0 #000;
Means 0 pixel left, 0 pixel right, 3px blur, 0 pixel diffuse, use a color slightly darker than the BGs.
I cant see your picture now, but for all side shadows I use the below code:
box-shadow: 0 0 5px 0 #000;
Instead of the 5px use your size.
You have to create several images. One for the left side. One for the right. One for the bottom, etc. And then have several div's and set the background for each of them.
You can do this with three divs, assuming they are all the same (fixed) width:
<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>
.top{
background:url('top.png');
height:20px;
width:800px;
}
.middle{
background:url('middle.png') repeat-y;
width:800px;
}
.bottom{
background:url('bottom.png');
height:20px;
width:800px;
}
Alternatively, you can make one big image, and use that as the background for the entire content area; then hard-code the positions and sizes of the contained elements.
You can place the following code in the div in order to drop shadows on all four sides.
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);