Clouds

Work in progress What is a clouds How do you make a clouds? This script and codes were developed by Jeya Karthika on 01 February 2022, Tuesday.

How do I make an clouds?
  1. Clouds Previews
  2. Clouds HTML Codes
  3. Clouds CSS Codes
Clouds Previews

Clouds HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Clouds</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id = "cloud">
  <span class='shadow'></span>
</div>
  
  
</body>
</html>

Clouds CSS Codes

body {
	background: #ACEAFF;
}

#cloud {
	width: 350px; height: 120px;
  background: #f2f9fe;
  
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.05, #f2f9fe), to(#d6f0fd));
  background: -webkit-linear-gradient(#f2f9fe 5%, #d6f0fd 100%);
  background: -moz-linear-gradient(#f2f9fe 5%, #d6f0fd 100%);
  background: -o-linear-gradient(#f2f9fe 5%, #d6f0fd 100%);
  background: linear-gradient(#f2f9fe 5%, #d6f0fd 100%);
  
  border-radius: 100px;
  position: relative;
  margin: 180px auto 100px;
}

#cloud:after, #cloud:before {
  content: "";
  position: absolute;
  background: #f2f9fe;
  z-index: -1;
}

#cloud:after {
  width: 100px;
  height: 100px;
  top: -50px;
  left: 50px;
  border-radius: 100px;
}

#cloud:before {
  width: 180px;
  height: 180px;
  top: -90px;
  right: 50px;
  border-radius: 200px;
}

.shadow {
  width: 300px;
  position: absolute;
  bottom: -10px;
  left: 20px;  
  background: #000;
  z-index: -1;
  -webkit-box-shadow: 0 0 25px 8px rgba(0,0,0,0.4);
  box-shadow: 0 0 25px 3px rgba(0,0,0,0.3);
  border-radius: 50%;
}
Do you want hide your ip address?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.