Christmas ornaments
How do I make an christmas ornaments?
What is a christmas ornaments? How do you make a christmas ornaments? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.
Christmas ornaments - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Christmas ornaments</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="xmas-ornament red"></div>
<div class="xmas-ornament blue"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
</body>
</html>
Christmas ornaments - Script Codes CSS Codes
body { background: green;
}
.xmas-ornament { position: relative; width: 20em; height: 20em; margin: 5em 0 0 2em; border-radius: 50%; box-shadow: inset 10px 10px 20px rgba(255,255,255,.5), 15px 15px 65px rgba(0,0,0,.5); -webkit-animation: animationFrames ease-in-out 3s; animation: animationFrames ease-in-out 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-transform-origin: 50% -2em; transform-origin: 50% -2em; float: left;
}
.xmas-ornament::after { position: absolute; right: 8%; bottom: 8%; display: block; width: 70%; height: 70%; content: ''; border-radius: 50%; border-color: rgba(255,255,255,.06); border-style: none solid solid none; border-width: 2px; background-image: -webkit-radial-gradient(70px 70px, circle closest-corner, rgba(255,255,255,.005), rgba(255,255,255,.15)); background-image: radial-gradient(70px 70px, circle closest-corner, rgba(255,255,255,.005), rgba(255,255,255,.15));
}
.xmas-ornament::before { position: absolute; top: -2em; left: 50%; margin-left: -2em; display: block; width: 4em; height: 2.3em; content: ''; background: silver; background: -webkit-linear-gradient(left, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); background: linear-gradient(to right, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); border-radius: .3em;
}
.red { background: red; background-image: -webkit-radial-gradient(70px 70px, circle farthest-corner, rgb(255,0,0), rgb(127,0,0)); background-image: radial-gradient(70px 70px, circle farthest-corner, rgb(255,0,0), rgb(127,0,0));
}
.blue { background: blue; background-image: -webkit-radial-gradient(70px 70px, circle farthest-corner, rgb(0,0,255), rgb(0,0,127)); background-image: radial-gradient(70px 70px, circle farthest-corner, rgb(0,0,255), rgb(0,0,127));
}
@-webkit-keyframes animationFrames{ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 70% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 80% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 90% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes animationFrames{ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 70% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 80% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 90% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
Developer | Ludvig Lindblom |
Username | ludviglindblom |
Uploaded | July 25, 2022 |
Rating | 3 |
Size | 2,124 Kb |
Views | 38,456 |
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 |
Starburst | 3,581 Kb |
SaSS pattern | 7,900 Kb |
Rainy days | 227,548 Kb |
Css arrows and pies | 2,584 Kb |
Canvas pie chart with CSS bar chart fallback | 4,014 Kb |
JQuery countdown plugin | 4,195 Kb |
I Am Left logo as a scalable canvas | 2,240 Kb |
Canvas animation | 2,386 Kb |
CSS optical illusion | 3,443 Kb |
Fullscreen API | 2,979 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 |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
My three.js practice | Esambino | 3,203 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
Website Concept | Sagoza | 3,104 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 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!