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.


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.