Source : CSS Tricks – Gradient borders.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* * gradient border */ @mixin gradient-border( $border-width: 10px, $gradient-top-color: $white, $gradient-bottom-color: $black) { position: relative; border-top: $border-width solid $gradient-top-color; border-bottom: $border-width solid $gradient-bottom-color; &:before, &:after { content: ""; position: absolute; background-image: -webkit-gradient(linear, 0 0, 0 100%, from($gradient-top-color), to($gradient-bottom-color)); background-image: -webkit-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: -moz-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: -o-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: linear-gradient($gradient-top-color, $gradient-bottom-color); top: -$border-width; bottom: -$border-width; width: $border-width; } &:before { left: -$border-width; left: 0; //foundation 6 } &:after { right: -$border-width; right: 0; //foundation 6 } } |
border-image and linear-gradient
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
.top-to-bottom { border-width: 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; } .bottom-to-top { border-width: 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%; } .left-to-right { border-width: 3px 0 3px 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%; } .right-to-left { border-width: 3px 3px 3px 0; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%; } |
Pseudo Element Edges
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.ps-top-to-bottom { position: relative; border-top: 3px solid black; } .ps-top-to-bottom:before, .ps-top-to-bottom:after { content: ""; position: absolute; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); background-image: linear-gradient(#000, transparent); top: -3px; bottom: -3px; width: 3px; } .ps-top-to-bottom:before { left: -3px; } .ps-top-to-bottom:after { right: -3px; } .bot-left { position: relative; } .bot-left:before, .bot-left:after { content: ""; position: absolute; bottom: -3px; left: -3px; } .bot-left:before { top: -3px; width: 3px; background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent)); background-image: -webkit-linear-gradient(transparent, #000); background-image: -moz-linear-gradient(transparent, #000); background-image: -o-linear-gradient(transparent, #000); } .bot-left:after { right: -3px; height: 3px; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent)); background-image: -webkit-linear-gradient(left, #000, transparent); background-image: -moz-linear-gradient(left, #000, transparent); background-image: -o-linear-gradient(left, #000, transparent); } |
Pseudo Element Block Knockout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.knockout-top-to-bottom { position: relative; } .knockout-top-to-bottom:before, .knockout-top-to-bottom:after { content: ""; position: absolute; } .knockout-top-to-bottom:before { top: -3px; left: -3px; bottom: 0; right: -3px; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); z-index: -2; } .knockout-top-to-bottom:after { z-index: -1; top: 0; left: 0; bottom: 0; right: 0; background: #a4b9ff; } .knockout-around { position: relative; } .knockout-around:before, .knockout-around:after { content: ""; position: absolute; } .knockout-around:before { top: -3px; left: -3px; right: -3px; bottom: -3px; background-image: -webkit-gradient(radial, right top, 10, 90% 0%, 150, from(#000), to(transparent)); background-image: -webkit-radial-gradient(right top, 150px 230px, #000, transparent); background-image: -moz-radial-gradient(right top, farthest-corner, #000 0%, transparent 72%); z-index: -2; } .knockout-around:after { top: 0; left: 0; bottom: 0; right: 0; background: #a4b9ff; z-index: -1; } |
Multiple (Sized) Gradient Backgrounds
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.multbg-top-to-bottom { border-top: 3px solid black; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent), -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent), -o-linear-gradient(#000, transparent); background-image: linear-gradient(#000, transparent), linear-gradient(#000, transparent); -moz-background-size: 3px 100%; background-size: 3px 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; } |