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;}
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>
I have a small challenge:
how to add shadow to each letter in the header?
I tried this but add shadow to the whole div not to separate letter...
shall i wrap each letter in a span or what is the solution ?
h2 {
-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);
}
You need to use text-shadow instead of box-shadow
Edit:
text-shadow doesn't have a spread value
Using your example it would be:
h2 {
-webkit-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
-moz-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
}
As an important note to the answer of Ricardo Ribeiro i'd add that in this way compatibility is "limited" in IE to the version 10+
For versions < 10 till 5.5 a proprietary filter can be used as fallback:
h2 {
filter:progid:DXImageTransform.Microsoft.Shadow(color=#xxxxxx,direction=[int],strength=[int])
}
more info here
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 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 am trying to get an inside shadow working on an input field in Chrome. Unfortunately, this doesn't really work out so far. You can view a jsfiddle over here: http://jsfiddle.net/XgsPT/2/
My CSS:
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
And this simple HTML:
<input type="text" width="30">
But no shadow appears... (Chrome 24)
Give border to input field and the box-shadow will finally work.
http://jsfiddle.net/Jx8xF/
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
border: 1px solid #aaa;
}
The background color of the input is messing things up. Check out this updated fiddle, with this change to the CSS:
input {
/* ... rest as before ...*/
background-color: transparent;
}
Basically, WebKit doesn't allow us to add box-shadow to form controls with native appearance. We need to remove the nativa appearance.
input {
-webkit-appearance: none;
box-shadow: inset 0 0 10px #000000;
}
Also, some CSS properties such as border and background imply -webkit-appearance:none.
Rather than setting the background to transparent set it to white, or whatever colour you like, you just need to declare it and then it will work as it should