Space Sun Design - All CSS

Developer
Brett Clanton
Size
6,391 Kb
Views
30,360
  1. Space Sun Design - All CSS Previews
  2. Space Sun Design - All CSS HTML Codes
  3. Space Sun Design - All CSS CSS Codes
  4. Space Sun Design - All CSS JS Codes

How do I make an space sun design - all css?

This is a cool graphic designed by Vitaliy Rynskiy that I found on Dribbble: https://dribbble.com/shots/1629808-Spacesun - Looked like a good css challenge, and it was indeed ;). What is a space sun design - all css? How do you make a space sun design - all css? This script and codes were developed by Brett Clanton on 15 August 2022, Monday.

Space Sun Design - All CSS Previews
IQ Test

Space Sun Design - All CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Space Sun Design - All CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container-container'> <div class='container'> <circle class='center-bg'></circle> <circle class='top-bg'> <circle></circle> </circle> <circle class='middle bg-1'></circle> <circle class='middle bg-2'> <circle></circle> </circle> <circle class='middle bg-3'> <circle></circle> </circle> <circle class='middle bg-4'></circle> <div class='bottom-container-1'> <div class='bottom-container-2'> <div class='bottom-bg'> <circle></circle> </div> </div> </div> <circle class='corner-overlay-1 corner'></circle> <circle class='corner-overlay-2 corner'></circle> <circle class='overlay-1'></circle> <circle class='overlay-2'></circle> <div class='shuttle'> <circle class='shaft'></circle> <div class='cross'></div> <div class='wing-1'> <circle class='wing'></circle> </div> <div class='wing-2'> <circle class='wing'></circle> </div> <div class='tail-wing-1'></div> <div class='tail-wing-2'></div> </div> <div class='sparkle one'> <div class='section one'></div> <div class='section two'></div> <div class='section three'></div> <div class='section four'></div> </div> <div class='sparkle two'> <div class='section one'></div> <div class='section two'></div> <div class='section three'></div> <div class='section four'></div> </div> <div class='sparkle rocket one'> <div class='section one'></div> <div class='section two'></div> </div> <div class='sparkle rocket two'> <div class='section one'></div> <div class='section two'></div> </div> <div class='trail one'></div> <div class='trail two'></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Space Sun Design - All CSS - Script Codes CSS Codes

.container-container { position: fixed; left: 50%; top: 50%; height: 0; width: 0;
}
.container-container .container { width: 420px; height: 420px; position: absolute; top: -210px; left: -210px;
}
.container-container .container * { position: absolute;
}
circle { border-radius: 50%/50%;
}
circle.center-bg { width: 150px; height: 150px; left: 135px; top: 136px; background: #491c41; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #491c41 0%, #ff284b 65%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 65%, color-stop(0%, #491c41), color-stop(100%, #ff284b)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #491c41 0%, #ff284b 65%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #491c41 0%, #ff284b 65%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #491c41 0%, #ff284b 65%); /* IE10+ */ background: radial-gradient(ellipse at center, #491c41 0%, #ff284b 65%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#491c41', endColorstr='#ff284b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
circle.overlay-1 { top: 80px; left: 80px; width: 30px; height: 30px; background: #fff;
}
circle.overlay-2 { top: 110px; left: 110px; width: 10px; height: 10px; background: #fff;
}
circle.top-bg { top: 10px; left: 10px; width: 400px; height: 200px; overflow: hidden; border-radius: 200px 200px 0 0; background: -moz-linear-gradient(top, #330334 0%, rgba(0, 33, 153, 0.84) 32%, rgba(0, 182, 232, 0.5) 120%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #330334), color-stop(32%, rgba(0, 33, 153, 0.84)), color-stop(120%, rgba(0, 182, 232, 0.5))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #330334 0%, rgba(0, 33, 153, 0.84) 32%, rgba(0, 182, 232, 0.5) 120%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #330334 0%, rgba(0, 33, 153, 0.84) 32%, rgba(0, 182, 232, 0.5) 120%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #330334 0%, rgba(0, 33, 153, 0.84) 32%, rgba(0, 182, 232, 0.5) 120%); /* IE10+ */ background: linear-gradient(to bottom, #330334 0%, rgba(0, 33, 153, 0.84) 32%, rgba(0, 182, 232, 0.5) 120%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#330334', endColorstr='#8000b6e8',GradientType=0 ); /* IE6-9 */
}
circle.top-bg circle { width: 150px; height: 150px; left: 125px; top: 126px; background: #491c41; /* Old browsers */
}
circle.middle { top: 210px; width: 100px; height: 74px; border-radius: 0; overflow: hidden; background: -moz-linear-gradient(top, #330334 -490%, rgba(0, 33, 153, 0.84) -348%, rgba(0, 182, 232, 0.5) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(-490%, #330334), color-stop(-348%, rgba(0, 33, 153, 0.84)), color-stop(100%, rgba(0, 182, 232, 0.5))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #330334 -490%, rgba(0, 33, 153, 0.84) -348%, rgba(0, 182, 232, 0.5) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #330334 -490%, rgba(0, 33, 153, 0.84) -348%, rgba(0, 182, 232, 0.5) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #330334 -490%, rgba(0, 33, 153, 0.84) -348%, rgba(0, 182, 232, 0.5) 100%); /* IE10+ */ background: linear-gradient(to bottom, #330334 -490%, rgba(0, 33, 153, 0.84) -348%, rgba(0, 182, 232, 0.5) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#330334', endColorstr='#8000b6e8',GradientType=0 ); /* IE6-9 */
}
circle.middle circle { width: 150px; height: 150px; top: -75px; background: #491c41; /* Old browsers */
}
circle.middle.bg-1 { left: 10px; border-bottom-left-radius: 100% 100%;
}
circle.middle.bg-2 { width: 97px; left: 110px; border-bottom-right-radius: 80% 100%;
}
circle.middle.bg-2 circle { left: 25px;
}
circle.middle.bg-3 { width: 97px; left: 213px; border-bottom-left-radius: 80% 100%;
}
circle.middle.bg-3 circle { right: 25px;
}
circle.middle.bg-4 { left: 310px; border-bottom-right-radius: 100% 100%;
}
.bottom-container-1 { top: 10px; left: 10px; width: 400px; height: 400px; border-radius: 50%/50%; overflow: hidden;
}
.bottom-container-1 * { overflow: hidden;
}
.bottom-container-1 .bottom-container-2 { width: 400px; height: 102px; bottom: 0; border-top-left-radius: 60% 30%; border-top-right-radius: 60% 30%;
}
.bottom-container-1 .bottom-container-2 .bottom-bg { bottom: 0; left: 40px; width: 320px; height: 110px; background: #490635; /* Old browsers */ background: -moz-linear-gradient(left, #490635 10%, #c71f46 45%, #c71f46 55%, #490635 90%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(10%, #490635), color-stop(45%, #c71f46), color-stop(55%, #c71f46), color-stop(90%, #490635)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #490635 10%, #c71f46 45%, #c71f46 55%, #490635 90%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #490635 10%, #c71f46 45%, #c71f46 55%, #490635 90%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #490635 10%, #c71f46 45%, #c71f46 55%, #490635 90%); /* IE10+ */ background: linear-gradient(to right, #490635 10%, #c71f46 45%, #c71f46 55%, #490635 90%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#490635', endColorstr='#490635',GradientType=1 ); /* IE6-9 */
}
.bottom-container-1 .bottom-container-2 .bottom-bg circle { width: 150px; height: 150px; left: 85px; top: 30px; background: #1a0414; /* Old browsers */ background: -moz-linear-gradient(top, #1a0414 0%, #5e143b 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1a0414), color-stop(50%, #5e143b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1a0414 0%, #5e143b 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1a0414 0%, #5e143b 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1a0414 0%, #5e143b 50%); /* IE10+ */ background: linear-gradient(to bottom, #1a0414 0%, #5e143b 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a0414', endColorstr='#5e143b',GradientType=0 ); /* IE6-9 */
}
.corner { top: 291.3px; width: 50.4px; height: 40.3px; border: 20px solid transparent;
}
.corner.corner-overlay-1 { left: 35.4px; border-left-color: #FFF; -webkit-transform: rotate(6.5deg); transform: rotate(6.5deg);
}
.corner.corner-overlay-2 { right: 35.4px; border-right-color: #FFF; -webkit-transform: rotate(-6.5deg); transform: rotate(-6.5deg);
}
.shuttle { top: 170px; left: 190px; width: 40px; height: 50px;
}
.shuttle * { background: #fff;
}
.shuttle .shaft { width: 6px; height: 41px; top: 5px; left: 17px;
}
.shuttle .cross { width: 32px; height: 2px; left: 4px; top: 39px;
}
.shuttle .wing-1 { width: 14px; height: 26px; top: 13px; left: 4px; overflow: hidden; background: none;
}
.shuttle .wing-1 .wing { width: 35px; height: 50px; top: -34px; left: -31px; background: transparent; border: 10px #FFF solid;
}
.shuttle .wing-2 { width: 14px; height: 26px; top: 13px; right: 4px; overflow: hidden; background: none;
}
.shuttle .wing-2 .wing { width: 35px; height: 50px; top: -34px; right: -31px; background: transparent; border: 10px #FFF solid;
}
.shuttle .tail-wing-1 { width: 9px; height: 5px; top: 39px; left: 10px; -webkit-transform: skewY(-10deg); transform: skewY(-10deg);
}
.shuttle .tail-wing-2 { width: 9px; height: 5px; top: 39px; right: 10px; -webkit-transform: skewY(10deg); transform: skewY(10deg);
}
.sparkle { width: 12px; height: 12px; top: 341px; left: 310px;
}
.sparkle.two { width: 6px; height: 6px; top: 335px; left: 282px;
}
.sparkle.rocket.one { top: 132px; left: 315px; width: 4.5px; height: 15px;
}
.sparkle.rocket.two { top: 152px; left: 304px; width: 4px; height: 14px; opacity: 0.7;
}
.sparkle .section { width: 50%; height: 50%; overflow: hidden; background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.9) 75%, white 100%, white 101%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(68%, rgba(255, 255, 255, 0)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, white), color-stop(101%, white)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.9) 75%, white 100%, white 101%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.9) 75%, white 100%, white 101%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.9) 75%, white 100%, white 101%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.9) 75%, #ffffff 100%, #ffffff 101%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ background-size: 200% 200%;
}
.sparkle .section.one { top: 0; left: 0; background-position: -100% -100%;
}
.sparkle .section.two { top: 0; right: 0; background-position: 200% -100%;
}
.sparkle .section.three { bottom: 0; right: 0; background-position: 200% 200%;
}
.sparkle .section.four { bottom: 0; left: 0; background-position: -100% 200%;
}
.trail { height: 70px; width: 1px; top: 141px; left: 317px; background: -moz-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%); /* IE10+ */ background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
.trail.two { height: 55px; width: 1px; top: 161px; left: 306px; opacity: 0.7;
}

Space Sun Design - All CSS - Script Codes JS Codes

(function() { var dribbble_inspiration; dribbble_inspiration = { url: 'https://dribbble.com/shots/1629808-Spacesun', designer: 'Vitaliy Rynskiy', designer_url: 'https://dribbble.com/tal' };
}).call(this);
Space Sun Design - All CSS - Script Codes
Space Sun Design - All CSS - Script Codes
Home Page Home
Developer Brett Clanton
Username brettclanton001
Uploaded August 15, 2022
Rating 4.5
Size 6,391 Kb
Views 30,360
Do you need developer help for Space Sun Design - All CSS?

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!

Brett Clanton (brettclanton001) Script Codes
Name
Fun with columns
Mac Pro page
Left Align
Percent Clock
Staging Embed Widget
Cool flat-yet-3d - ALL CSS
Hidden scrollbar in all browsers
A Pen by Brett Clanton
Mincraft cube experiment ALL CSS
Compass Icon - ALL CSS
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!