Zeroed and Noughted

Home > TextMate > CSS3 Snippets in TextMate – border-radius

CSS3 Snippets in TextMate – border-radius

June 29th, 2010

I don’t have the best memory in the world. I am incapable of remembering the exact syntax for most CSS properties, let alone the vendor specific versions of them. To that end I have started creating TextMate snippets to help me out.

text-shadow comes by default, but border-radius does not.

Create these 5 snippets within CSS:



Name:
border-radius
Tab trigger:
border-radius
Snippet:

border-radius: ${1:radius};
-moz-border-radius: ${1:radius};
-webkit-border-radius: ${1:radius};
$0



Name:
border-top-left-radius
Tab trigger:
border-radius
Snippet:

border-top-left-radius: ${1:radius};
-moz-border-radius-topleft: ${1:radius};
-webkit-border-top-left-radius: ${1:radius};
$0



Name:
border-top-right-radius
Tab trigger:
border-radius
Snippet:

border-top-right-radius: ${1:radius};
-moz-border-radius-topright: ${1:radius};
-webkit-border-top-right-radius: ${1:radius};
$0



Name:
border-bottom-left-radius
Tab trigger:
border-radius
Snippet:

${1:radius};
-moz-border-radius-bottomleft: ${1:radius};
-webkit-border-bottom-left-radius: ${1:radius};
$0



Name:
border-bottom-right-radius
Tab trigger:
border-radius
Snippet:

${1:radius};
-moz-border-radius-bottomright: ${1:radius};
-webkit-border-bottom-right-radius: ${1:radius};
$0

Now, anywhere that is a CSS context (inside a CSS file or inside style tags in an HTML file) type border-radius and press tab. TextMate asks which of our five snippets you want. Choose the appropriate one by typing the number alongside it, and the code appears. Now type the radius you want (don’t forget, you can enter two values if you want the equivalent of an elliptical radius) and it will automatically appear for all vendor-specific code. Finally, press tab again and your cursor jumps outside of the code we just typed.

I’ll provide more of these as I make them.

Share this Article: