Pure CSS lightbox technique

Developer
Mario Nebl
Size
3,372 Kb
Views
38,456
  1. Pure CSS lightbox technique Previews
  2. Pure CSS lightbox technique HTML Codes
  3. Pure CSS lightbox technique CSS Codes

How do I make an pure css lightbox technique?

Lightbox technique using no javascript whatsoever. What is a pure css lightbox technique? How do you make a pure css lightbox technique? This script and codes were developed by Mario Nebl on 07 July 2022, Thursday.

Pure CSS lightbox technique Previews
IQ Test

Pure CSS lightbox technique - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS lightbox technique</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label class="hero button" for="lightbox-1">Launch Lightbox</label>
<aside class="lightbox"> <input type="checkbox" class="state" id="lightbox-1" /> <article class="content"> <header class="header"> <h3 class="h h3">Lorem Ipsum</h3> <label class="button" for="lightbox-1">&times;</label> </header> <main class="main"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </main> <footer class="footer"> <button class="button" type="button">Do something</button> <label class="button" for="lightbox-1">Close</label> </footer> </article> <label class="backdrop" for="lightbox-1"></label>
</aside>
</body>
</html>

Pure CSS lightbox technique - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { font-family: "Helvetica Neue", Helvetica, Arial; font-size: 15px; margin: 0; padding: 0; background: #5ec792;
}
.h { margin-top: 0;
}
.button { display: inline-block; margin: 0; padding: 10px 15px; background-color: #5ec792; border: none; color: #fff; text-align: center; font-size: 14px; font-weight: bold; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
}
.button:hover { box-shadow: inset 0 -2.5px rgba(0, 0, 0, 0.4);
}
.hero { position: absolute; top: 50%; left: 50%; color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 0, 0, 0.4); -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
}
.state { position: absolute; top: 0; left: -100vw;
}
.state:checked ~ .content { -webkit-transform: none; transform: none;
}
.state:checked ~ .backdrop { bottom: 0; opacity: 1; z-index: 1; -webkit-transition: 0.3s opacity ease-in-out; transition: 0.3s opacity ease-in-out;
}
.lightbox { position: fixed; top: 0; right: 0; left: 0; height: 0; padding: 0 20px;
}
.lightbox .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; position: relative; z-index: 2; max-width: 500px; max-height: 95vh; margin: 20px auto; padding: 20px; background: #fff; -webkit-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s transform ease-in-out; transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out; border: 1px solid rgba(0, 0, 0, 0.1);
}
.lightbox .header,
.lightbox .footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.lightbox .header .h,
.lightbox .footer .h { margin: 0;
}
.lightbox .header .button:not(:first-child),
.lightbox .footer .button:not(:first-child) { margin-left: auto;
}
.lightbox .header { padding-bottom: 10px;
}
.lightbox .footer { padding-top: 20px;
}
.lightbox .main { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: scroll;
}
.lightbox .backdrop { position: fixed; top: 0; right: 0; bottom: 100%; left: 0; opacity: 0; background: rgba(0, 0, 0, 0.3); -webkit-transition: 0.3s opacity ease-in-out, bottom 0.1s 0.3s; transition: 0.3s opacity ease-in-out, bottom 0.1s 0.3s;
}
Pure CSS lightbox technique - Script Codes
Pure CSS lightbox technique - Script Codes
Home Page Home
Developer Mario Nebl
Username marionebl
Uploaded July 07, 2022
Rating 4.5
Size 3,372 Kb
Views 38,456
Do you need developer help for Pure CSS lightbox technique?

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!

Mario Nebl (marionebl) Script Codes
Name
Blog Concept - Single Post
Animation in relation to user input, the sane way
Pure CSS toggles
Pure CSS tabs
Basic jogwheel example
Mobile toolbar study
Floating Labels
A Pen by Mario Nebl
Blog Concept - Landing Page
The Dark Side of the Moon 3D
Create amazing marketing copy 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!