This modal windows or modal boxes are normally created using Javascript, but we will create one using pure HTML5 and CSS3.

Here is the HTML code for the modal window:

<a href="#openModal">Click me to open modal window</a>

We use this simple link that says “Click me to open modal window” to open the dialogue box. All the styling is done with classes, so the ID is just a hook for opening the modal box.

Here is a simple version of the modal window.

<div id="openModal" class="modalWindow">
	<div>
		<h2>This is a sample modal window</h2>
		<p>This is a sample modal window that can be created using CSS3 and HTML5.</p>
		<a href="#ok" title="Ok" class="ok">Ok</a>
	</div>
</div>

With his corresponding CSS:

.modalWindow {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
pointer-events: none;
text-align:center;
}
.modalWindow:target {
opacity:1;
pointer-events: auto;
}
.modalWindow > div {
width: 500px;
position: relative;
margin: 10% auto;
background: #fff;
}

See simple demo | Click view source code to see the awesome code

Start Styling the HTML and CSS modal window – See final result

But the cool stuff comes with some aditional styling. So here is the complete HTML for a styled modal window:

<div id="openModal" class="modalWindow">
	<div>
		
		<div class="modalHeader">
			<h2>This is a sample modal window</h2>
			<a href="#close" title="Close" class="close">X</a>
		</div>
		
		<div class="modalContent">
			<p>This is a sample modal window that can be created using CSS3 and HTML5.</p>
			<p>Modal windows are used, among many others, to display login/register forms; advertisements; or just notifications to the user. They frequently contain critical information, that user must attend in order to return to the page.</p>
		</div>
		
		<div class="modalFooter">
			<a href="#cancel" title="Cancel" class="cancel">Cancel</a>
			<a href="#ok" title="Ok" class="ok">Apply</a>
			<p>Keep in mind that this is a demo</p>
			<div class="clear"></div>
		</div>
	</div>
</div>

And Here is the complete CSS for out CSS3 modal window:

.modalWindow {
position: fixed;
font-family: arial;
font-size:80%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalHeader h2 { color: #189CDA; border-bottom: 2px groove #efefef; }
.modalWindow:target {
opacity:1;
pointer-events: auto;
}
.modalWindow > div {
width: 500px;
position: relative;
margin: 10% auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fff;
}
.modalWindow .modalHeader { padding: 5px 20px 0px 20px; }
.modalWindow .modalContent { padding: 0px 20px 5px 20px; }
.modalWindow .modalFooter { padding: 8px 20px 8px 20px; }
.modalFooter {
background: #F1F1F1;
border-top: 1px solid #999;
-moz-box-shadow: inset 0px 13px 12px -14px #888;
-webkit-box-shadow: inset 0px 13px 12px -14px #888;
box-shadow: inset 0px 13px 12px -14px #888;
}
.modalFooter p {
color:#D4482D;
text-align:right;
margin:0;
padding: 5px;
}
.ok, .close, .cancel {
background: #606061;
color: #FFFFFF;
line-height: 25px;
text-align: center;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close {
position: absolute;
right: 5px;
top: 5px;
width: 22px;
height: 22px;
font-size: 10px;

}
.ok, .cancel {
width:80px;
float:right;
margin-left:20px;
}
.ok:hover { background: #189CDA; }
.close:hover, .cancel:hover { background: #D4482D; }
.clear { float:none; clear: both; }

This is just a demo so feel free to destroy it an make it your own. You can also send me some photo of your awesome modal window, or even share the code for it if you want. So here is how mine looks like.

See styled demo | Click view source code to see the awesome code

Pros and Cons

As you’ve probably noticed, the big deal is creating a modal window in HTML5 and CSS3. Why is that such a big deal though? Modal boxes in JavaScript are something a beginner could create, there are hundreds of examples and downloads ready to be used. So why do we want to scrap JavaScript in favour of HTML5 and CSS3?

It would be naive for us to say that one selling point is making sure people with JavaScript can use them; statistics show that only 2% of people worldwide browse without JavaScript, so if that is not an issue, what is?

If you compare this code to any JavaScript animation library you will be shocked to see how much this code is minimized. This means that we have cleaner code witch makes it easier to modify the CSS and HTML.

Besides HTML5 and CSS3 are the future. Everybody is working to implement them into their designs and projects, and using them helps perpetuate its adoption and ensures you don’t get left behind. You get cleaner code, you don’t have to worry about JavaScript libraries. HTML5 and CSS3 aren’t going anywhere, so there’s no reason not to use them.

The big con of the modal window created using HTML5 CSS3 is the compatibility issues with some old browsers. But essentially works in anything, including all mobile browsers, except IE7 and IE8.

It has lots of types of content support and it is really simple to customize. prettyPhoto also comes with lots of features and 5 built-in themes…

• light_rounded
• dark_rounded
• light_square
• dark_square
• facebook
• pp_default
• minimal theme – which will add here with minimal and pure CSS

…which you can easily change via JavaScript customization. But this is not the subject of this tutorial.

I prefer a default minimal and simple theme for prettyPhoto and the ability to add stuff if I need it and not the opposite. So this is my little CSS to create a simple theme for prettyPhoto

Please note that this theme is beta version and you should check that everything is OK before any production deployment. You can also remove all other themes if you do not need them, for a light weight code.

What you will download with the Minimal prettyPhoto theme

So with theme you will get the following:

• Minimal theme for prettyPhoto lightbox
• Really simple and minimal aspect
• No images have been used and I mean no images, including no sprites and no encoded images in the CSS.
• 1 and only HTTP requests to load the theme CSS file (like I said, no images are used). The default theme uses 22 requests to 7 image files of about 20KB (all).
• Smaller CSS file size only 5KB for the compressed version.

so this is all about speed, after all.

So all this, smaller file size and less HTTP requests translate into faster speed when talking about page loading.

Note, that you can bundle this theme into the prettyPhoto main CSS files and remove all other themes if you do not need them.

But if you don’t insert the theme into the main CSS you will still have a fast loading theme, since the browser will not load images in the CSS that are not used. I will not blame you if you don’t bundle the files together, I also prefer to keep things separate, just in case you need to update.

You can include the theme in a separate CSS file like this

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.minimal.css" type="text/css" />

You can include it in any order. It will work.

This is all you have to do to have your minimal theme for prettyPhoto available. You can now go and activate it via prettyPhoto standard function:

$(document).ready(function(){
    $(".gallery a[rel^='prettyPhoto']").prettyPhoto({
        theme:'minimal'
    });
});

Scrool a little bit to see a live working version of the prettyPhoto minimal theme and download the CSS files from GitHub.

PrettyPhoto Minimal theme Demo

Download Minimal theme for prettyPhoto lightbox

You can find the minimal prettyPhoto theme on GitHub here:

https://gist.github.com/catalin586/12ff5f68ceaba74e9c3d

Credits – Here is what I have used for the Minimal theme

The SpinKit to create a simple CSS loader instead of calling a gif image:  https://github.com/tobiasahlin/SpinKit

Some pure CSS icons. I use it for the expand/contract buttons. It works well on IE also. http://nicolasgallagher.com/pure-css-gui-icons/

Some styling for small screens. It’s not perfect but it’s the best I could came up with. http://themeforest.net/forums/thread/prettyphoto-styling-for-small-screens/66783

And the prettyPholo lightbox that you can download it from the main site here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn’t quite the whole story, as additional code needs to be used to accommodate for older browsers.

For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.

So lets return to the beautiful transition effect i was telling you. I´ve just seen this effect on Joomla control panel and I thought its just awesome. If you are using Joomla you know what I’m talking about. If not, here you can see a demo. So I tried to reproduce the transition effect on mouse hover. The css properties I use to achieve this cool effect are:

• css transition
• css border shadow
• css border radius

and added

• css rotate
• css positioning
• css before
• css after

Like I said Joomla uses a transition for the shadow and border properties to achieve the on hover animation, but I played a little bit more adding rotate effect, position animation, and I combined with a strange effect using the css “before” and “after” properties.

Please note that the CSS transition property is still in draft and is not supported by Internet Explorer. On the other hand, Firefox requires the prefix -moz-, Chrome and Safari requires the prefix -webkit- Opera requires the prefix -o-.

Playing around with CSS properties like “after’ and “before” it turn out to be peaty awesome. I have also did some testing with the “rotate” css property witch is quite cool.

See it for your self. Here is the CSS code:

#mylist div {float: left;}

.bg1 {background: url(http://tutorialspage.com/wp-content/uploads/2017/04/CSS3-logo.jpg) center center no-repeat; width:200px; height:150px;}
.bg2 {background: url(http://tutorialspage.com/wp-content/uploads/2017/04/android-logo.jpg) center center no-repeat; width:200px; height:150px;}
.bg3 {background: url(http://tutorialspage.com/wp-content/uploads/2017/04/css3_logo.jpg) center center no-repeat; width:200px; height:150px;}
.bg4 {background: url(http://tutorialspage.com/wp-content/uploads/2017/04/logo-html5-css3.jpg) center center no-repeat; width:200px; height:150px;}

.position {
	position:relative;
	top:0;
}
.border {	
	border:#CCCCCC 1px solid;
	-webkit-border-radius: 5px;/* WebKit */
	 -khtml-border-radius: 5px;/* Firefox */
	   -moz-border-radius: 5px;/* Opera */
			border-radius: 5px;/* Standard */
}
.transition {	
	-webkit-transition: all 1s ease;/* WebKit */
	   -moz-transition: all 1s ease;/* Firefox */
		 -o-transition: all 1s ease;/* Opera */
			transition: all 1s ease;/* Standard */				
}
.position:hover {
	position:relative;
	top:-10px;
}
.rotate:hover {
	-webkit-transform: rotate(10deg);/* WebKit */
	   -moz-transform: rotate(10deg);/* Firefox */
		 -o-transform: rotate(10deg);/* Opera */
			 ransform: rotate(10deg);/* Standard */
}
.rotate360:hover {
	-webkit-transform: rotate(370deg);/* WebKit */
	   -moz-transform: rotate(370deg);/* Firefox */
		 -o-transform: rotate(370deg);/* Opera */
			 ransform: rotate(370deg);/* Standard */
}
.shadow:hover {		 
	-webkit-box-shadow: -10px 10px 35px #888;/* WebKit */
	   -moz-box-shadow: -10px 10px 35px #888;/* Firefox */
		 -o-box-shadow: -10px 10px 35px #888;/* Opera */
			box-shadow: -10px 10px 35px #888;/* Standard */
}
.border:hover {
	-webkit-border-bottom-left-radius:70px 20px;/* WebKit */
	   -moz-border-bottom-left-radius:70px 20px;/* Firefox */
		 -o-border-bottom-left-radius:70px 20px;/* Opera */
			border-bottom-left-radius:70px 20px;/* Standard */
}

.before::before {
	background-color:none;
	background-image:url(http://tutorialspage.com/wp-content/uploads/2017/04/screw.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-12px;

	-webkit-border-radius: 50%;/* WebKit */
	   -moz-border-radius: 50%;/* Firefox */
		 -o-border-radius: 50%;/* Opera */
			border-radius: 50%;/* Standard */	
	
	-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* WebKit */
	   -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* Firefox */
		 -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* Opera */
			box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;	/* Standard */	

	-webkit-transition: all 1s ease;/* WebKit */
	   -moz-transition: all 1s ease;/* Firefox */
		 -o-transition: all 1s ease;/* Opera */
			transition: all 1s ease;/* Standard */	


}

.before:hover::before {
	top:50%;
	margin-top:-9px;

	-webkit-transform: rotate(-720deg);/* WebKit */
	   -moz-transform: rotate(-720deg);/* Firefox */
		 -o-transform: rotate(-720deg);/* Opera */
			transform: rotate(-720deg);/* Standard */
}
 .before_shadow::after {
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-12px;
	content:"";
	
	-webkit-border-radius: 50%;/* WebKit */
	   -moz-border-radius: 50%;/* Firefox */
		 -o-border-radius: 50%;/* Opera */
			border-radius: 50%;/* Standard */	
	
	-webkit-transition: all 1s ease;/* WebKit */
	   -moz-transition: all 1s ease;/* Firefox */
		 -o-transition: all 1s ease;/* Opera */
			transition: all 1s ease;/* Standard */	
			
	-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;/* WebKit */
	   -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;/* Firefox */
		 -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;/* Opera */
			box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;/* Standard */	

 }
 .before_shadow:hover::after {
	top:50%;
	margin-top:-9px;
	
	-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* WebKit */
	   -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* Firefox */
		 -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* Opera */
			box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;	/* Standard */	

}

And here is a piece of the HTML code.

<div class="bg1 border transition shadow position rotate"></div>
<div class="bg2 border transition shadow position rotate"></div>
<div class="bg3 border transition shadow position rotate"></div>
<div class="bg4 border transition shadow position rotate"></div>

See Demo here

I will try to create a simple yet modern form, while maintaining the code easy to customize. Here is the result of all the code. And did I said that the form is also responsive? Well, it is.

Here we have the code used to build a simple HTML form. You may want to add a DOCTYPE to your html document if you worry about  Internet Explorer.

<div id="wrapper">
	<form action="#" id="form">
		<label for="name">Name</label>
		<input type="text" id="name" />
		<label for="email">Email</label>
		<input type="text" id="email" />
		<label for="telephone">Telephone</label>
		<input type="text" id="telephone" />
		<label for="message">Message</label>
		<textarea name="message" id="message" cols="30" rows="10"></textarea><br />
		<input type="submit" value="Send" name="submit" id="submit" />
	</form>
</div>

Note that the web form does not have javascript in there. We used only valid XHTML to create it.

Here we have the css code used to build the form.

#wrapper {
	font-family:verdana;
	margin: 30px auto ;
	padding: 30px;
	background: #4D6879; /* You can change the main color of thew form here. */
	font-size: 14px;
	width:100%;
	max-width:500px;
	box-sizing: border-box;
}

label {
	display: block;
	font-size: 24px;
	padding: 13px 0;
	color: #fff;
	text-shadow: 1px 1px 1px #666;
}

input {
	height: 18px;
	padding: 20px;
	width: 100%;
	box-sizing: border-box;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 10px #444;
	-moz-box-shadow: 0 0 10px #444;
	box-shadow: 0 0 10px #444;
	border: 1px solid #fff;
}

textarea {
	height: 150px;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	border: 1px solid #fff;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 10px #444;
	-moz-box-shadow: 0 0 10px #444;
	box-shadow: 0 0 10px #444;
}

input[type="text"]:hover, textarea:hover {
	border: 1px solid #fff;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4);
}

input#submit {
	text-align: center;
	color: #fff;
	height: 50px;
	padding: 0;
	text-shadow: 1px 1px 1px #000;
	font-size: 18px;
	text-transform: uppercase;
	margin-top: 50px;
	border: 1px solid #000;
	background: #000;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3b3b3b), color-stop(100%, #000000));
	background: -webkit-linear-gradient(top, #3b3b3b 0%,#000000 100%);
	background: -moz-linear-gradient(top, #3b3b3b 0%,#000000 100%);
	background: -o-linear-gradient(top, #3b3b3b 0%,#000000 100%);
	background: -ms-linear-gradient(top, #3b3b3b 0%,#000000 100%);
	background: linear-gradient(top, #3b3b3b 0%,#000000 100%);
	opacity: 0.5;
}

input#submit:hover {
	color: #ccc;
	cursor: pointer;
	opacity: 0.8;
}

label {
	text-transform: uppercase;
	font-size: 14px;
}

Subtle background gradients give depth to the fields while shadows lift them from the page. Even more impressive is that this is done without any images at all.

If you pay attention to the code you will not only obtain a lightweight and beautiful web form design, but you will also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.

This web form was tested and works great all major browsers.

You can see the demo form here:

Like you can see below, just by modifying one single line you can change the form theme.

You work it further and add some more features. For example implement some font you like from Google Font Directory.