Weather Icons

Developer
AJ
Size
2,519 Kb
Views
20,240
  1. Weather Icons Previews
  2. Weather Icons HTML Codes
  3. Weather Icons CSS Codes

How do I make an weather icons?

What is a weather icons? How do you make a weather icons? This script and codes were developed by AJ on 08 December 2022, Thursday.

Weather Icons Previews
IQ Test

Weather Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather Icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class="icon"> <div class="cloud"> <ul class="thunder"> <li class="bolt"></li> <li class="bolt"></li> </ul> </div> </div> <div class="icon"> <div class="cloud"> <ul class="rain"> <li class="drop"></li> <li class="drop"></li> <li class="drop"></li> <li class="drop"></li> </ul> </div> </div> <div class="icon"> <div class="cloud"> <div class="fog"> <div class="line"></div> </div> </div> </div> </div><!--row--> <div class="row"> <div class="icon"> <div class="sun"> <div class="rays"></div> </div> </div>
<div class="icon"> <div class="moon"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> </div>
</div>
</div>
</body>
</html>

Weather Icons - Script Codes CSS Codes

.container { max-width: 1000px; margin: 0 auto;
}
.row { clear: both;
}
.icon { /*display: inline-block;*/ float: left; /*clear: both;*/ position: relative; width: 300px; height: 300px; padding: 10px;
}
.cloud { width: 200px; height: 100px; /*background: lightblue;*/ background: grey; /*border: 5px solid darkblue;*/ background: linear-gradient(top, grey 25%, #d6f0fd 100%); background: -webkit-linear-gradient(top, grey 25%, #d6f0fd 100%); background: -moz-linear-gradient(top, grey 25%, #d6f0fd 100%); background: -ms-linear-gradient(top, grey 25%, #d6f0fd 100%); background: -o-linear-gradient(top, grey 25%, #d6f0fd 100%); border-radius: 100px; position: relative; top: 100px; left: 50px;
}
.cloud::before, .cloud::after { content: ""; /*border: 5px solid darkblue;*/ background: grey; border-radius: 50%; position: absolute; z-index: -1
}
.cloud::after { top: -60px; left: 70px; width: 100px; height: 100px;
}
.cloud::before { top: -30px; left: 30px; width: 70px; height: 70px;
}
.thunder { list-style-type: none; transform: scale(.5) rotate(30deg); position: relative; /*z-index: -1;*/ /*left: -100px; top: 100px;*/
}
.bolt { width: 0; height: 0; border-style: solid; border-width: 0 0 80px 30px; border-color: transparent transparent gold transparent; /*border-right: 50px solid gold; border-bottom: 100px solid gold;*/ position: relative; /*position: absolute;*/ left: 150px; top: 110px;
}
.bolt::after, .bolt::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 80px 30px; border-color: transparent transparent gold transparent; position: absolute; top: 70px; left: -10px; transform: rotate(180deg);
}
.bolt:nth-child(even) { position: absolute; transform: scale(.8); top:100px right: 120px;
}
.rain { list-style-type: none; display: inline; padding-right: 20px; float: left; position: relative; left: 20px; top: 70px; transform: rotate(10deg); z-index: -1;
}
.drop { width: 5px; height: 20px; margin-bottom: 3px; background: lightblue; box-shadow: 12px 0px 2px lightblue, 24px 0px 0 lightblue, 36px 0px 2px lightblue, 48px 0px 0 lightblue, 60px 0px 2px lightblue; /*transform: scale(.8);*/ /*transform: rotate(30deg);*/
}
/*.drop:nth-child(n+2) { width: 10px; height: 20px; background: lightblue; transform: scale(.8);
}
.drop:nth-child(n+3) { width: 10px; height: 20px; background: lightblue; transform: scale(.7);
}
.drop:nth-child(n+4) { width: 10px; height: 20px; background: lightblue; transform: scale(.6);
}*/
.fog .line { width: 160px; height: 5px; /*background: transparent;*/ /*border: none;*/ /*position: relative;*/ left: 0px; box-shadow: 10px 110px 2px grey, 10px 119px 2px grey, 10px 128px 2px grey, 10px 137px 2px grey, 10px 146px 2px grey, 10px 155px 2px grey; z-index: 2;
}
.sun { width: 170px; height: 170px; background: gold; border-radius: 50%; position: relative; left: 90px; top: 50px;
}
.rays { width: 10px; height: 30px; background: gold; position: relative; left: 80px; top: -40px; z-index: 5; border-radius: 5px 5px 5px 5px; box-shadow: 0 220px gold;
}
.rays::before,
.rays::after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 10px; height: 30px; transform: rotate(60deg); transform-origin: 50% 120px; background: gold; border-radius: 5px 5px 5px 5px; box-shadow: 0 210px gold;
}
.rays:before { transform: rotate(120deg);
}
.moon { width: 170px; height: 170px; /*border: 5px solid black;*/ border-radius: 50%; box-shadow: -50px 50px 0px #888888; position: relative; left: 170px; top: 0px;
}
.star { width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 30px 15px; border-color: transparent transparent #191970 transparent; position: relative;
}
.star::after { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 30px 15px; border-color: transparent transparent #191970 transparent; position: absolute; /*top: 30px; left: -50px;*/ transform: rotate(180deg); left: -18px; top: 10px;
}
.star:nth-child(n+1) { transform: scale(.8);
}
.star:nth-child(1) { left: 30px; top: 20px;
}
.star:nth-child(2) { left: 60px; top: 20px;
}
.star:nth-child(3) { left: 30px; top: -20px;
}
.star:nth-child(4) { left: 60px; top: -30px;
}
Weather Icons - Script Codes
Weather Icons - Script Codes
Home Page Home
Developer AJ
Username gtalin
Uploaded December 08, 2022
Rating 3
Size 2,519 Kb
Views 20,240
Do you need developer help for Weather Icons?

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!

AJ (gtalin) Script Codes
Name
Quiz
Cute Koala
Moving particles
SVG circles
Match color
Wikipedia Viewer
A Pen by AJ
Tic-Tac Toe
Raining balls
Shooter
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!