This question already has answers here:
Text Shadow in Internet Explorer?
(4 answers)
Closed 10 years ago.
I'm using following in CSS to outline my fonts with some border but this doesn't work in IE, is there any possibility, I can do the similar stuff so that this works in IE. At present, this works well in Chrome, FF, Safari.
.ItemPrice {
font-size: 40px;
color: #E8C61E;
-webkit-text-stroke: 1px #B2412F;
text-shadow: -1px 0 #B2412F, 0 1px #B2412F, 1px 0 #B2412F, 0 -1px #B2412F;
}
As these are prices coming out dynamically, I can't use images. If anyone could help me, it would be great.
Adding more description to it as people marked it duplicate question.
I know that I can use Filter to create the shadow but that doesn't give a border like feel to the font.
If we play with multiple dropShadow Filters to create Border, the font gets cut off from the corners, which again doesn't look good.
There are JS plugins available for creating the Fonts with border but as the Price which I need to display has to be displayed multiple times on the same page so it makes it very slow using those JS plugins.
Thanks in advance.
you could make multiple text shadows with the filter:
filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
You could look into this, it works similar to css3 PIE but has some text shadow functionality. I have never used this specific one but it may be worth a shot.
http://www.fetchak.com/ie-css3/
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make rounded border in IE8 with CSS?
I set this code for Border. I need to set rounded corners for this border.
This code works with E9, I need it to work in old browser like IE6, IE7, IE8
My code in CSS
border-radius: 11px 11px;
border:1px solid #373737;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
I suggest CSS3 PIE - http://css3pie.com/
PIE makes Internet Explorer 6-9 capable of rendering several of the
most useful CSS3 decoration features.
There is no support of border-radius in older browsers, you got to use scripts such as CSS3Pie to get it working in them.
Be aware that in your CSS, you will have to use behaviour property which isn't valid and will cause your CSS not to validate against W3C Validator.
I'm having a problem applying a outline/stroke to text that looks good and/or even works on every browser. Right now I'm using:
<div style="font-family: Helvetica,sans-serif;color: #FFFFFF;font-size:40px;font-weight:bold;letter-spacing:-1px;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;filter:DropShadow(Color=#000000, OffX=2, OffY=2);">Text Example</div>
And while this applies an outline to the text on Firefox, Chrome, and Safari -- it doesn't look that good with some corners not using an outline and the outline doesn't even work in IE so it switches to just using a shadow. Is there a better method of applying a text outline/stroke that will look better and work in every browser?
Text shadow wasn't intended to emulate stroke, so caveat emptor.
Use SVG instead.Take a look here
Actually text-shadow is not meant to add stroke to text, so it doesn't generate accurate effect you want. However it look acceptable if you are using 1px/-1px size of shadow.
you can try JavaScript for that.. "http://www.netzgesta.de/dev/text/#overview"
see if it helps you.
So I've been working on a HTML5 iPad application for work and have come across a problem. I didn't have access to an iPad whilst first working on this app and relied on desktop Safari to get my app quickly together (probably not the best thing, anyhow...)
I'm having to rely on a input range for a part of the interface. After seeing that HTML5 had a range input, I was happy as this is just what I needed. I even managed to style it up to exactly what was designed:
This is great! ...until I actually tried it on an iPad and it doesn't work. Just shows a text input. I'm now wondering what to do... I do need a slider, something that when dragged, it spits out the data. Obviously needs to work with touch. After looking around all over the web, there doesn't seem to be a solid solution.
What do you guys suggest here? What's the proper way of coding up a working touch-friendly slider, just like the native HTML5 one that it doesn't support!?
Any ideas/thoughts/knowledge/experience would be greatly appreciated!
James
I tested all the proposed "solutions" and found them all lacking.
All are excessively bloated, some change your existing markup or force unnecessary CSS styles.
So I crafted my own solution in 2kb of JavaScript (minified).
Try it (on your mobile device): https://range-touch.herokuapp.com
Code: https://github.com/dwyl/range-touch (concise and commented)
To get this working in your own project all you need to do is include the range-touch.min.js file in your page/template.
Magically <input type="range"> works on all mobile devices.
You can style the slider & button how ever you like.
I've included sample styles in the optional/style.css
Note: this solution Assumes you have JQuery or Zepto.js
You could have a look over http://jqueryui.com/demos/slider/ .
Try accessing the page on the iPad and see if it's touch friendly.
I have exactly the same problem, only with an iPhone.
This is because Mobile Safari only supports a subset of HTML5. I am using JqTouch which is causing me all manner of issues so do avoid this framework.
Take a look at jquery mobile. Its currently Alpha 3, but has a slider control which works on iOS.
Hope this helps you a little.
Try this one - https://github.com/freqdec/fd-slider. Even the tooltip on the demo page is working on mobile safari - http://www.frequency-decoder.com/demo/fd-slider/tooltip/.
There's a fix for rangeinput from jquerytools for touch devices: https://github.com/Patrick64/jquerytools/blob/dev/src/rangeinput/rangeinput.js
Works like a charm!
I found that you have to use a very light touch on Safari mini-tablet (or phone), and the slider works. If you press down too hard, Safari Mobile (or tablet), tries to bring up the "select/select all" pop-up bubble, as if it were a text field. Also, Safari on my tablet or phone thought that I wanted to "move the window around" - I have not found a solution to these issues yet. However, I did get the slider to work in Safari with a "light finger touch".
I found the following resources to be helpful:
Pen by Aron Woost:
https://codepen.io/aronwoost/pen/nlyrf
Here is a sample of Woost's code:
input[type="range"] {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
width: 100%;
height: 20px;
margin: 0;
border: none;
padding: 1px 2px;
border-radius: 14px;
background: #232528;
box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
-webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
outline: none; /* no focus outline */
}
Daniel Stern:
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
You can do a google search on " How to style range sliders in Webkit
By Sara Vieira" and find her article.
I hope this helps.
An easy and quick SOLUTION!
The input range slider can be made User-Friendly on a mobile device by removing the troublesome highlight effect on the slider when tapped upon.
The Fix - Add the CSS property, -webkit-tap-highlight-color: transparent to the CSS of the element or the complete html page. This will remove the highlight effect on an element when it is tapped on a mobile device.
Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.
I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)
If not possible, what would be some good workaround techniques?
It is possible with an SVG filter.
The basics of it is that it's just a simple feGaussianBlur.
Here it is: http://jsfiddle.net/aXUtU/1/
This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).
There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.
Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.
Well... I came up with this:
.blur {
color: transparent;
text-shadow: 0px 0px 2px #000000;
}
This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!
Have fun with experiments!
Hey everyone,
Again I need your help :D
Is it possible to add the shadow effect to the text in HTML using only CSS ?? I'm working on a project that has a lot of buttons and I need to find a way to add the shadow effect to the text in them without using images and to be compatible with the most used browsers. I tried using the "text-shadow" property in the CSS but it didn't work.
Thanks
Yes, here is the syntax:
text-shadow: 2px 2px 2px #000;
Generally:
text-shadow: x y blur color;
and a link to the page I found it: http://www.css3.info/preview/text-shadow/.
Yes. And you can find several answer to your question via Google, but this is one of the bests: http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
As IE is still the most used browser, I´m afraid the answer is no.
However, if you are willing to let go of your requirement of only css, you can use for example this jQuery plugin.
While this question has been answered already, I thought it worth adding that it's possible to add support for IE8, using the following filters:
filter: glow(color=#ffff00,strength=3);
filter: dropshadow(color=#ffff00,offX=5,offY=5);
Unfortunately this only seems to work if the element has display: block; and a defined height (or) width; or the element has position: absolute; which is a little less than wonderful.
Citing my source for this: Text-shadow, at: http://www.howtocreate.co.uk/textshadow.html, although I'm unable to verify the accuracy, since I don't routinely use IE (any version) or Windows, given the chance.