Pure CSS Torch Light

What is a pure css torch light How do you make a pure css torch light? This script and codes were developed by Julien Dargelos on 02 February 2022, Wednesday.

How do I make an pure css torch light?
  1. Pure CSS Torch Light Previews
  2. Pure CSS Torch Light HTML Codes
  3. Pure CSS Torch Light CSS Codes
Pure CSS Torch Light Previews

Pure CSS Torch Light HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pure CSS Torch Light</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html {height:100%;}

body {
	margin:0;
	height:100%;
	overflow:hidden;
}

#on {
	background:rgb(240,240,240);
	width:100%;
	height:100%;
	transition:0.5s 0.3s;
  display:block;
}

a {
  width:100%;
  height:100%;
  z-index:2;
  display:block;
  position:absolute;
}

#switchOff {display:none;}

#light {
	width:0;
	height:50px;
	top:50%;
	left:50%;
	margin:-325px 0 0 -1600px;
	border:300px solid transparent;
	border-right:none;
	border-left:1500px solid rgb(180,180,180);
	opacity:0;
	position:absolute;
	transition:0.2s;
}

#torchLight {
	width:300px;
	height:100px;
	top:50%;
	left:50%;
	margin:-50px 0 0 -150px;
	font-size:0;
	position:absolute;
}

#torchLight div {
	background:rgb(60,60,60);
	margin:0;
	position:relative;
	display:inline-block;
}

#torchLight div:nth-child(1) {
	width:50px;
	height:100px;
	border-radius:6px 0 0 6px;
	box-shadow:inset 5px 0 0 rgb(80,80,80),inset 6px 0 0 rgb(50,50,50),inset -3px 0 0 rgb(80,80,80),inset 0 -10px rgb(80,80,80),inset 0 -15px rgb(60,60,60),inset 0 -20px rgb(80,80,80);
}

#torchLight div:nth-child(2) {
	background:none;
	width:0;
	height:70px;
	border:15px solid transparent;
	border-right:0;
	border-left:30px solid rgb(60,60,60);
}

#torchLight div:nth-child(3) {
	width:220px;
	height:70px;
	top:-15px;
	border-radius:0 6px 6px 0;
	box-shadow:inset 3px 0 0 rgb(80,80,80),inset -5px 0 0 rgb(80,80,80),inset -6px 0 0 rgb(50,50,50),inset 0 -10px rgb(80,80,80),inset 0 -15px rgb(60,60,60),inset 0 -20px rgb(80,80,80);
}

#torchLight div:nth-child(4) {
	background:rgb(50,50,50);
	width:50px;
	height:5px;
	top:-87px;
	left:100px;
	border:1px solid rgb(70,70,70);
	border-top:none;
	border-radius:0 0 3px 3px;
}

#torchLight div:nth-child(5) {
	background:rgb(20,20,20);
	width:28px;
	height:7px;
	top:-90px;
	left:51px;
	border:1px solid rgb(50,50,50);
	border-bottom:none;
	border-radius:4px 4px 1px 1px;
	transition:0.2s;
}

#on:target {
	background:rgb(20,20,20);
	transition:0.5s;
}

#on:target #switchOn {display:none;}
#on:target #switchOff {display:block;}

#on:target #light {
	opacity:1;
	transition:0.2s 0.6s;
}

#on:target #torchLight div:nth-child(5) {
	left:67px;
	transition:0.2s 0.5s;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div id="on">
  <a id="switchOn" href="#on"></a>
  <a id="switchOff" href="#off"></a>
  <div id="light"></div>
  <div id="torchLight">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
  
  
</body>
</html>

Pure CSS Torch Light CSS Codes

html {height:100%;}

body {
	margin:0;
	height:100%;
	overflow:hidden;
}

#on {
	background:rgb(240,240,240);
	width:100%;
	height:100%;
	transition:0.5s 0.3s;
  display:block;
}

a {
  width:100%;
  height:100%;
  z-index:2;
  display:block;
  position:absolute;
}

#switchOff {display:none;}

#light {
	width:0;
	height:50px;
	top:50%;
	left:50%;
	margin:-325px 0 0 -1600px;
	border:300px solid transparent;
	border-right:none;
	border-left:1500px solid rgb(180,180,180);
	opacity:0;
	position:absolute;
	transition:0.2s;
}

#torchLight {
	width:300px;
	height:100px;
	top:50%;
	left:50%;
	margin:-50px 0 0 -150px;
	font-size:0;
	position:absolute;
}

#torchLight div {
	background:rgb(60,60,60);
	margin:0;
	position:relative;
	display:inline-block;
}

#torchLight div:nth-child(1) {
	width:50px;
	height:100px;
	border-radius:6px 0 0 6px;
	box-shadow:inset 5px 0 0 rgb(80,80,80),inset 6px 0 0 rgb(50,50,50),inset -3px 0 0 rgb(80,80,80),inset 0 -10px rgb(80,80,80),inset 0 -15px rgb(60,60,60),inset 0 -20px rgb(80,80,80);
}

#torchLight div:nth-child(2) {
	background:none;
	width:0;
	height:70px;
	border:15px solid transparent;
	border-right:0;
	border-left:30px solid rgb(60,60,60);
}

#torchLight div:nth-child(3) {
	width:220px;
	height:70px;
	top:-15px;
	border-radius:0 6px 6px 0;
	box-shadow:inset 3px 0 0 rgb(80,80,80),inset -5px 0 0 rgb(80,80,80),inset -6px 0 0 rgb(50,50,50),inset 0 -10px rgb(80,80,80),inset 0 -15px rgb(60,60,60),inset 0 -20px rgb(80,80,80);
}

#torchLight div:nth-child(4) {
	background:rgb(50,50,50);
	width:50px;
	height:5px;
	top:-87px;
	left:100px;
	border:1px solid rgb(70,70,70);
	border-top:none;
	border-radius:0 0 3px 3px;
}

#torchLight div:nth-child(5) {
	background:rgb(20,20,20);
	width:28px;
	height:7px;
	top:-90px;
	left:51px;
	border:1px solid rgb(50,50,50);
	border-bottom:none;
	border-radius:4px 4px 1px 1px;
	transition:0.2s;
}

#on:target {
	background:rgb(20,20,20);
	transition:0.5s;
}

#on:target #switchOn {display:none;}
#on:target #switchOff {display:block;}

#on:target #light {
	opacity:1;
	transition:0.2s 0.6s;
}

#on:target #torchLight div:nth-child(5) {
	left:67px;
	transition:0.2s 0.5s;
}
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.