CSS3 Snippets in TextMate – Linear Gradients

Gradients are great. Linear gradients are super-great, because (as long as you don’t want funky angles) they work on pretty much all current browsers if you can remember the syntax. I can’t remember the syntax, but with a little home-schooling TextMate can…

Create these 2 snippets within TextMate’s CSS scope:

Name:
background: vertical linear gradient
Tab trigger:
background
Scope Selector:
source.css
Snippet:
background: ${1:top-color};
background: -webkit-gradient(linear, left top, left bottom, from(${1:top-color}), to(${2:bottom-color}));
background: -moz-linear-gradient(top, ${1:top-color}, ${2:bottom-color});
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=${1:top-color}, endColorstr=${2:bottom-color});
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=${1:top-color}, endColorstr=${2:bottom-color})";
$3

Name:
background: horizontal linear gradient
Tab trigger:
background
Scope Selector:
source.css
Snippet:
background: ${1:left-color};
background: -webkit-gradient(linear, left top, right top, from(${1:left-color}), to(${2:right-color}));
background: -moz-linear-gradient(left top, ${1:left-color}, ${2:right-color});
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=${1:left-color}, endColorstr=${2:right-color}, GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=${1:left-color}, endColorstr=${2:right-color}, GradientType=1)";
$3

Now, typing background within a CSS context and pressing tab should show something like this:

background.jpg

Choosing one of the two new options at the bottom will give you all the code you need for most browsers to show a horizontal or vertical linear gradient. The first colour you enter (either the top-most or left-most colour) will become the default background for browsers that don’t support gradients, which is hopefully usually what you want. In case you were wondering, -ms-filter is specifically for IE8 (in IE8-mode) which requires quotes around the contents.

2 thoughts on “CSS3 Snippets in TextMate – Linear Gradients

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>