Skip to content

Instantly share code, notes, and snippets.

@chriseppstein

chriseppstein/1_gradient_input.scss

Created November 15, 2010 00:25
Show Gist options
  • Save chriseppstein/676260 to your computer and use it in GitHub Desktop.
Save chriseppstein/676260 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1_gradient_input.scss
$experimental-support-for-svg: true;
@import "compass/css3/version-2";
h1 {
border: 8px solid black;
@include border-image(radial-gradient(#0f0,#f00) 100 stretch);
@include background-image(linear-gradient(#0ff, #00f));
}
Raw
2_gradient_output.css
h1 {
border: 8px solid black;
-moz-border-image: -moz-radial-gradient(#00ff00, #ff0000) 100 stretch;
-webkit-border-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #00ff00), color-stop(100%, #ff0000)) 100 stretch;
border-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDBmZjAwIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g') 100 stretch;
border-image: radial-gradient(#00ff00 0%, #ff0000 100%) 100 stretch;
background-image: -moz-linear-gradient(#00ffff, #0000ff);
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ffff), color-stop(100%, #0000ff));
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDBmZmZmIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
background-image: linear-gradient(#00ffff 0%, #0000ff 100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment