.sun
.sea
.sand
@import "compass";
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
position: relative;
height: 100%;
overflow: hidden;
background-color: rgba(85,154,214,1);
@include filter-gradient(
#559ad6,
#B2EBFE,
vertical
);
@include background-image(
linear-gradient(
top,
rgba(#55B4F6,1) 0%,
rgba(#B2EBFE,1) 50%,
rgba(#B2EBFE,1) 100%
)
);
}
.sun {
position: absolute;
top: -20px;
right: 0;
height: 200px;
width: 200px;
@include border-radius(50%);
@include filter-gradient(
#fffae3,
#fcf497,
horizontal
);
@include background-image(
radial-gradient(
center,
rgba(255,250,227,1) 0%,
rgba(255,250,227,1) 5%,
rgba(252,244,151,0) 70%,
rgba(252,244,151,0) 100%
)
);
}
.sea {
position: absolute;
bottom: 0;
left: -10%;
width: 120%;
height: 60%;
@include filter-gradient(
#0C87C3,
#62e6fd,
vertical
);
@include background-image(
linear-gradient(
top,
rgba(#0C87C3,0) 0%,
rgba(#0C87C3,1) 1%,
rgba(98,230,253,1) 40%,
rgba(98,230,253,1) 100%
)
);
@include transform(rotate(1deg));
&:after {
content: "";
position: absolute;
top: 2px;
right: 200px;
width: 60%;
height: 100%;
@include background-image(
linear-gradient(
left,
rgba(255,255,255,0) 0%,
rgba(255,255,255,1) 40%,
rgba(255,255,255,1) 60%,
rgba(255,255,255,0) 100%
)
);
@include transform(skew(-55deg));
opacity: 0.4;
}
}
.sand {
position: absolute;
bottom: -15%;
left: -10%;
width: 120%;
height: 50%;
@include filter-gradient(
#edcd9a,
#f0e4cf,
horizontal
);
@include background-image(
linear-gradient(
bottom,
rgba(237,205,154,1) 0%,
rgba(240,228,207,1) 70%,
rgba(240,228,207,1) 84%,
rgba(233,234,220,1) 88%,
rgba(208,229,226,1) 91%,
rgba(174,238,248,0.3) 95%,
rgba(118,221,241,0) 99%,
rgba(118,221,241,0) 100%
)
);
@include transform(rotate(7deg));
}
Also see: Tab Triggers