I'm interested in learning how to create a css3 box-shadow inset with a transparency.
See the input in the fiddle here: http://jsfiddle.net/TeGkt/4/
For the input's background image. How can you create that effect without needing an image?
Thanks
Yes, using CSS3 styles:
http://jsfiddle.net/arnorhs/Nz7KG/
Will not work in IE pre ie9
And I didn't add any of -moz or -webkit- prefixes for compatibility..
I also didn't do it 100% the same. Your question seemed to be towards if it's possible or not...
rgba(255,255,255,0.75)
where rgba(r,g,b,a) is red green blue alpha
Related
Assuming client compatibility, is there any situation where CSS box-shadow is preferable to filter: drop-shadow.
From the article it seems like drop-shadow is a HW accelerated superset of box-shadow. This means that we should basically always use drop-shadow instead of box-shadow?
There is only one difference between box-shadow and filter: drop-shadow. With box-shadow you can use inset shadows, but you can't do it with filter: drop-shadow. All depended on you. Check this example.
Why is better to use box-shadow insted of filter: drop-shadow?
Better browser support
Most of developers use it
Less code, more options
You can use inset shadows
You can use more than one shadow
Also, there is one example with image where is better to use filter: drop-shadow. The first one has rectangle shadow, but the other one has shadow which follow the edge of image.
Problem is that there is limited browser support for filter at the moment with box-shadow being much more supported.
Browser support for filter
Browser support for box-shadow
Another difference: CSS filter creates a new stacking context, whereas box-shadow doesn't, so if you don't want to deal with that, you might want to stick with box-shadow. A demo of absolutely positioned tooltips inside drop-shadow vs box-shadow cards: https://jsfiddle.net/lexw11/uro0hqbx/137/
I found a Stackoverflow article on creating text shadows in IE: StackQuestion
Now I tried all of the 'filter' solutions in there, and in IE9, the text renders horrible(although the shadow shadow shows, the text pixelates heavily...).
Does anyone know of a proper text-shadow technique for IE? Even if it is just for IE9...
Thank You
Check this site out: http://css3pie.com/
It's a plugin that enables you to use CSS3 in IE6-9
You can get text-shadow effects in Internet Explorer, taming IE's crunky filter shadow effects, forcing them to look okay and stop pixelating the text. Use the IE Chroma filter:
Set a background colour that is close to, but not the same as, your shadow colour - e.g. for black shadows, a dark grey, for white glows, a light grey
(set the background colour in a stylesheet or style rule inside an IE-only class or conditional comment, to not wreck your design in every other browser!)
Precede your IE filter CSS rule with a Chroma filter set to the same colour as the background fill
It looks (almost) quite good!
jsfiddle examples (load in IE8, IE9)
...or if you don't have easy access to IE8/9, here's a screenshot from that fiddle in IE9 IE8 mode. Notice the difference between the horrible, artifact-ridden, pixelated mess that is IE's default filter, against the quite crisp, normal-looking Chroma filter equivalents.
CSS code examples. Note how you've got a Chroma filter then another filter, all on one line, in quotes against one -ms-filter - and how the Chroma colour matches the background colour precisely, and how the Chroma colour compliments (but doesn't match) the main effect colour:
.chroma-glow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
}
.chroma-shadow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}
Some requirements (learned the hard way...)
Elements must be block or inline-block, can't be inline.
Filters fail to apply to any children that are position: relative; or position: absolute;
(they work if applied directly to position: absolute; or `position: relative; elements)
If you're adding the filters dynamically, e.g. with jQuery like $elem.css('filter','progid...');, it seems like the background colour must be applied directly to the element with the filter for the chroma to work. A couple of tips:
Have the effect colour, applied background colour, and chroma colour all identical
Since you'll want this background colour only in IE, use feature detection or IE detection.
#element {
filter: glow(color=black,strength=5);
}
I have a question about IE8 with css. I pasted code in my css from msdn
.shadow {-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";}
I used the problem code like this
<div class="shadow"> <p>Bla Bla</p> </div>
And i have a problem about that. I want only DIV has shadow but "Bla Bla" has shadow too.
Can anyone suggest a method to fix this issue?
Thanks...
You need to specify a background color for your element:
http://jsfiddle.net/UNKAc/14/
.shadow {
background:#fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
}
Don't quote me on this but: i think this is because IE tries to cast a light that need a solid to drop a shadow. And since your div is transparent atm the only thing that can cast a shadow is the text itself.
You could apply background-color: #fff to your div, then you won't be able to see the shadow drawn by the text.
However, the filter doesn't look as good as box-shadow from CSS3.
IE8 does not support box-shadow, but you can emulate it with CSS3 PIE.
I know this is a couple weeks old, but if you're still tweaking at all you should really look at CSS3 PIE. One of my friends here at work showed it to me and it's pretty great if you can rely on JS for these types of enhancements for IE.
http://css3pie.com/documentation/pie-js/
We use the sliding doors technique in CSS with sliced background images as mentioned here to create buttons which are oval shaped and have the color change and press down effect.
Would it be possible to do something simmilar just with CSS but without using any background images.
You can in browsers that support CSS3 property border-radius (specs)
Examples at http://www.css3.info/preview/rounded-border/
In css you should use
a{..} to style the default style
a:hover{..} to style the over effect
a:active{..} to style the pressed effect
CSS3 property border-radius (specs) its ok.
but it was not working in IE and other browsers so please don't use this preporty and use background-color:#000;
.. but round-cornner not possible.
Thaks
Ptiwari
ok, i have this code:
<div style="border:5px solid rgba(0,0,0,0.5);background:#FF0000">yyyyy</div>
but it won't work in IE because it doesn't support rgba(), so, how do i achieve the same effect? hopefully without images or more divs...
Besides IE, there're a few other browsers that do not support rgba. For IE fallback, check this out: http://css-tricks.com/rgba-browser-support/
Without creating a background image (and applying a pngfix for IE6), you can't. More info: http://www.css3.info/opacity_rgba_and_compromise/