CODEWITHSUNDEEP
css
Dmitry Belaventsev
Dmitry Belaventsev

Reputation: 6657

CSS3 inner lighting for input

I need to make rounded inputs with inner lighting like on this picture:

enter image description here

I can make the rounding like this:

.loginRounded{
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    outline: 0;
    -webkit-appearance: none;
}

But I can't imagine how to make inner lighting with css3.

PS If it's impossible the last way is to use the image as a background.

UPD

Done with box-shadow attribute. But my variant still not the same with psd-layout...

enter image description here

UPD2 Finally done http://jsfiddle.net/Z3SB9/1/ - and the last question - in what browsers it will work correctly?

Upvotes: 1

Views: 913

Answers (2)

Hannes
Hannes

Reputation: 8237

box-shadow: inset is what you are looking for, take a look at http://jsfiddle.net/Z3SB9/ and play with the values!

Upvotes: 1

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

Try using a linear gradient, moz example:

background-image: -moz-linear-gradient(top, #eacfaf 0%, #FFF 50%);

fiddle: http://jsfiddle.net/Dnxy2/1/

Upvotes: 1

Related Questions