I use the following code to create text outline. The code works fine to create text outline in IE8 and IE10, however, when I enable compatibility view in IE10, I no longer see the text outline. Any ideas on why it doesn't work in IE10-Compatibility view and suggestions to debug this problem.
<span style="color: white;
text-shadow: -1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000;
filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=100)
progid:DXImageTransform.Microsoft.dropshadow(color=#000000,offX=1,offY=1)
progid:DXImageTransform.Microsoft.dropshadow(color=#000000,offX=-1,offY=1)
progid:DXImageTransform.Microsoft.dropshadow(color=#000000,offX=1,offY=-1)
progid:DXImageTransform.Microsoft.dropshadow(color=#000000,offX=-1,offY=-1)\9;
zoom: 1\9;">Hello</span>
//for outline css
<span style="color: white;
text-shadow: -1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000;
filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=100)
progid:DXImageTransform.Microsoft.dropshadow(color=#000000,offX=1,offY=1)
progid:DXImageTransform.Microsoft.dropshadow(color=#000000,offX=-1,offY=1)
progid:DXImageTransform.Microsoft.dropshadow(color=#000000,offX=1,offY=-1)
progid:DXImageTransform.Microsoft.dropshadow(color=#000000,offX=-1,offY=-1)\9;
zoom: 1\9;outline-width:1px;outline-style:solid;outline-color:red;">Hello</span>
Related
<html>
<body style="font-size: 36px; background: #4488ff; color:#fff;">
<div>
<span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
</div>
<div style="text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
<span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
</div>
</body>
</html>
I've noticed that spanned Arabic text have gaps (tested on Chrome\FireFox). Well, I need text to be spanned and I don't think that gaps should exist, anyway I could overcome the issue?
Another option would be to use drop-shadow filter untill text-stroke works :
possible example:
span:nth-child(3) {
color: gold;
}
body {
font-size: 80px;
background: #4488ff;
color: #fff;
margin: auto;
}
html {
display: flex;
min-height: 100vh
}
<div style="filter:
drop-shadow(1px 1px 0px #000)
drop-shadow(-1px -1px 0px #000)
drop-shadow(-1px 1px 0px #000)
drop-shadow(1px -1px 0px #000)
">
<span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
</div>
Hello in Arabic there is no need to write in separate letters like English so you you need to write Full sentence with shadow for example :
// modified text
<div style="text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; color:#fff">
أظهر الكل
</div>
we use the plugin ubermenu and i want to add shadows below the menu bar and the dropdown, exactly like: nelly.se - our website is: http://94.247.169.169/~welloteket
I've been trying to add code:
#megaMenu ul.megaMenu{
box-shadow:2px 2px 0px 0px #ccc;
}
but without any result :(
you can add this code to apply a shadow effect on your submenu(dropdown)
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu-drop {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
no your code is work may be you have to try different color
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu-drop {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.71);
}
may be this is better than the before
I'm playing around with this font in css:
http://www.dafont.com/pix-lite.font
Is it possible to change the the inside color of it using just css?
I'm attaching a picture where I did what I'm looking for manually for reference.
This is what I want to do with css:
http://s9.postimg.org/7jp7b9pa7/Skive_2015_03_06_10_56_09.png
This is the closest I think you will get to having a text border.
http://jsfiddle.net/recwq5bg/
someElement {
text-shadow: 2px 0 0 #f00, -2px 0 0 #f00, 0 2px 0 #f00, 0 -2px 0 #f00, 1px 1px #f00, -1px -1px 0 #f00, 1px -1px 0 #f00, -1px 1px 0 #f00;
}
Hope this helps.
I don't know what happend with that font but it would help you: fiddle
span {
font-size: 30px;
color: red;
text-shadow: 1px 0 0 blue,-1px 0 0 blue, 0 1px 0 blue, 0 -1px 0 blue;
}
And HTML:
<span>Hello</span>
I have a very peculiar problem concerning formatted input buttons.
On my first page, I created a css rule named "button" for formatting buttons that stand alone in one row. it works perfectly, and the button appears as shown below
the css for this button is below
.button {
width: 100%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
In html, it looks like this:
<a href="dashboard.html">
<input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>
The problem is, I've copied this rule and altered it slightly in a second page for buttons which are parallel, and it doesn't format the buttons. strangely enough, it appears right in dreamweaver
but in any browser, it loses it's formatting
Here is the css for the parallel buttons
.2buttons {
width: 40%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
and here is the html
<a href="report.html">
<input class="2buttons" type="button" value="OK"/>
</a>
strangely enough, even if you apply the first css rule, which works, to these buttons, they still remain unformatted.
There two thing in your code.
first
Never start class &ID name with numerical number.
Write like this .buttons2 instead of this .2buttons.
& Second
Write like this
border:none !important;
Instead of this:
border:none; !important
border:none; !important should be border:none !important;
And change the class name to .twoButtons (or something else) instead of .2buttons as class names can't start with numbers...
Do NOT start a class name with a number! This is only supported in Internet Explorer.
See
http://www.w3schools.com/css/css_id_class.asp
Your problem in that the name of the class starts with number. You should change that.
I am using a tag next to the input box. There is inner box shadow given for both but the problem is , I need to make the entire thing to look like a one item (text box) so I need to remove the left side shadow of the text box.
Now you can see the line between the input and the a tag. How do I remove that line (tat is the shadow)
Here is the demo http://jsfiddle.net/jBeqk/
If I understand you right, you want to remove the thin shadow between the input and the link which stand as button.
Therefore I've modified your fiddle to get this one http://jsfiddle.net/jBeqk/75/
I've modified the shadow properties in both the input and the link
Input:
webkit-box-shadow: inset 1px 2px 1px #c3c1bb;
box-shadow: inset 1px 2px 1px
Link:
-webkit-box-shadow: inset -1px 2px 1px #c3c1bb;
box-shadow: inset -1px 2px 1px #c3c1bb;
You can noticed I've modified the first parameter setting it to '1px' for the input and to '-1px' for the link button to make the shadow respectively coming from the left and the right.
Regards.
Use this value for box-shadow
inset 0px 3px 1px -1px #c3c1bb
Add a negative spread (the forth value) and equalise for the x-value by adding back the spread amount
http://jsfiddle.net/HerrSerker/jBeqk/79/
Hi sowmya now you can do this
and remove left border of input text box
input[type="text"]{
-webkit-box-shadow: inset 1px 2px 1px #c3c1bb;
box-shadow: inset 1px 2px 1px #c3c1bb;
}
or second option is this
input[type="text"]{
-webkit-box-shadow: inset 0 2px 1px -1px #c3c1bb;
box-shadow: inset 0 2px 1px -1px #c3c1bb;
}
Live demo
-------------------------------------
------------------------------------------
if you total remove the shadow of your input and button
than apply this css
input[type="text"]{
-webkit-box-shadow: inset 1px 2px 1px #c3c1bb; box-shadow: inset 1px 2px 1px #c3c1bb;
}
.search_indexclose{
-webkit-box-shadow: 0 4px 1px -2px #C3C1BB inset;
box-shadow: 0 4px 1px -2px #C3C1BB inset;
}
this demo is
Try negative spread-radius:
input[type="text"]{box-shadow: inset 0 3px 0px -1px #C3C1BB;}
.search_indexclose{box-shadow: inset -2px 5px 0px -3px #C3C1BB;}