Advanced Search

Cross-browser Linear Gradient for Sublime Text 2

/ Published in: CSS
Save to your folder(s)
Snippet for Sublime Text 2 with variables for the top and bottom colors. Just tab between them.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <snippet>
  2. 	<content>
  3. 		<![CDATA[
  4. background-color: ${1:top};
  5. background-image: -webkit-gradient(linear, left top, left bottom, from(${1:top}), to(${2:bottom})); /* Saf4+, Chrome */
  6. background-image: -webkit-linear-gradient(top, ${1:top}, ${2:bottom}); /* Chrome 10+, Saf5.1+, iOS 5+ */
  7. background-image:    -moz-linear-gradient(top, ${1:top}, ${2:bottom}); /* FF3.6 */
  8. background-image:     -ms-linear-gradient(top, ${1:top}, ${2:bottom}); /* IE10 */
  9. background-image:      -o-linear-gradient(top, ${1:top}, ${2:bottom}); /* Opera 11.10+ */
  10. background-image:         linear-gradient(top, ${1:top}, ${2:bottom});
  11. filter: "progid:DXImageTransform.Microsoft.Gradient(startColorstr=${1:top}, endColorstr=${2:bottom})";
  12. -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorstr=${1:top}, endColorstr=${2:bottom})";
  13. 		]]>
  14. 	</content>
  15.  
  16. 	<tabTrigger>gradient</tabTrigger>
  17. 	<scope>source.css</scope>
  18. 	<description>Cross-browser vertical linear gradient</description>
  19. </snippet>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.