Menu
is there a way using CSS3 to get an inset/inner dropshadow on a text inputbox? The inset code below will only do boxes
-moz-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
350
Approach: To give the inset shadow to an element, we will use the box-shadow property. In the box-shadow property, we will define the h-offset value ( It is compulsory for the horizontal shadow effect ), then the v-offset value (It is compulsory for the vertical shadow effect ).
CSS Syntax box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; Note: To attach more than one shadow to an element, add a comma-separated list of shadows (see "Try it Yourself" example below).
In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow ). The box-shadow property takes a number of values: The offset on the x-axis. The offset on the y-axis.
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. <offset-x> <offset-y> These are two <length> values to set the shadow offset.
Try this - http://jsfiddle.net/3TYTt/
input {
-webkit-box-shadow:inset 0 0 10px #000;
-moz-box-shadow:inset 0 0 10px #000;
box-shadow:inset 0 0 10px #000;
background: transparent;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
