As promised, the next in the series – box-shadow.
Create this snippets within CSS:
-moz-box-shadow: ${1:hOffset} ${2:vOffset} ${3:blurRadius} ${4:color};
-webkit-box-shadow: ${1:hOffset} ${2:vOffset} ${3:blurRadius} ${4:color};
box-shadow: ${1:hOffset} ${2:vOffset} ${3:blurRadius} ${4:color};
$0
More to come. Any requests?
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:
border-radius: ${1:radius};
-moz-border-radius: ${1:radius};
-webkit-border-radius: ${1:radius};
$0
border-top-left-radius: ${1:radius};
-moz-border-radius-topleft: ${1:radius};
-webkit-border-top-left-radius: ${1:radius};
$0
border-top-right-radius: ${1:radius};
-moz-border-radius-topright: ${1:radius};
-webkit-border-top-right-radius: ${1:radius};
$0
${1:radius};
-moz-border-radius-bottomleft: ${1:radius};
-webkit-border-bottom-left-radius: ${1:radius};
$0
${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.
Recently Noughted