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/
Related
I want apply gradient to my element. I use less to do it.
For IE9 I use the following css:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FirstColour, endColorstr=#SecondColour)";
where #FirstColour =#b7d4ee and #SecondColour=#7a9eca;
It is the gradient like this:
But in IE9 with css-style defined above, I see the gradient like this:
When page load in IE9 browser, my less isn't compiled (not sure why) and render into:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FirstColour', endColorstr='#SecondColour')
How to get normal gradient display in IE9 with less using?
Use the gradient generator here
It provides all gradient solutions for every browsers, including IE. Instruction is explained there
Try creating gradient from here:
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
I'm wanting to create a neon sign of a logo for use on a website and also email signature.
I've a couple of questions I'm hoping a kind person can help me with.
For the email signature, I was thinking an animated gif would be best- just to be safe? However, I could use an html template- but I'm unsure the CSS animations used on the website version would render correctly in an (or numerous) email client(s)?
I've found this example of a CSS animated neon sign using typed letters in the mark-up. http://www.broken-links.com/tests/animations/
I was wondering if this same CSS animation technique would work with a flat image? How would the CSS know where the edges of the letters are? Would a transparent png work correctly using this technique? I've got the image as pixel or vector based if that helps?
This is a screen shot of the logo and quick mock up style of neon sign I want to create.
Thanks in advance!
The example you linked uses text only. It uses a #font-face rule to load a custom font, then animates the colour of the font. Its colour is flat.
What you are attempting to do involves rather more. The easiest solution would probably be to separate each letter into its own image, then you can animate the opacity property. This is probably the best you can hope for.
im not sure if i understand you well.. but this will apply a drop-shadow to a transparent image as applied on the neon text..
-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
filter: url(/assets/svg/shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,0.3)')";
filter: progid:DXImageTransform.Microsoft.S
This link also explains a lot about drop-shadow and box-shadow - due to the browser support it's not quite what I need for my project, but might be useful for someone else searching this drop shadow CSS trick.
http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison
I have a class called "button", I simply use it for all hover elements. Most of my buttons are black (background-color), and the .button:hover changes the background-color value of the items to gray.
However, some of my buttons have random colors so they lose the effect when their background-color changes to light gray. for this reason, I would like to change the "satauration" value of the hovered item instead of modifying the whole color. That way, the hover effect will base on the base color..
I was thinking... if it is possible to change the "saturation" value (only) of the background-color so that my hover effect will still be useful for random colors.
Using filter currently seems to only work for webkit-based browsers..
-webkit-filter: saturate(3);
filter: saturate(3);
Demo | Source
Coupling the saturation filter with brightness seems to have the most effect, with the black being visibly affected
-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);
Demo | Source
Additional demo: http://html5-demos.appspot.com/static/css/filters/index.html
There are two solutions for this problem:
First, use a transparent png with a white to transparent gradient. On onHover, apply the image over the button. I haven't tried it but it looks promising.
Second, use a css inset dropshadow. With the parameters set correctly, you can easily manage the gradient effect.
You can also use rgba(r,g,b,a) for making changes to the underlying button color. But remember that the text value of the button will also get affected, giving you issues of usability.
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'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