Perspective background from old Semantic UI website

Developer
Luciano Tonet
Size
3,044 Kb
Views
16,192
  1. Perspective background from old Semantic UI website Previews
  2. Perspective background from old Semantic UI website HTML Codes
  3. Perspective background from old Semantic UI website CSS Codes
  4. Perspective background from old Semantic UI website JS Codes

How do I make an perspective background from old semantic ui website?

What is a perspective background from old semantic ui website? How do you make a perspective background from old semantic ui website? This script and codes were developed by Luciano Tonet on 13 October 2022, Thursday.

Perspective background from old Semantic UI website Previews
IQ Test

Perspective background from old Semantic UI website - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Perspective background from old Semantic UI website</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='https://cdnjs.com/libraries/semantic-ui'></script> <script src="js/index.js"></script>
</body>
</html>

Perspective background from old Semantic UI website - Script Codes CSS Codes

/* 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; }
}

Perspective background from old Semantic UI website - Script Codes JS Codes

// No js? \o/
Perspective background from old Semantic UI website - Script Codes
Perspective background from old Semantic UI website - Script Codes
Home Page Home
Developer Luciano Tonet
Username tonetlds
Uploaded October 13, 2022
Rating 4.5
Size 3,044 Kb
Views 16,192
Do you need developer help for Perspective background from old Semantic UI website?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luciano Tonet (tonetlds) Script Codes
Name
Call to Scroll - Mobile
Call to Scroll - Desktop
Amazing Perspective Walking Background
Background Color Change
A Pen by Luciano Tonet
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!