Got some gradient background?!
A Pen by Kevin Jannis on CodePen.
Got some gradient background?!
A Pen by Kevin Jannis on CodePen.
<div class="hero hero--intro"></div> | |
<div class="hero hero--1"></div> | |
<div class="hero hero--2"></div> | |
<div class="hero hero--3"></div> | |
<div class="hero hero--4"></div> | |
<div class="hero hero--5"></div> | |
<div class="hero hero--6"></div> | |
<div class="hero hero--7"></div> | |
<div class="hero hero--8"></div> | |
<div class="hero hero--9"></div> | |
<div class="hero hero--10"></div> |
/* | |
Got some more cool color combinations? Let me know and I will add them.. | |
*/ |
@import "http://fonts.googleapis.com/css?family=Lato:300"; | |
$gradients: ( | |
intro: ( | |
from: #4567b2, | |
to: #8ab9ff | |
), | |
1: ( | |
from: #76ad39, | |
to: #cdff8a | |
), | |
2: ( | |
from: #b24592, | |
to: #f15f79 | |
), | |
3: ( | |
from: #432b58, | |
to: #734b6f | |
), | |
4: ( | |
from: #904e95, | |
to: #e96450 | |
), | |
5: ( | |
from: #ff5f6d, | |
to: #ffc371 | |
), | |
6: ( | |
from: #ff9068, | |
to: #ff4b1f | |
), | |
7: ( | |
from: #ffa000, | |
to: #ff5000 | |
), | |
8: ( | |
from: #b993d8, | |
to: #8ca6dc | |
), | |
9: ( | |
from: #3ca55f, | |
to: #b5ac59 | |
), | |
10: ( | |
from: #2a99ef, | |
to: #52d9e5 | |
) | |
); | |
.hero { | |
position: relative; | |
width: 100%; | |
height: 110vh; | |
color: white; | |
text-align: center; | |
font-family: Lato, sans-serif; | |
font-weight: 300; | |
text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); | |
border-bottom: solid 5px white; | |
&:before, | |
&:after { | |
position: absolute; | |
display: block; | |
top: 50%; | |
left: 0; | |
right: 0; | |
max-width: 600px; | |
margin: 0 auto; | |
} | |
&:before { | |
content: "Good news, everyone!"; | |
font-size: 46px; | |
line-height: 60px; | |
margin-top: -40px; | |
} | |
&:after { | |
content: "I've taught the toaster to feel love!"; | |
font-size: 20px; | |
line-height: 30px; | |
margin-top: 20px; | |
} | |
&--intro { | |
&:before { | |
content: "Gradient backgrounds"; | |
} | |
&:after { | |
content: "A curated collection"; | |
} | |
} | |
@each $index, $gradient in $gradients { | |
&--#{$index} { | |
background: linear-gradient( | |
135deg, | |
map-get($gradient, 'from') 20%, | |
map-get($gradient, 'to') 80% | |
); | |
} | |
} | |
} |