Christmas Tree
How do I make an christmas tree?
What is a christmas tree? How do you make a christmas tree? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.
Christmas Tree - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Christmas Tree</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='tree'> <div class='snow'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Christmas Tree - Script Codes CSS Codes
body { background: #2c3e50; color: #fff;
}
.tree { position: relative; display: block; height: 0; width: 0; margin: 100px auto 0; border-left: 85px solid transparent; border-right: 85px solid transparent; border-bottom: 300px solid #1e7b4d;
}
.tree:after { display: block; content: ''; height: 0; width: 0; border-top: 300px solid transparent; border-left: 85px solid rgba(0, 0, 0, 0.1);
}
.tree:before { display: block; content: ''; width: 40px; height: 30px; background: #663300; position: absolute; top: 300px; left: -20px;
}
.tree .snow { position: absolute; left: -28px; display: block; content: ''; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 100px solid #fff;
}
.tree .snow:before, .tree .snow:after { display: block; content: ''; width: 28px; height: 28px; background: #fff; border-radius: 50%; position: absolute; top: 88px;
}
.tree .snow:before { left: -28px;
}
Developer | Ludvig Lindblom |
Username | ludviglindblom |
Uploaded | July 25, 2022 |
Rating | 3 |
Size | 2,301 Kb |
Views | 54,648 |
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 |
SaSS pattern | 7,900 Kb |
Rotating timer | 2,640 Kb |
Fullscreen API | 2,979 Kb |
Disable JavaScript execution from console | 2,534 Kb |
I Am Left logo as a scalable canvas | 2,240 Kb |
Canvas box-shadow pixel art generator | 3,678 Kb |
Circle star | 2,690 Kb |
Css arrows and pies | 2,584 Kb |
CSS mask-image | 2,271 Kb |
Optical illusion - Motion Binding | 3,875 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 |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Sticky div | Kaslab | 2,225 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 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!