Posted by Mikko Lehtinen on Friday 05. November 2010 | Tagged as css3, gae, sass

Using CSS3 isn’t quite as easy as it should be. Lots of advanced functionality requires using vendor prefixes which easily bloats your stylesheet with repetitive properties.

One solution to this is using Sass. Especially Sass mixins and color functions can radically reduce the amount of code you need to write. Combine that with CSS3Pie to add IE support and you have quite elegant solution for making cross-browser supported CSS.

Making buttons

Here’s one way of making nice looking buttons with pure CSS3. Rounded borders and gradient can be added this way with no extra markup or images.

Enable CSS3Pie support

@mixin pie //using CSS3Pie for IE support behavior: url(/PIE.htc) .pie @include pie

On a side note, if you want to serve PIE.htc with app engine add this to your app.yaml:
- url: /PIE.htc static_files: media/css/PIE.htc mime_type: text/x-component upload: media/css/PIE.htc

Sub mixin for gradients

@mixin vertical-gradient($bgcolor1, $bgcolor2, $bgcolor3, $bgcolor4) // cross browser mixin for gradients @extend .pie background: $bgcolor1 background: -moz-linear-gradient(0% 100% 90deg, $bgcolor1 0%, $bgcolor2 50%, $bgcolor3 50%, $bgcolor4 100%) background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, $bgcolor4), color-stop(0.5, $bgcolor3), color-stop(0.5, $bgcolor2), color-stop(1, $bgcolor1)) -pie-background: linear-gradient(90deg, $bgcolor1, $bgcolor4)

With this mixin you can give four colors as parameter which are included in gradient from bottom to top.

Mixin for rounded corners

@mixin round-borders($bordercolor, $tl: 8px, $tr: nil, $br: nil, $bl: nil) // cross browser mixin for rounded borders @extend .pie border: 1px solid $bordercolor @if $tr nil $tr: $tl @if $br nil $br: $tl @if $bl == nil $bl: $tl -moz-border-radius: $tl $tr $br $bl -webkit-border-top-left-radius: $tl -webkit-border-bottom-left-radius: $bl -webkit-border-top-right-radius: $tr -webkit-border-bottom-right-radius: $br border-radius: $tl $tr $br $bl

Parameters include border color and radius of roundness for each corner. For example @include round-borders(#fff) would make 8px round white borders.

Button mixin

See the complete code:

Usage

Put above code in _buttons.sass and include it in your style sheet. For example:
@import "_buttons.sass" $color1: #155163 ... button.blue @include mybutton($color1, $color2, $color3, $color4, white, $color1, $color1)

That should work after you define the colors.