#codevember 19 - day and night

In this example below you will see how to do a #codevember 19 - day and night with some HTML / CSS and Javascript

Day and night switch (checkbox) made only with css

Thumbnail
This awesome code was written by phcacique, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright phcacique ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>#codevember 19 - day and night</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <input type="checkbox" id="c" />
<label for="c">
	<div id="a">
		<div id="c1"></div>
		<div id="c2"></div>
		<div id="c3"></div>
	</div>
</label>
<section>
	<div class="star" id="s1"></div>
	<div class="star" id="s2"></div>
	<div class="star" id="s3"></div>
	<div class="star" id="s4"></div>
	<div class="star" id="s5"></div>
	<div class="night">Good Night</div>
	<div class="day">Good Morning</div>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/phcacique/codevember-19-day-and-night-WooVMW */
@import url('https://fonts.googleapis.com/css?family=Lalezar|Pacifico');

html, body{
	height: 100%;
	margin: 0;
	color: #fff;
	overflow:none;
}

.night{font-family: 'Lalezar', cursive; font-size: 1.8em;}
.day{font-family: 'Pacifico', cursive; font-size: 1.5em;}

*{transition: 1s all;}

input[type=checkbox] + label{
	background-color: #040d1c;
	width: 200px;
	height: 80px;
	border-radius: 50px;
	display: block;
	padding: 10px;
	box-shadow: inset 5px 5px 20px rgba(0,0,0,0.5);
	z-index: 5;
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 80px);
	cursor: pointer;
	cursor: hand;
}

#a{
	width:80px;
	height:80px;
	border-radius:100px;
	background-color: #f0f0f0;
	box-shadow: 0 0 100px rgba(255,255,255,1); 
}

#c1, #c2, #c3{
	background-color: rgba(0,0,0,0.03);
	width: 10px;
	height: 10px;
	border-radius: 100%;
	position: relative;
}

#c1{
	top: 50px;
	left: 20px
}

#c2{
	top: 50px;
	left: 40px
}

#c3{
	top: 10px;
	left: 40px;
	width: 20px;
	height: 20px;
}

input[type=checkbox]{display: none;}

input[type=checkbox] + label ~ section{
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #0f1f3a;
	z-index:-1;
}

input[type=checkbox] + label ~ section .star{
	width: 5px;
	height: 5px;
	border-radius: 100%;
	background-color: rgba(255,255,255,0.4);
	position: absolute;
}

#s1{top: 10%; left: 50%; width: 3px; height: 3px;}
#s2{top: 90%; left: 30%; width: 2px; height: 2px;}
#s3{top: 85%; left: 80%; width: 3px; height: 3px;}
#s4{top: 65%; left: 10%;}
#s5{top: 40%; left: 90%;}


input[type=checkbox] + label ~ section .night{
	opacity:1;
	position: absolute;
	top: calc(50% - 120px);
	left: 30%;
}

input[type=checkbox] + label ~ section .day{
	opacity:0;
	position: absolute;
	top: calc(50% + 90px);
	left: calc(100% - 150px);
}


/* ----- CHECKED ----- */
input[type=checkbox]:checked + label{
	background-color: #2a5fba;
}

input[type=checkbox]:checked + label ~ section{
	background-color: #568eef;
}

input[type=checkbox]:checked + label ~ section .star{
	opacity: 0;
}

input[type=checkbox]:checked + label #a{
	background-color: #f4e94e;
	margin-left: calc(100% - 80px);
	box-shadow: 0 0 100px rgba(249, 240, 104,1); 
}

input[type=checkbox]:checked + label #a *{
	opacity: 0;
}

input[type=checkbox]:checked + label ~ section .night{
	opacity:0;
	position: absolute;
	left: 0;
}

input[type=checkbox]:checked + label ~ section .day{
	opacity:1;
	position: absolute;
	left: 60%;
}

Comments