PDA

View Full Version : "Inset" button styles



Steffen Hiller
7 Feb 2011, 2:24 PM
Actually I'm not sure how to call this style, but anybody already created the CSS/Sass for those typical inset buttons used in various iOS apps, see attachment.

They don't seem to be built-in in ST, which surprises me a bit, therefore I thought I better ask before I do them myself. Shouldn't be too difficult.

Thanks.

jayrobinson
7 Feb 2011, 8:57 PM
Inset is the correct term, Steffen. You can use -webkit-box-shadow: inset to move the box shadow inside of the box rather than outside of it. You can also do multiple shadow declarations if you separate each by a comma.

E.g.

div {
-webkit-box-shadow: inset 0 1px 10px red, inset 0 10px 20px blue, inset 0 20px 30px green;
}

Steffen Hiller
8 Feb 2011, 4:35 AM
Thanks Jay for your help!

I actually did exactly that and it was actually pretty easy.
That's my result for now:
http://cl.ly/3I1a0t1T3z3D2k1t311E

Will generalize and share my code later.
Unfortunately you can't easily override or extend mixins in Sass, but custom mixins will have to do it.

Steffen Hiller
8 Feb 2011, 4:36 AM
test

jayrobinson
8 Feb 2011, 11:17 AM
Looks great!

Steffen Hiller
8 Feb 2011, 3:00 PM
Here's the source code + example:
http://www.senchatouchbits.com/3/adding-inset-buttons.html