LUCiD GRAFiX Logo

Video tutorials
YouTube RSS Feed
Search

VIDEO TUTORIAL

Pure CSS Sliding Modal

*Set the video to HD for best viewing experience.
Written by Posted on December 27th, 2013 No Comments
Share This

Pure CSS Sliding Modal.

Today we are going to be making a Pure CSS Sliding Modal using a trick that was inspired by an article I read at http://designshack.net/articles/css/build-an-adaptive-css-modal-window/ which used the pseudo selector :checked and the adjacent selector which I thought was cool. So using that trick to make my own version, I’m making a sliding modal using pure CSS.

Markup

CSS

This sliding modal gets it’s grace from using CSS Animation Tool http://matthewlein.com/ceaser/ which allows you to tweak your CSS3 easing to your liking.

Well I hope you enjoyed this cool trick without using JavaScript!

Check out the Demo! Download files!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

clearfix How to make a proper clearfix
cool css3 navigation menu Cool CSS3 Navigation Menu
SASS 6 Intro videos - SIMPLIFIED SASS SIMPLIFIED – 5 Video Series
Leave a comment

Leave a Reply