Sunshades

Developer
KyleDavidE
Size
4,337 Kb
Views
30,360
  1. Sunshades Previews
  2. Sunshades HTML Codes
  3. Sunshades CSS Codes
  4. Sunshades JS Codes

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 Previews
IQ Test

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&amp;sort=recent&amp;timeframe=now&amp;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
Sunshades - Script Codes
Sunshades - Script Codes
Home Page Home
Developer KyleDavidE
Username KyleDavidE
Uploaded August 11, 2022
Rating 3.5
Size 4,337 Kb
Views 30,360
Do you need developer help for Sunshades?

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!

KyleDavidE (KyleDavidE) Script Codes
Name
Flexbox Dna Helix by Joe Ski
A lonely rectangle
Surface
A cube
A Pen by Kyle Ehrlich
SCSS function graphing
A lonely pixel rag
A Pen by KyleDavidE
XKCD 1608 Hoverboard zoomable
Android 4.4 kitkat time picker
Create amazing art & images 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!