Created
September 28, 2022 02:36
-
-
Save 9kopb/42ec14c7c142f7c6043eba8d4ea29206 to your computer and use it in GitHub Desktop.
Pure CSS Modal - #15
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="section full-height"> | |
<input class="modal-btn" type="checkbox" id="modal-btn" name="modal-btn"/> | |
<label for="modal-btn">Open Modal <i class="uil uil-expand-arrows"></i></label> | |
<div class="modal"> | |
<div class="modal-wrap"> | |
<img src="https://assets.codepen.io/1462889/sl3.jpg" alt=""> | |
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p> | |
</div> | |
</div> | |
<a href="https://front.codes/" class="logo" target="_blank"> | |
<img src="https://assets.codepen.io/1462889/fcy.png" alt=""> | |
</a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ========================================= * | |
BEST VIEWED FULLSCREEN | |
https://codepen.io/ig_design/full/BajVZre | |
* ========================================= */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Please ❤ this if you like it! */ | |
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900'); | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
} | |
body{ | |
font-family: 'Poppins', sans-serif; | |
font-weight: 400; | |
font-size: 15px; | |
line-height: 1.7; | |
color: #1f2029; | |
background-color: #fff; | |
overflow: hidden; | |
background-image: url('https://assets.codepen.io/1462889/back-page.svg'); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: 101%; | |
} | |
p{ | |
font-family: 'Poppins', sans-serif; | |
font-weight: 400; | |
font-size: 16px; | |
line-height: 1.7; | |
color: #1f2029; | |
} | |
.section{ | |
position: relative; | |
width: 100%; | |
display: block; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
.full-height{ | |
min-height: 100vh; | |
} | |
[type="checkbox"]:checked, | |
[type="checkbox"]:not(:checked){ | |
position: absolute; | |
left: -9999px; | |
} | |
.modal-btn:checked + label, | |
.modal-btn:not(:checked) + label{ | |
position: relative; | |
font-family: 'Poppins', sans-serif; | |
font-weight: 500; | |
font-size: 15px; | |
line-height: 2; | |
height: 50px; | |
transition: all 200ms linear; | |
border-radius: 4px; | |
width: 240px; | |
letter-spacing: 1px; | |
display: -webkit-inline-flex; | |
display: -ms-inline-flexbox; | |
display: inline-flex; | |
-webkit-align-items: center; | |
-moz-align-items: center; | |
-ms-align-items: center; | |
align-items: center; | |
-webkit-justify-content: center; | |
-moz-justify-content: center; | |
-ms-justify-content: center; | |
justify-content: center; | |
-ms-flex-pack: center; | |
text-align: center; | |
-ms-flex-item-align: center; | |
align-self: center; | |
border: none; | |
cursor: pointer; | |
background-color: #102770; | |
color: #ffeba7; | |
box-shadow: 0 12px 35px 0 rgba(16,39,112,.25); | |
} | |
.modal-btn:not(:checked) + label:hover{ | |
background-color: #ffeba7; | |
color: #102770; | |
} | |
.modal-btn:checked + label .uil, | |
.modal-btn:not(:checked) + label .uil{ | |
margin-left: 10px; | |
font-size: 18px; | |
} | |
.modal-btn:checked + label:after, | |
.modal-btn:not(:checked) + label:after{ | |
position: fixed; | |
top: 30px; | |
right: 30px; | |
z-index: 110; | |
width: 40px; | |
border-radius: 3px; | |
height: 30px; | |
text-align: center; | |
line-height: 30px; | |
font-size: 18px; | |
background-color: #ffeba7; | |
color: #102770; | |
font-family: 'unicons'; | |
content: '\eac6'; | |
box-shadow: 0 12px 25px 0 rgba(16,39,112,.25); | |
transition: all 200ms linear; | |
opacity: 0; | |
pointer-events: none; | |
transform: translateY(20px); | |
} | |
.modal-btn:checked + label:hover:after, | |
.modal-btn:not(:checked) + label:hover:after{ | |
background-color: #102770; | |
color: #ffeba7; | |
} | |
.modal-btn:checked + label:after{ | |
transition: opacity 300ms 300ms ease, transform 300ms 300ms ease, background-color 250ms linear, color 250ms linear; | |
opacity: 1; | |
pointer-events: auto; | |
transform: translateY(0); | |
} | |
.modal{ | |
position: fixed; | |
display: block; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-ms-flex-pack: center; | |
justify-content: center; | |
margin: 0 auto; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 100; | |
overflow-x: hidden; | |
background-color: rgba(31,32,41,.75); | |
pointer-events: none; | |
opacity: 0; | |
transition: opacity 250ms 700ms ease; | |
} | |
.modal-btn:checked ~ .modal{ | |
pointer-events: auto; | |
opacity: 1; | |
transition: all 300ms ease-in-out; | |
} | |
.modal-wrap { | |
position: relative; | |
display: block; | |
width: 100%; | |
max-width: 400px; | |
margin: 0 auto; | |
margin-top: 20px; | |
margin-bottom: 20px; | |
border-radius: 4px; | |
overflow: hidden; | |
padding-bottom: 20px; | |
background-color: #fff; | |
-ms-flex-item-align: center; | |
align-self: center; | |
box-shadow: 0 12px 25px 0 rgba(199,175,189,.25); | |
opacity: 0; | |
transform: scale(0.6); | |
transition: opacity 250ms 250ms ease, transform 300ms 250ms ease; | |
} | |
.modal-wrap img { | |
display: block; | |
width: 100%; | |
height: auto; | |
} | |
.modal-wrap p { | |
padding: 20px 30px 0 30px; | |
} | |
.modal-btn:checked ~ .modal .modal-wrap{ | |
opacity: 1; | |
transform: scale(1); | |
transition: opacity 250ms 500ms ease, transform 350ms 500ms ease; | |
} | |
.logo { | |
position: absolute; | |
top: 25px; | |
left: 25px; | |
display: block; | |
z-index: 1000; | |
transition: all 250ms linear; | |
} | |
.logo img { | |
height: 26px; | |
width: auto; | |
display: block; | |
filter: brightness(10%); | |
transition: filter 250ms 700ms linear; | |
} | |
.modal-btn:checked ~ .logo img { | |
filter: brightness(100%); | |
transition: all 250ms linear; | |
} | |
@media screen and (max-width: 500px) { | |
.modal-wrap { | |
width: calc(100% - 40px); | |
padding-bottom: 15px; | |
} | |
.modal-wrap p { | |
padding: 15px 20px 0 20px; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/unicons.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment