<div class="masthead segment">
<div class="ui page grid">
<div class="column">
<div class="introduction">
<h1 class="ui inverted header">
<span class="text">Perspective background from old <a href="https://www.semantic-ui.com/" target="_new">Semantic UI</a> website</span>
</h1>
<div class="ui hidden divider"></div>
</div>
</div>
</div>
</div>
/*
HEY!
Check my new pen "Amazing Perspective Walking Background"
- just CSS
- very, very simple
https://codepen.io/tonetlds/pen/yOdZLx
*/
/*--------------
splash
---------------*/
body {
position: relative;
overflow: hidden;
/* background: #111111 url(https://semantic-ui.com/images/bg-sky.jpg);*/
background-size: cover;
text-align: center;
padding: 0em;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0px;
border-bottom: none;
background-color: #00B5AD;
background-image: -webkit-radial-gradient(farthest-corner, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95));
background-image: radial-gradient(farthest-corner, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95));
}
.text {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: normal;
height: auto;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
text-transform: none;
width: auto;
z-index: 10000;
}
.text a {
color: aqua;
font-weight: bold;
}
body .grid {
margin: 0em;
padding: 15rem 0em;
}
.following.bar,
body {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-transition: background-color 3s ease-in-out 2s;
-moz-transition: background-color 3s ease-in-out 2s;
-webkit-transition: background-color 3s ease-in-out 2s;
transition: background-color 3s ease-in-out 2s;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.following.bar iframe.github {
margin-top: 0px;
}
.pushed body,
.pushed .following.bar {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.colored.following.bar,
body.colored {
-webkit-animation-name: colors;
-moz-animation-name: colors;
-o-animation-name: colors;
animation-name: colors;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-duration: 120s;
-moz-animation-duration: 120s;
-ms-animation-duration: 120s;
-o-animation-duration: 120s;
animation-duration: 120s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
body:after {
position: absolute;
z-index: 1;
width: 135%;
height: 135%;
top: 18%;
left: 0px;
content: '';
background: url(https://semantic-ui.com/images/ui.png);
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation-name: splash;
-moz-animation-name: splash;
-o-animation-name: splash;
animation-name: splash;
-ms-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
-webkit-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
-moz-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
transition: opacity 3s ease-in-out, transform 5s ease-in-out;
opacity: 0.06;
-webkit-animation-duration: 15s;
-moz-animation-duration: 15s;
-ms-animation-duration: 15s;
-o-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
-moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-14%) translateZ(370px);
}
.fixed.following.bar {
background-image: none;
}
.fixed.following.bar {
position: fixed;
top: 0px;
padding: 1em 0em;
background-color: #FFFFFF;
}
.fixed.light.following.bar {
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);
}
@keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-moz-keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-webkit-keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-ms-keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-o-keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@keyframes colors {
0% {
background-color: #00B5AD;
}
12% {
background-color: #3B83C0;
}
25% {
background-color: #E07B53;
}
37% {
background-color: #D9499A;
}
50% {
background-color: #564F8A;
}
62% {
background-color: #F2C61F;
}
75% {
background-color: #D95C5C;
}
87% {
background-color: #5BBD72;
}
100% {
background-color: #F2C61F;
}
}
@-moz-keyframes colors {
0% {
background-color: #00B5AD;
}
12% {
background-color: #3B83C0;
}
25% {
background-color: #E07B53;
}
37% {
background-color: #D9499A;
}
50% {
background-color: #564F8A;
}
62% {
background-color: #F2C61F;
}
75% {
background-color: #D95C5C;
}
87% {
background-color: #5BBD72;
}
100% {
background-color: #F2C61F;
}
}
@-webkit-keyframes colors {
0% {
background-color: #00B5AD;
}
12% {
background-color: #3B83C0;
}
25% {
background-color: #E07B53;
}
37% {
background-color: #D9499A;
}
50% {
background-color: #564F8A;
}
62% {
background-color: #F2C61F;
}
75% {
background-color: #D95C5C;
}
87% {
background-color: #5BBD72;
}
100% {
background-color: #F2C61F;
}
}
@-ms-keyframes colors {
0% {
background-color: #00B5AD;
}
12% {
background-color: #3B83C0;
}
25% {
background-color: #E07B53;
}
37% {
background-color: #D9499A;
}
50% {
background-color: #564F8A;
}
62% {
background-color: #F2C61F;
}
75% {
background-color: #D95C5C;
}
87% {
background-color: #5BBD72;
}
100% {
background-color: #F2C61F;
}
}
@-o-keyframes colors {
0% {
background-color: #00B5AD;
}
12% {
background-color: #3B83C0;
}
25% {
background-color: #E07B53;
}
37% {
background-color: #D9499A;
}
50% {
background-color: #564F8A;
}
62% {
background-color: #F2C61F;
}
75% {
background-color: #D95C5C;
}
87% {
background-color: #5BBD72;
}
100% {
background-color: #F2C61F;
}
}
// No js? \o/
This Pen doesn't use any external CSS resources.