So I require to have a text shadow (more like a border around the text which I create by using text-shadow) on my text, but the whole thing is with the focus of printing. At first I had the problem that the text-shadow wasn't rendered but after looking this up and using the following code:
#media print{
.p-progress h5{
-webkit-filter:
drop-shadow(1px 0 0 #1e1f21)
drop-shadow(-1px 0px 0 #1e1f21)
drop-shadow(0 1px 0 #1e1f21)
drop-shadow(0px -1px 0 #1e1f21);
}}
The text gets blurry when seen in the print preview:
Does anyone know how to fix this, or have some kind of text border working when printing?
Thanks in advance for further information.
Related
As you can see in the picture, the background becomes white when the browser autofills. What I want is like the input below, so the background is transparent.
Set the following properties with a box-shadow, just like this. Your desired background color should be there, in the box shadow. Using transparent won't work, but you can try setting an alpha value for rgba
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px #0F0F0F inset !important;
}
You might have to use -moz-autofill and ms-autofill too if the autocomplete in Firefox and Internet Explorer also changes the background. Otherwise, the above code should work well
You can edit the autofill style by using :-webkit-autofill
:-webkit-autofill {
-webkit-text-fill-color: #fff;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
}
please, help me set border over CSS for tag select for media print in Opera 38.0. I need disable print its border. This setting not function:
select{border:none !important;}
Thank
Jarda
box-shadow: inset 0 0 0 5px #fff !important;
This worked for me :)
I have a map built using the ArcGIS javascript API, and everything works except some CSS I want to apply to some labels. That doesn't work in IE10+.
To apply the CSS to the labels I listen for the graphic-node-add event, and apply the CSS to the graphic node:
on(layerLabels, 'graphic-node-add', function (addedGraphicNode) {
addedGraphicNode.node.style.textShadow = "1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white";
});
This works in Chrome and Firefox, but IE doesn't like this, and the text shows up normal. And it's not just the shadow that doesn't work in IE. No CSS I apply this way works in IE.
However this, added in the style tag, does work, and shadows the text of the scale bar in all browsers including IE:
.esriScalebarLabel{
color:black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
I've tried a couple different ways to get the CSS to work on the labels in IE, including catching the graphic-draw event, rather than the graphic-node-add event, as well as style.setProperty("text-shadow",...) method, and both fail. Any ideas?
EDIT 6/4/15
Here's a fiddle showing the issue...
http://jsfiddle.net/gvgwybta/1/
The map doesn't show up quite right, but the labeling issue can still be seen. Chrome, label shadows work. IE, they don't.
This question already has answers here:
CSS Border on PNG image with transparent parts
(6 answers)
Closed 8 years ago.
I was wondering how to draw a border around an image that is semitransparent, that is, I do not want a box-shaped border, nor a border radius, but a border that actually applies to the shape of the image itself.
According to this post it's not possible, and this one simply suggest to edit the image in some photo editing program such as Photoshop.
But what if the image input isn't mine? If I needed to process a series of user-inputed images to my website and add that border, the software option wouldn't work.
One way to tackle that would be to use canvas, but isn't there a pure, simple, css way of doing this? Thanks.
As of now (January 31st 2015) there is a way to do that without using canvas, with pure CSS, and with only 2 lines of code.
The trick is using the css filter and -webkit-filter properties to draw two drop shadows with no blur, one for the positive axis and one for the negative, which will wrap around the image, which will provide the (hopefully) desired effect.
Note: css filters are not at all supported in IE (let's hope Spartan does better), here is a compatibility table. (Thanks web-tiki)
This first snippet (fiddle) will apply the simplest border possible.
img {
-webkit-filter: drop-shadow(1px 1px 0 black)
drop-shadow(-1px -1px 0 black);
filter: drop-shadow(1px 1px 0 black)
drop-shadow(-1px -1px 0 black);
}
body {
background-color: lightcoral;
}
<img src="http://i.imgur.com/GZoXRjS.png" width="250">
As you can see, some images (like this awesome baymax render) need a little more tweaking, you can see the right border is a little smaller than the left.
With that in mind, here is the perfected border snippet (fiddle) with just a really tiny value tweak.
img {
-webkit-filter: drop-shadow(2px 1px 0 black)
drop-shadow(-1px -1px 0 black);
filter: drop-shadow(2px 1px 0 black)
drop-shadow(-1px -1px 0 black);
}
body {
background-color: khaki;
}
<img src="http://i.imgur.com/GZoXRjS.png" width="250">
That should cover borders pretty well, but we can still have more fun with this, look at this awesome lightness effect snippet (fiddle).
img{
-webkit-filter: drop-shadow(1px 1px 0 black)
drop-shadow(-1px -1px 0 white);
filter:drop-shadow(1px 1px 0 black)
drop-shadow(-1px -1px 0 white);
}
body{
background-color:lightblue;
}
<img src="http://i.imgur.com/GZoXRjS.png" width="250">
Hope this helps anyone wondering about the possibility of a wrap-around border for semitransparent images!
I'm not associated in any form with the following page:
http://www.wpsyndicator.com/
However, as you can see on that page, they used images to show the white-outlined, shadowed, red text. Is there a way in CSS3 to implement this feature? I mean, I can handle the shadow and the red, but the white font outlining is not something I'm familiar with.
You are looking for text-stroke.
-webkit-text-stroke: 1px white;
It is only supported by the web-kit for now, you can see the compatibility list here http://caniuse.com/text-stroke
More Info:
http://css-tricks.com/adding-stroke-to-web-text/
http://www.webkit.org/blog/85/introducing-text-stroke/
Here is an example from David: http://jsfiddle.net/davidThomas/h5J6K/2/
You can use the css3 text-shadow property to achieve this effect. Will not work in IE tho so will have to find some one to emulate the effect in that browser. The code looks like this...
#myDiv {
text-shadow: 1px 1px 1px #fff, 2px 2px 1px #fff, -1px -1px 1px #fff, -2px -2px 1px #fff;
}
The first argument is the horizontal distance from the text, the second, the vertical, the third is the blur. the lower this number the less blur. you do negatives to go up or to the left. This is cool and you can do some really neat effects with this. Hope that helps