CSS Binary Sunset on Tatooine

Developer
Vinny
Size
4,350 Kb
Views
20,240
  1. CSS Binary Sunset on Tatooine Previews
  2. CSS Binary Sunset on Tatooine HTML Codes
  3. CSS Binary Sunset on Tatooine CSS Codes

How do I make an css binary sunset on tatooine?

Flat-style card, binary sunset on Tatooine (Star Wars). Pure CSS shapes. May the force be with you. . What is a css binary sunset on tatooine? How do you make a css binary sunset on tatooine? This script and codes were developed by Vinny on 15 October 2022, Saturday.

CSS Binary Sunset on Tatooine Previews
IQ Test

CSS Binary Sunset on Tatooine - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Binary Sunset on Tatooine </title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"> <div class="t-container"> <div class="tatooine"> <div class="sun--1"></div> <div class="sun--2"></div> <div class="ground"> <div class="homestead"> <div class="homestead__side"> <div class="shadow-triangle-fill"></div> </div> </div> </div> </div> </div>
</div>
</body>
</html>

CSS Binary Sunset on Tatooine - Script Codes CSS Codes

html,
body, .wrapper { height: 100%; width: 100%; margin: 0; padding: 0;
}
.homestead__side:before, .homestead__side:after { left: 0; right: 0; margin: 0 auto;
}
* { box-sizing: border-box;
}
html,
body { overflow: hidden;
}
:before,
:after { content: '';
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.t-container { overflow: hidden; box-shadow: 0em 1em 1.2em -0.4em rgba(0, 0, 0, 0.7);
}
.tatooine { position: relative; height: 30.75rem; width: 23.065rem; border-radius: 1.2%; background: #DC6FA6; background: -webkit-linear-gradient(#DC6FA6, #4D4075 55%); background: linear-gradient(#DC6FA6, #4D4075 55%);
}
.tatooine:before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #68BBFF; background: -webkit-linear-gradient(#68BBFF, #468BC4 55%); background: linear-gradient(#68BBFF, #468BC4 55%); -webkit-animation: sunrise-sunset 8s infinite linear; animation: sunrise-sunset 8s infinite linear;
}
.sun, .sun--1, .sun--2 { height: 3em; width: 3em; border-radius: 100%; -webkit-animation: binary-sunset 8s infinite linear; animation: binary-sunset 8s infinite linear;
}
.sun--1 { position: absolute; bottom: 12em; left: 3em; background: #FFECBF;
}
.sun--2 { position: absolute; bottom: 8em; left: 8em; background: #ED5D07;
}
.ground { position: absolute; bottom: 0; left: 0; height: 13rem; width: 100%; background: #A18C79;
}
.ground:before { position: absolute; top: -1em; left: 0; height: 1em; width: 74%; border-top-left-radius: 20%; border-top-right-radius: 200%; background: #4B4E87;
}
.homestead { position: absolute; bottom: 5em; left: -4em; height: 100%; width: 60%; border-top-left-radius: 100%; border-top-right-radius: 140%; background: #AB977E; box-shadow: inset 0 .7em 0 #BB9E7B; z-index: 10;
}
.homestead:after { position: absolute; bottom: -12em; right: -17%; border-top: 12em solid #928477; border-right: 18em solid transparent; z-index: -1;
}
.homestead:before { position: absolute; bottom: 0; right: -2.4em; height: 50%; width: 18%; background: #B9AE9A; background: -webkit-linear-gradient(#B9AE9A 35%, #ADA391 10%); background: linear-gradient(#B9AE9A 35%, #ADA391 10%);
}
.homestead__side { position: absolute; bottom: -2em; left: 2.5em; height: 45%; width: 68%; background: #8F7E68; box-shadow: -0.4em -0.4em #B9AE9A;
}
.homestead__side:before, .homestead__side:after { position: absolute; top: -45%; border-radius: 100%; height: 95%; width: 58%; background: #8F7E68;
}
.homestead__side:after { box-shadow: -0.4em -0.4em #B9AE9A; z-index: -1;
}
.shadow-triangle-fill { position: absolute; top: -0.4em; right: 0; border-bottom: 0.42em solid #B9AE9A; border-right: .4em solid transparent; z-index: 200;
}
@-webkit-keyframes binary-sunset { from { -webkit-transform: rotate(0deg) translate(-15em) rotate(0deg); transform: rotate(0deg) translate(-15em) rotate(0deg); } to { -webkit-transform: rotate(360deg) translate(-15em) rotate(-360deg); transform: rotate(360deg) translate(-15em) rotate(-360deg); }
}
@keyframes binary-sunset { from { -webkit-transform: rotate(0deg) translate(-15em) rotate(0deg); transform: rotate(0deg) translate(-15em) rotate(0deg); } to { -webkit-transform: rotate(360deg) translate(-15em) rotate(-360deg); transform: rotate(360deg) translate(-15em) rotate(-360deg); }
}
@-webkit-keyframes sunrise-sunset { 0% { opacity: 1; } 25% { opacity: .5; } 50% { opacity: 0; } 75% { opacity: .5; } 100% { opacity: 1; }
}
@keyframes sunrise-sunset { 0% { opacity: 1; } 25% { opacity: .5; } 50% { opacity: 0; } 75% { opacity: .5; } 100% { opacity: 1; }
}
/*@keyframes sun-shadow { 0% { border-right: 2em solid transparent; opacity: 1; } 25% { border-right: 8em solid transparent; } 50% { border-right: 12em solid transparent; opacity: 0; } 75% { border-right: 43em solid transparent; } 100% { border-right: 13em solid transparent; opacity: 1; }
} */
CSS Binary Sunset on Tatooine - Script Codes
CSS Binary Sunset on Tatooine - Script Codes
Home Page Home
Developer Vinny
Username vinnyA3
Uploaded October 15, 2022
Rating 3
Size 4,350 Kb
Views 20,240
Do you need developer help for CSS Binary Sunset on Tatooine?

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!

Vinny (vinnyA3) Script Codes
Name
Pure CSS Fullscreen Image Slider
Pure CSS Image Slider
Rotating CSS Cube
Dragon Ball in Pure CSS
Batman Emblem in Pure CSS - chrome tested only
CSS Animations and Effects
Green Sock Todo list
Il Pomodoro Clock
Camper News Feed
Image Card Animation
Create amazing Facebook ads 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!