Sunshades
How do I make an sunshades?
What is a sunshades? How do you make a sunshades? This script and codes were developed by KyleDavidE on 11 August 2022, Thursday.
Sunshades - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sunshades</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mainw"> <div class="main"> <div class="sun" data-z="-5"></div> <div class="mountain m2" data-base-transform="rotate(45deg)" data-z="-3.5"></div> <div class="mountain m1" data-base-transform="rotate(45deg)" data-z="-2"></div> </div>
</div>
<a class="cite" href="https://dribbble.com/shots/2004180-Sunshades?list=shots&sort=recent&timeframe=now&offset=10" target="_blank">Based on Sunshades by Dennis Cortes</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sunshades - Script Codes CSS Codes
body { font-size: 50vmin; background: #f9fce2;
}
body:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
*, *:after, *:before { box-sizing: border-box;
}
.mainw { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 1em; height: 1em;
}
.main { width: 1em; height: 1em; -webkit-transform: translateY(0); transform: translateY(0); overflow: hidden; border-radius: 50%; position: relative; background: #98b5e0; background: -webkit-linear-gradient(top, #98B4E0 0%, #98CEE0 100%); background: linear-gradient(to bottom, #98B4E0 0%, #98CEE0 100%); -webkit-transition: border-radius 0.5s; transition: border-radius 0.5s;
}
.main > * { border: #f9fce2 solid 0.04em; position: absolute; background-clip: padding-box !important;
}
.sun { top: 0.25em; left: 0.25em; width: 0.5em; height: 0.5em; border-radius: 50%; background: #ffb017; background: -webkit-linear-gradient(top, #FFAA17 0%, #FFD217 100%); background: linear-gradient(to bottom, #FFAA17 0%, #FFD217 100%);
}
.mountain { top: 0.4em; width: 4.24264em; height: 4.24264em; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #69b897;
}
.mountain.m1 { background: -webkit-linear-gradient(315deg, #7ACCA8 0%, #3A8365 10%); background: linear-gradient(-225deg, #7ACCA8 0%, #3A8365 10%); left: 0.25em;
}
.mountain.m2 { background: -webkit-linear-gradient(315deg, #77CEAB 0%, #04A69A 10%); background: linear-gradient(-225deg, #77CEAB 0%, #04A69A 10%); left: 0.75em;
}
.cite { font-size: 5vmin; position: absolute; display: block; bottom: 0; font-family: sans-serif; text-decoration: none; color: #3A8365; text-align: center; left: 0; right: 0;
}
.cite:hover { text-decoration: underline;
}
Sunshades - Script Codes JS Codes
'use strict';
/* the js is for interactivity only Just remove the asterick-slash to see. (I have an end comment at the bottom) */
var globalScale = Math.pow(2, -1);
var zs = $('[data-z]');
$('body').on('mousemove', function (e) { var dx = e.pageX - innerWidth / 2; var dy = e.pageY - innerHeight / 2; zs.each(function () { var self = $(this); var z = +self.data('z'); var bt = self.data('base-transform') || ''; var factor = Math.pow(2, z) * globalScale; self.css({ 'transform': ' translate3d(' + factor * dx + 'px, ' + factor * dy + 'px,0) ' + bt }); });
});
/* */ //intelegent comment ender
Developer | KyleDavidE |
Username | KyleDavidE |
Uploaded | August 11, 2022 |
Rating | 3.5 |
Size | 4,337 Kb |
Views | 30,360 |
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!
Name | Size |
A Pen by KyleDavidE | 4,166 Kb |
A Pen by Kyle Ehrlich | 2,721 Kb |
A lonely pixel rag | 3,976 Kb |
Abstract shape 3d | 6,805 Kb |
XKCD 1608 Hoverboard zoomable | 7,038 Kb |
A Pen by KyleDavidE | 4,557 Kb |
Stars | 31,585 Kb |
Sunshades | 4,337 Kb |
Flexbox Dna Helix by Joe Ski | 4,041 Kb |
Android 4.4 kitkat time picker | 6,524 Kb |
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!
Name | Username | Size |
Svg sky | Omodev | 7,070 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
My three.js practice | Esambino | 3,203 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!