Pure CSS Animated Modals

Developer
Tom
Size
2,830 Kb
Views
22,264
  1. Pure CSS Animated Modals Previews
  2. Pure CSS Animated Modals HTML Codes
  3. Pure CSS Animated Modals CSS Codes

How do I make an pure css animated modals?

Animated Slide down modal with browser back support. no JS Animated Slide down modal with tabs. no JS. What is a pure css animated modals? How do you make a pure css animated modals? This script and codes were developed by Tom on 19 November 2022, Saturday.

Pure CSS Animated Modals Previews
IQ Test

Pure CSS Animated Modals - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Animated Modals</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="modal-open" href="#modal">Click To Open Regular Modal</a>
<a class="modal-open" href="#modal-tabbed">Click To Open Tabbed Modal</a>
<div class="modal" id="modal"> <div class="modal-content"> <a href="#" class="modal-close" title="Close Modal">X</a> <h3>Modal Title</h3> <div class="modal-area"> <p>Modal Content Here</p> </div> </div>
</div>
<div class="modal" id="modal-tabbed"> <div class="modal-content"> <a href="#" class="modal-close" title="Close Modal">X</a> <h3>Modal Title</h3> <div class="modal-area"> <p>Tabbed Modal tab content area must be fixed height for tab slide transitions, can be removed and position:absolute removed from .modal-tab and have variable height.</p> <input id="opentab1" type="radio" name="modaltabs" checked="checked"/> <label for="opentab1">Tab 1</label> <input id="opentab2" type="radio" name="modaltabs"/> <label for="opentab2">Tab 2</label> <input id="opentab3" type="radio" name="modaltabs"/> <label for="opentab3">Tab 3</label> <ul class="tab-list"> <li class="modal-tab tab1"><p>Tab 1 Content</p></li> <li class="modal-tab tab2"><p>Tab 2 Content</p></li> <li class="modal-tab tab3"><p>Tab 3 Content</p></li> </ul> </div> </div>
</div>
</body>
</html>

Pure CSS Animated Modals - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400italic,700italic,700);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
* { padding:0; margin:0; position:relative; box-sizing:border-box; -webkit-font-smoothing: subpixel-antialiased !important; -webkit-backface-visibility: hidden;
}
body, html {	height:100%;	min-height:100%; font-family: 'Cantarell', sans-serif; font-size: 14px; overflow-x:hidden; background: #036AB3; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth:always; background: radial-gradient(ellipse at center, rgba(2,162,239,1) 0%,rgba(3,106,179,1) 100%); color:#424242;
}
p { margin-bottom:1em;
}
a.modal-open { display:block; padding:20px; color:#424242; font-weight:bold; margin:50px auto; width:200px; background:#e0e0e0; border-radius:2px; text-align:center; text-decoration:none;
}
.modal { background:rgba(0,0,0,0.7); position:fixed; width:100%; height:100%; top:0px; left:0px; bottom:0px; transition:all .5s ease-in-out; opacity:0; z-index:-1;
}
.modal:target { opacity:1; transition:all .5s ease-in-out; z-index:+1;
}
.modal-content { position:fixed; top:50%; left:50%; width:500px; background:#fff; border-radius:4px; transform:translate(-50%, -200%); transition:all .5s ease-in-out; perspective: 1000; outline:1px solid transparent; opacity:0;
}
.modal:target .modal-content { transform:translate(-50%, -50%); transition:all .5s ease-in-out; transition-delay:.5s; z-index:9999; opacity:1;
}
.modal-close { float:right; text-decoration:none; padding:22px 22px; color:#424242; font-weight:800; transition:all .5s ease-in-out; z-index:+1; background:rgba(0,0,0,0.1); text-align:center; border-radius:0 4px 0 0;
}
.modal-close:hover { color:#fff; background:rgba(0,0,0,0.5);
}
.modal-content h3 { padding:20px; display:block; text-align:center; border-bottom:1px solid #e0e0e0; text-transform:uppercase; background:rgba(2,162,239,1); color:#fff; border-radius:4px 4px 0 0;
}
.modal-area { padding:20px;
}
.modal-area input[type="radio"] { display:none;
}
.modal-area label { float:left; display:block; padding:10px 20px; font-weight:700; cursor:pointer; z-index:+2; background:rgba(0,0,0,.3); color:#fff; transition:all .5s ease-in-out;
}
.modal-area input[type="radio"]:checked + label { background:#fff; color:#424242;
}
.tab-list { display:block; padding:0; margin:0; list-style-type:none; width:100%; overflow:hidden; height:150px;
}
.tab-list:before { content:""; display:block; height:0; clear:both;
}
.modal-tab { display:inline-block; width:100%; padding-top:20px; transform:translateX(-150%); transition:all 300ms cubic-bezier(0, 0, .40, 1); opacity:0; top:0px; position:absolute; height:150px; perspective:1000;
}
#opentab1:checked ~ .tab-list .tab1 { transform:translateX(0%); opacity:1;
}
#opentab2:checked ~ .tab-list .tab2 { transform:translateX(0%); opacity:1;
}
#opentab3:checked ~ .tab-list .tab3 { transform:translateX(0%); opacity:1;
}
Pure CSS Animated Modals - Script Codes
Pure CSS Animated Modals - Script Codes
Home Page Home
Developer Tom
Username TomJ1588
Uploaded November 19, 2022
Rating 3.5
Size 2,830 Kb
Views 22,264
Do you need developer help for Pure CSS Animated Modals?

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!

Tom (TomJ1588) Script Codes
Name
Left Side Slide Out Push Nav
A Pen by Tom
Swing In Social Links
Editor Test
Luke ROTJ Lightsaber
ESPN Style Navigation
CSS Only Line Animated Modal
Pure CSS Only Snackbar
UI Test 2
Create amazing Facebook ads 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!