Pure CSS Torch Light

Developer
Julien Dargelos
Size
2,727 Kb
Views
14,161
  1. Pure CSS Torch Light Previews
  2. Pure CSS Torch Light HTML Codes
  3. Pure CSS Torch Light CSS Codes

How do I make an 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 29 November 2022, Tuesday.

Pure CSS Torch Light Previews
IQ Test

Pure CSS Torch Light - Script Codes 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 - Script Codes 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;
}
Pure CSS Torch Light - Script Codes
Pure CSS Torch Light - Script Codes
Home Page Home
Developer Julien Dargelos
Username juliendargelos
Uploaded November 29, 2022
Rating 3.5
Size 2,727 Kb
Views 14,161
Do you need developer help for Pure CSS Torch Light?

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!

Julien Dargelos (juliendargelos) Script Codes
Name
Skateboard tricks
InfoGrid
Tags Input
Calculator
Grapher
Watch
A Pen by Julien Dargelos
Psychedelic Animation
Vusic
Scroll snap points carousel
Create amazing sales emails 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!