CSS3 Box Shadow Direction?

Up vote 0 down vote favorite share g+ share fb share tw.

I'm a total CSS3 noob, so please bear with me. I have the following HTML: Just a tip ... with the following CSS applied to the "input" field and "span" tag: inputtype="text", inputtype="password", textarea { border-top:1px solid #5F5F5F; border-left:1px solid #5F5F5F; border-bottom:1px solid #5F5F5F; border-right:1px solid #5F5F5F; border-top-left-radius:5px; border-bottom-left-radius:5px; padding:10px; width:200px; } inputtype="text":hover, inputtype="password":hover, textarea:hover { border: 1px solid #22C3EB; -webkit-box-shadow: 0 0 5px #22C3EB; -moz-box-shadow: 0 0 5px #22C3EB; box-shadow: 0 0 5px #22C3EB; } inputtype="text":focus, inputtype="password":focus, textarea:focus { border: 1px solid #972324; -webkit-box-shadow: 0 0 5px #972324; -moz-box-shadow: 0 0 5px #972324; box-shadow: 0 0 5px #972324; } . Tip { font-size:11px; border-top:1px solid #22C3EB; border-right:1px solid #22C3EB; border-bottom:1px solid #22C3EB; border-left:1px solid #5F5F5F; border-bottom-right-radius:5px; border-top-right-radius:5px; padding:12px 10px 10px 10px; width:200px; } .

Tip:hover { border: 1px solid #22C3EB; -webkit-box-shadow: 0 0 5px #22C3EB; -moz-box-shadow: 0 0 5px #22C3EB; box-shadow: 0 0 5px #22C3EB; } Basically, it is a rounded text field, with another span tag on the right, which also has rounded outer edges. It looks similar to the Twitter sign-up page. If you click on each input field field, you will get a general idea of the way my input and span tags are styled.

Is there a way to prevent the "box-shadow" from casting a shadow between the "input" and "span" fields? So, no shadow on the right side of the "input" field, and no shadow on the left side of the "span" tag? Please note I am trying to support both Mozilla and Webkit rendering engines in this CSS.

Thank you for your time, spryno724 webkit css3 box-shadow link|improve this question asked Apr 8 '11 at 0:54spryno7241,005212 100% accept rate.

Use inner-wrap and use box-shadow: -5px 0 0px #FFFFFF; jsfiddle.net/pramendra/y67Yt/3.

That is awesome, thanks JapanPro! – spryno724 Apr 8 '11 at 1:18 hi spryno724 , this is more specific, jsfiddle.net/pramendra/y67Yt/6 upvote if you like – JapanPro Apr 8 '11 at 1:34.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.