<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>
Related
I want to add a small triangle to the upper-right corner of an input type='text' HTML element, like Excel uses to indicate a comment.
The accepted answer to this question:
How to add triangle in table cell
shows how to do it for a table cell. I naively applied the "note" css class to my input element but it didn't work. Any suggestions for how to achieve this?
Pseudo elements can't be used on input's. You can use the same CSS as described in the linked post (here) but you would have to apply the class to an ancestor.
.note {
position: relative;
display: inline-block;
}
.note:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f00;
}
<div class="note">
<input type="text">
</div>
Given a simple input field
<input type="text" />
and assuming we can't use or rely on a parent element for styling, you may use multiple box-shadow to create a triangle, e.g.
Codepen demo
Result (triangle outside)
Code
input {
padding: 10px;
border: 1px #ccc solid;
margin: 15px;
box-shadow: 0 -12px 0 #fff, 12px 0px 0 #fff,
1px -12px 0 #fff, 2px -11px 0 #fff,
3px -10px 0 #fff, 4px -9px 0 #fff,
5px -8px 0 #fff, 6px -7px 0 #fff,
7px -6px 0 #fff, 8px -5px 0 #fff,
9px -3px 0 #fff, 10px -2px 0 #fff,
11px -1px 0 #fff, 12px 0 0 #fff,
8px -12px 0 #9bc;
}
Of course you can change the size of the triangle playing with the offset(y/x) of the box-shadow.
If you need to place the triangle inside the input you could just add a couple of properties to the code above and use outline and outline-offset instead of the border property to create the illusion of an outer border. All the shadows don't move from their position, just give enough space to the offset in order to wrap them.
Codepen demo
Result (triangle inside)
Code
input {
padding: 0;
border: 0;
outline: 1px #ccc solid;
outline-offset: 15px;
...
}
To mark all text inputs with red corner, you could use
textarea, input[type="text"], input:not([type]) {
background: linear-gradient(225deg, red 5px, white 5px);
}
If you want to mark only required fields, then use required attribute and selector:
[required] { background: linear-gradient(225deg, red 5px, white 5px); }
<input placeholder="optional field">
<input placeholder="mandatory field" required>
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 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>
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;}