/r/web_design monthly challenge number 1. Details can be found here: https://www.reddit.com/r/web_design/comments/6mief5/rweb_design_monthly_challenges_episode_1_css/
A Pen by ryuuseiistar on CodePen.
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> | |
<div id="weather-animations"> | |
<div class="row"> | |
<div class="weather"> | |
<div id="rays" class="rays"></div> | |
<div id="sun" class="sun"></div> | |
</div> | |
<div class="desc">sunny</div> | |
</div> | |
<br /> | |
<div class="row"> | |
<div class="weather"> | |
<div id="miniRays" class="rays"></div> | |
<div id="miniSun" class="sun"></div> | |
<div id="miniCloud" class="cloud"></div> | |
</div> | |
<div class="desc">partly cloudy</div> | |
</div> | |
<br /> | |
<div class="row"> | |
<div class="weather"> | |
<div id="miniDarkCloud" class="cloud"></div> | |
<div id="cloud" class="cloud"></div> | |
</div> | |
<div class="desc">cloudy</div> | |
</div> | |
<br /> | |
<div class="row"> | |
<div class="weather"> | |
<div id="raindrop1" class="raindrop"></div> | |
<div id="raindrop2" class="raindrop"></div> | |
<div id="raindrop3" class="raindrop"></div> | |
<div id="raindrop4" class="raindrop"></div> | |
<div id="darkCloud" class="cloud"></div> | |
</div> | |
<div class="desc">rainy</div> | |
</div> | |
<br /> | |
<div class="row"> | |
<div class="weather"> | |
<div id="star1" class="star"></div> | |
<div id="moon"></div> | |
<div id="star2" class="star"></div> | |
<div id="star3" class="star"></div> | |
</div> | |
<div class="desc">night</div> | |
</div> | |
</div> |
/r/web_design monthly challenge number 1. Details can be found here: https://www.reddit.com/r/web_design/comments/6mief5/rweb_design_monthly_challenges_episode_1_css/
A Pen by ryuuseiistar on CodePen.
@mixin background($colour1, $colour2) { | |
background: -webkit-linear-gradient($colour1, $colour2); | |
background: -moz-linear-gradient($colour1, $colour2); | |
background: -ms-linear-gradient($colour1, $colour2); | |
background: -o-linear-gradient($colour1, $colour2); | |
background: linear-gradient($colour1, $colour2); | |
} | |
@mixin border-radius($radius) { | |
-webkit-border-radius: $radius; | |
-moz-border-radius: $radius; | |
-ms-border-radius: $radius; | |
-o-border-radius: $radius; | |
border-radius: $radius; | |
} | |
@mixin rotate($degrees) { | |
-webkit-transform: rotate($degrees); | |
-moz-transform: rotate($degrees); | |
-ms-transform: rotate($degrees); | |
-o-transform: rotate($degrees); | |
transform: rotate($degrees); | |
} | |
@mixin scale($points) { | |
-webkit-transform: scale($points); | |
-moz-transform: scale($points); | |
-ms-transform: scale($points); | |
-o-transform: scale($points); | |
transform: scale($points); | |
} | |
@mixin fadeIn($seconds) { | |
-webkit-animation: fadein $seconds; | |
-moz-animation: fadein $seconds; | |
-ms-animation: fadein $seconds; | |
-o-animation: fadein $seconds; | |
animation: fadein $seconds; | |
} | |
$white: #FFFFFF; | |
$skyLight: #55C1FF; | |
$skyDark: #33658A; | |
$sunLight: #FEC601; | |
$sunDark: #EA7317; | |
$cloudLight: #DBE4EE; | |
$cloudDark: #A9BBCF; | |
$darkCloudLight: #90A7BF; | |
$darkCloudDark: #7792AF; | |
$raindrop: #0A81D1; | |
$nightLight: #ECE4B7; | |
$nightDark: #BFADA3; | |
html { | |
@include background($skyLight, $skyDark); | |
min-height: 100%; | |
} | |
body { | |
text-align: center; | |
#weather-animations { | |
display: inline-block; | |
width: 50%; | |
.row { | |
display: flex; | |
align-items: center; | |
height: 200px; | |
width: auto; | |
.weather { | |
display: inline-block; | |
position: relative; | |
width: 200px; | |
min-width: 200px; | |
height: 200px; | |
.rays { | |
background: $sunLight; | |
position: absolute; | |
z-index: 0; | |
@include rotate(20deg); | |
animation: sunRotate 10s infinite linear; | |
} | |
.rays:after { | |
content: ""; | |
background: $sunLight; | |
position: absolute; | |
z-index: 0; | |
@include rotate(40deg); | |
} | |
.sun { | |
display: relative; | |
@include background($sunLight, $sunDark); | |
@include border-radius(50px); | |
position: absolute; | |
z-index: 1; | |
} | |
.cloud { | |
@include border-radius(50px); | |
position: relative; | |
z-index: 2; | |
} | |
.cloud:before { | |
content: ""; | |
@include border-radius(50px); | |
position: absolute; | |
z-index: 2; | |
} | |
.cloud:after { | |
content: ""; | |
position: absolute; | |
@include border-radius(50px); | |
z-index: 3; | |
} | |
.raindrop { | |
width: 5px; | |
height: 5px; | |
border-radius: 80% 0 55% 50% / 55% 0 80% 50%; | |
border: 3px solid $raindrop; | |
background: $raindrop; | |
display: inline-block; | |
@include rotate(-45deg); | |
position: relative; | |
backface-visibility: hidden; | |
} | |
.star { | |
margin: 50px 0; | |
position: relative; | |
display: block; | |
width: 0px; | |
height: 0px; | |
border-left: 100px solid transparent; | |
border-right: 100px solid transparent; | |
border-bottom: 70px solid $nightLight; | |
@include rotate(35deg); | |
@include scale(.15); | |
} | |
.star:before { | |
content: ""; | |
border-left: 30px solid transparent; | |
border-right: 30px solid transparent; | |
border-bottom: 80px solid $nightLight; | |
position: absolute; | |
height: 0; | |
width: 0; | |
top: -45px; | |
left: -60px; | |
display: block; | |
@include rotate(-35deg); | |
} | |
.star:after { | |
content: ""; | |
position: absolute; | |
display: block; | |
top: 3px; | |
left: -105px; | |
width: 0px; | |
height: 0px; | |
border-right: 100px solid transparent; | |
border-bottom: 70px solid $nightLight; | |
border-left: 100px solid transparent; | |
@include rotate(-70deg); | |
} | |
} | |
.desc { | |
position: relative; | |
color: $white; | |
font-size: 30px; | |
font-family: 'Pacifico', cursive; | |
} | |
} | |
} | |
} | |
#rays { | |
width: 100px; | |
height: 100px; | |
top: 35px; | |
left: 25px; | |
} | |
#rays:after { | |
height: 100px; | |
width: 100px; | |
top: 0px; | |
left: 0px; | |
} | |
#sun { | |
width: 100px; | |
height: 100px; | |
top: 35px; | |
left: 25px; | |
} | |
#miniRays { | |
width: 75px; | |
height: 75px; | |
top: 25px; | |
left: 75px; | |
} | |
#miniRays:after { | |
height: 75px; | |
width: 75px; | |
top: 0px; | |
left: 0px; | |
} | |
#miniSun { | |
width: 75px; | |
height: 75px; | |
top: 25px; | |
left: 75px; | |
} | |
#miniCloud { | |
background-color: $cloudLight; | |
width: 75px; | |
height: 75px; | |
top: 40px; | |
animation: cloudFloat 5s infinite linear; | |
} | |
#miniCloud:before { | |
background-color: $cloudLight; | |
width: 50px; | |
height: 50px; | |
top: 17px; | |
left: 55px; | |
} | |
#miniCloud:after { | |
@include background($cloudLight, $cloudDark); | |
width: 140px; | |
height: 60px; | |
top: 40px; | |
left: -15px; | |
} | |
#miniDarkCloud { | |
background-color: $darkCloudLight; | |
width: 75px; | |
height: 75px; | |
top: -10px; | |
left: 75px; | |
@include scale(0.75); | |
animation: cloudFloatOpposite 5s infinite linear; | |
} | |
#miniDarkCloud:before { | |
background-color: $darkCloudLight; | |
width: 50px; | |
height: 50px; | |
top: 17px; | |
left: 55px; | |
} | |
#miniDarkCloud:after { | |
@include background($darkCloudLight, $darkCloudDark); | |
width: 140px; | |
height: 60px; | |
top: 40px; | |
left: -15px; | |
} | |
#cloud { | |
background-color: $cloudLight; | |
width: 75px; | |
height: 75px; | |
top: -50px; | |
@include scale(1.25); | |
animation: cloudFloat 5s infinite linear; | |
} | |
#cloud:before { | |
background-color: $cloudLight; | |
width: 50px; | |
height: 50px; | |
top: 17px; | |
left: 55px; | |
} | |
#cloud:after { | |
@include background($cloudLight, $cloudDark); | |
width: 140px; | |
height: 60px; | |
top: 40px; | |
left: -15px; | |
} | |
#raindrop1 { | |
left: -72px; | |
animation: raindrop 2s infinite linear, raindropFade 2s infinite linear; | |
} | |
#raindrop2 { | |
left: -48px; | |
animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear; | |
} | |
#raindrop3 { | |
left: -24px; | |
animation: raindrop 2s infinite linear, raindropFade 2s infinite linear; | |
} | |
#raindrop4 { | |
left: 0px; | |
animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear; | |
} | |
#darkCloud { | |
background-color: $darkCloudLight; | |
width: 75px; | |
height: 75px; | |
top: 0px; | |
animation: cloudFloat 5s infinite linear; | |
} | |
#darkCloud:before { | |
background-color: $darkCloudLight; | |
width: 50px; | |
height: 50px; | |
top: 17px; | |
left: 55px; | |
} | |
#darkCloud:after { | |
@include background($darkCloudLight, $darkCloudDark); | |
width: 140px; | |
height: 60px; | |
top: 40px; | |
left: -15px; | |
} | |
#moon { | |
width: 100px; | |
height: 100px; | |
top: -150px; | |
left: 55px; | |
@include border-radius(50px); | |
position: relative; | |
box-shadow: 30px 15px 0 0 $nightLight; | |
@include rotate(130deg); | |
animation: moonSwing 3s infinite linear; | |
} | |
#star1 { | |
top: 35px; | |
left: -100px; | |
animation: starFadeIn 5s infinite linear; | |
} | |
#star2 { | |
top: -300px; | |
left: 15px; | |
animation: starFadeOut 6s infinite linear; | |
} | |
#star3 { | |
top: -375px; | |
left: 50px; | |
animation: starFadeIn 7s infinite linear; | |
} | |
@keyframes sunRotate { | |
from { | |
@include rotate(0deg); | |
} | |
to { | |
@include rotate(359deg); | |
} | |
} | |
@keyframes cloudFloat { | |
0% { | |
left: 0px; | |
} | |
50% { | |
left: 20px; | |
} | |
100% { | |
left: 0px; | |
} | |
} | |
@keyframes cloudFloatOpposite { | |
0% { | |
left: 75px; | |
} | |
50% { | |
left: 50px; | |
} | |
100% { | |
left: 75px; | |
} | |
} | |
@keyframes raindrop { | |
from { | |
top: 100px; | |
} | |
to { | |
top: 175px; | |
} | |
} | |
@keyframes raindropAlt { | |
from { | |
top: 75px; | |
} | |
to { | |
top: 150px; | |
} | |
} | |
@keyframes raindropFade { | |
75% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
@keyframes moonSwing { | |
0% { | |
@include rotate(125deg); | |
} | |
50% { | |
@include rotate(135deg); | |
} | |
100% { | |
@include rotate(125deg); | |
} | |
} | |
@keyframes starFadeIn { | |
0% { | |
opacity: 0; | |
} | |
50% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
@keyframes starFadeOut { | |
0% { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} |