Pure CSS Torch Light
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
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;
}
| Developer | Julien Dargelos |
| Username | juliendargelos |
| Uploaded | November 29, 2022 |
| Rating | 3.5 |
| Size | 2,727 Kb |
| Views | 14,168 |
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 | Size |
| Js-ScrollBar | 5,045 Kb |
| Watch | 2,598 Kb |
| Vusic | 4,178 Kb |
| Skateboard tricks | 3,181 Kb |
| Psychedelic Animation | 2,665 Kb |
| Scroll snap points carousel | 3,524 Kb |
| Calculator | 2,553 Kb |
| A Pen by Julien Dargelos | 2,139 Kb |
| InfoGrid | 4,925 Kb |
| SmartPass | 3,841 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| 3D flipping card | Ssaakkaa | 2,238 Kb |
| Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
| A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
| Menubar compass mixin | Michaelparenteau | 4,925 Kb |
| Transition | Shayhowe | 1,632 Kb |
| Playing with FlexBox | _Billy_Brown | 3,162 Kb |
| Force Counter | Kenlauguico | 2,732 Kb |
| Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
| Importable Clearfix | Corysimmons | 1,411 Kb |
| Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
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. Hide Your IP Now!