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 ...

Comments | Read more →