Last active
December 17, 2015 21:39
-
-
Save othersmallcities/5676028 to your computer and use it in GitHub Desktop.
A CodePen by taotsu. Fake Gradient Border - This is a quick and dirty demonstration, how to realize a fake border gradient. I did not want to use images, and I could only find <a href="http://css-tricks.com/examples/GradientBorder/">hacky</a> stuff. Its easy to do: Define the border-color, and continue with the border-top-color and the border-to…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header> | |
<h1>Fake Gradient Borders</h1> | |
</header> | |
<article> | |
<section> | |
<h2>Default Style</h2> | |
<button class="default">Some Text</button> | |
</section> | |
<section> | |
<h2>Black Style</h2> | |
<button class="black">Some Text</button> | |
</section> | |
<section> | |
<h2>Transparent Style</h2> | |
<button class="transparent">Some Text</button> | |
</section> | |
</article> | |
<footer> | |
<p>coded by <a href="http://taotsu.net">taotsu</a></p> | |
</footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body,a { | |
background-color: #7d0a0b; | |
color: #fff; | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
margin: 1em auto; | |
text-shadow: 0px -2px 0px #000; | |
max-width: 30em; | |
} | |
a { | |
text-decoration: none; | |
border-bottom: 1px solid #fff; | |
} | |
h1, h2 { | |
font-family: Futura; | |
} | |
button { | |
border: 1px solid; /*bordercolors are defined on each class!*/ | |
border-radius: 5px; | |
color: #fff; /*sadly has to be overwritten...*/ | |
font-size: 13px; | |
font-weight: bold; | |
padding: 6px; | |
text-shadow: 0px -1px 0px #000; /*sadly has to be overwritten...*/ | |
} | |
button.default { | |
/*fall back*/ | |
background: #6782a6; | |
/*gradient background*/ | |
background: -moz-linear-gradient(top, rgba(133,148,167,1) 0%, rgba(151,169,193,1) 2%, rgba(65,97,141,1) 93%, rgba(55,84,122,1) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(133,148,167,1)), color-stop(2%,rgba(151,169,193,1)), color-stop(93%,rgba(65,97,141,1)), color-stop(100%,rgba(55,84,122,1))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, rgba(133,148,167,1) 0%,rgba(151,169,193,1) 2%,rgba(65,97,141,1) 93%,rgba(55,84,122,1) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, rgba(133,148,167,1) 0%,rgba(151,169,193,1) 2%,rgba(65,97,141,1) 93%,rgba(55,84,122,1) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, rgba(133,148,167,1) 0%,rgba(151,169,193,1) 2%,rgba(65,97,141,1) 93%,rgba(55,84,122,1) 100%); /* IE10+ */ | |
background: linear-gradient(to bottom, rgba(133,148,167,1) 0%,rgba(151,169,193,1) 2%,rgba(65,97,141,1) 93%,rgba(55,84,122,1) 100%); /* W3C */ | |
/*fake gradient border*/ | |
border-color: #6782a6;/*define the general border color*/ | |
border-top-color:#a3b9d3; | |
border-bottom-color:#515965; | |
} | |
button.black { | |
/*fall back*/ | |
background: #202020; | |
/*gradient background*/ | |
background: -moz-linear-gradient(top, rgba(94,94,94,1) 0%, rgba(32,32,32,1) 49%, rgba(15,15,15,1) 50%, rgba(16,16,16,1) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(94,94,94,1)), color-stop(49%,rgba(32,32,32,1)), color-stop(50%,rgba(15,15,15,1)), color-stop(100%,rgba(16,16,16,1))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, rgba(94,94,94,1) 0%,rgba(32,32,32,1) 49%,rgba(15,15,15,1) 50%,rgba(16,16,16,1) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, rgba(94,94,94,1) 0%,rgba(32,32,32,1) 49%,rgba(15,15,15,1) 50%,rgba(16,16,16,1) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, rgba(94,94,94,1) 0%,rgba(32,32,32,1) 49%,rgba(15,15,15,1) 50%,rgba(16,16,16,1) 100%); /* IE10+ */ | |
background: linear-gradient(to bottom, rgba(94,94,94,1) 0%,rgba(32,32,32,1) 49%,rgba(15,15,15,1) 50%,rgba(16,16,16,1) 100%); /* W3C */ | |
/*fake gradient border*/ | |
border-color: #4b4b4b;/*define the general border color*/ | |
border-top-color:#7f7f7f; | |
border-bottom-color:#2a2a2a; | |
} | |
button.transparent { | |
/*fall back*/ | |
background: rgba(255,255,255,0.4); | |
/*gradient background*/ | |
background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ | |
background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* W3C */ | |
/*fake gradient border*/ | |
border-color: rgba(255,255,255,0.3); | |
border-top-color:rgba(255,255,255,0.7); | |
border-bottom-color:rgba(255,255,255,0.1); /*that does not work right, I dont know why...*/ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment