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:
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.
“pretty much all current browsers”… except Opera, which doesn’t support it.
Yeah :/ I did say pretty much. At least Opera is catered for with a flat background colour…