CSS Modal Window - HTML and CSS Responsive Popup box creation with CSS Flexbox
CSS Popup/Modal Window - HTML and CSS Responsive Popup box creation with CSS Flexbox https://youtu.be/JNtZl9SMmLQ We will be creating a css modal window using pure css withou JavaS cript. Creating a mobile first responsive modal window with css is quite easy and it doesn't need you to understand javascript or jquery. We are simply using css :target pseudo selector to create our popup box. CSS MODAL Window - SOURCE CODE Start Here: https://goo.gl/p6XRwn Final code: https://goo.gl/NqCndg Here's What You Will Learn: First of all, you need to understand that a css modal window can be used as css popup box, css modal dialog, css modal box, css popup or css lightbox etc. interchangeably. You will learn how to properly write the HTML structure for your responsive CSS popup modal window using the BEM (block elements, modifiers) principles to create a CSS modal window component which is reusable, scalable and easily maintainable. We are also going to add an animation to the css popup/modal box that we will be creating in this video. Finally, we will just go ahead and create a link using anchor tag that will work as a button which we will be using for the triggering the popup window. So we simply create an ID for the modal wrapper element and then we'll target that modal wrapper with that ID by using it as a href attribute value for our anchor element. .i.e. button. ===============NAVIGATE TO QUICK PARTS =============== 1:05 Creating HTML5 Structure for Modal Box 6:18 Writing CSS Styles for the Popup Box 20:00 Adding an animation to the Modal window with CSS ===================================================== If you have any questions, just comment below in comment section. I will try to respond as soon as possible. Like, share and comment! Thanks ============Useful Tutorials============= Writing HTML and CSS Faster using Emmet https://goo.gl/uw6Uxi Flexbox based Responsive Image Gallery https://youtu.be/ob6wWyEAl7g Responsive Image Gallery using HTML5 and CSS3 - Part - 1 https://youtu.be/Fg3N47GrQI8 Responsive Image Gallery Using HTML5 and CSS3 - Part - 2 https://youtu.be/CNjeMbuZYuU Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell
Download
0 formatsNo download links available.