Quickly Build a Swish Teaser Page With CSS3

Quickly Build a Swish Teaser Page With CSS3

on Apr 4th 2012 with 20 comments
Tutorial Details
  • Topic: HTML5, CSS3
  • Difficulty: Intermediate
  • Estimated completion time: 30-45 mins
Download Source Files
Demo View It Online

In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Many websites and upcoming apps gain great publicity from teaser pages, so this is a useful concept to add to your toolkit. Use it for any app or website that’s getting ready to launch.

Step 1: The HTML Markup

The HTML for the teaser page is quite simple. We just have a container with our introductory text and inputs.

<!doctype html>
<head>
	<!-- Basics -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>App is coming soon.</title>
	<!-- Mobile -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- CSS -->
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/styles.css">
</head>
	<!-- Main HTML -->
<body>
	<!-- Begin Page Content -->
	<div id="container">
		<h1>App.</h1>
		<p>
		This amazing application will change your life. Subscribe to be notified when it's available, or follow us on <a href="#">Twitter.</a>
		</p>
		<div id="subscribe">
		<input type="email" placeholder="email address">
		<input type="submit" value="submit">
		</div>
	</div>
	<!-- End Page Content -->
</body>
</html>

Step 2: Positioning and Sizing Our Elements

Let’s give our page some structure. We start out with the basics, and position the container in the center of the page. We’ll use positioning of 50%, then negative margins to bring the object back half its width and height.

html, body {
	width: 100%;
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	color: #444;
	-webkit-font-smoothing: antialiased;
}
}
#container {
	position: fixed;
	width: 500px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -250px;
	text-align: center;
}

Next, we position the text and inputs, using attribute selectors to target the email and submit inputs separately.

h1 {
	font-size: 90px;
}
p {
	width: 80%;
	font-size: 23px;
	line-height: 1.3em;
	margin: 1.1em auto;
	text-align: center;
}
#subscribe {
	margin: 0 auto;
	text-align: center;
}
input[type=email] {
	width: 90%;
	padding: 15px;
	margin: 0 auto;
}
input[type=submit] {
	position: absolute;
	margin-left: -105px;
	margin-top: 5px;
	padding: 10px;
	width: 100px;
	height: 50px;
}

Step 3: Styling the Text

Styling the text for this page is quite simple. We want the name to contrast with the background, so we’ll make it white. The text is important, but we want visitors to remember the name of our product, so we won’t make it as pronounced. The Twitter link is underlined, indicating that it’s a link.

First, the main text:

h1 {
	font-size: 90px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 4px #000;
	margin-top: 20px;
}
p {
	width: 80%;
	font-size: 23px;
	line-height: 1.3em;
	color: #fff;
	margin: 1.1em auto;
	text-align: center;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}

Then the Twitter link:

p a {
	color: #fff;
	border-bottom: 2px solid #2da1ec;
}

Step 4: Styling the Background

Now for the fun part: giving the objects on our page that extra je ne sais quoi. We’ll start by creating a nice gradient background. If you’re a Mac user you can lean on GradientApp to do the hard work for you. Alternatively, head on over to CSS3 Please! to get some idea of the syntax.

html, body {
	width: 100%;
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	color: #444;
	-webkit-font-smoothing: antialiased;
	background: #000222;
	background: -moz-linear-gradient(top,  #000222 0%, #4b637c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
	background: -webkit-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -o-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -ms-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: linear-gradient(top,  #000222 0%,#4b637c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );
}

Step 5: Styling the Subscribe Form

The subscribe form is the focus of our page, since we want visitors to find out when our amazing product is released. We want it to be the focus of the page, after the name or logo.

We start by styling the placeholder (Mozilla and Webkit specific styles), and setting a font-size:

 	::-webkit-input-placeholder {
 	   color: rgba(255, 255, 255, 0.4);
 	}
 	::-moz-input-placeholder {
 	   color: rgba(255, 255, 255, 0.4);
 	}
 	input {
 		font-family: "Helvetica Neue", Helvetica, sans-serif;
 		font-size: 25px;
 	}

Now let’s give the field and button some color and depth:

  	input[type=email] {
  		outline: none;
  		width: 90%;
  		padding: 15px;
  		margin: 0 auto;
  		color: #fff;
  		border: none;
  		-webkit-border-radius: 6px;
  		-moz-border-radius: 6px;
  		border-radius: 6px;
  		background: rgba(0, 0, 0, 0.3);
  		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  		-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  		-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  	}
  	input[type=submit] {
  		position: absolute;
  		margin-left: -105px;
  		margin-top: 5px;
  		font-size: 25px;
  		color: #222;
  		text-shadow: 0 1px 0 #fff;
  		padding: 10px;
  		width: 100px;
  		height: 50px;
  		border: none;
  		background: #f0f0f0;
  		background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%);
  		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff));
  		background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  		background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  		background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  		background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 );
  		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  		-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  		-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  		box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  		-webkit-border-radius: 3px;
  		-moz-border-radius: 3px;
  		border-radius: 3px;
  		cursor: pointer;
  	}

Step 6: Adding CSS Transitions

Let’s add some nice CSS transitions to help grab visitors’ attention.

First, we’ll add hover and active states to the Twitter link and inputs:

   p a {
   	color: #fff;
   	border-bottom: 2px solid #2da1ec;
   }
   p a:hover {
   	color: #2da1ec;
   	border-bottom: 2px solid #fff;
   }
   
  input[type=email] {
  	outline: none;
  	width: 90%;
  	padding: 15px;
  	margin: 0 auto;
  	color: #fff;
  	border: none;
  	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  	border-radius: 6px;
  	background: rgba(0, 0, 0, 0.3);
  	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  	-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);
  }
  input[type=email]:hover {
  	background: rgba(0, 0, 0, 0.5);
  }
  input[type=email]:focus {
  	-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  	-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  	-o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  	box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2);
  	background: rgba(0, 0, 0, 0.6);
  }
  input[type=submit] {
  	position: absolute;
  	margin-left: -105px;
  	margin-top: 5px;
  	font-size: 25px;
  	color: #222;
  	text-shadow: 0 1px 0 #fff;
  	padding: 10px;
  	width: 100px;
  	height: 50px;
  	border: none;
  	background: #f0f0f0;
  	background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%);
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff));
  	background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  	background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  	background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  	background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%);
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 );
  	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  	-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  	box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  	-webkit-border-radius: 3px;
  	-moz-border-radius: 3px;
  	border-radius: 3px;
  	cursor: pointer;
  }
  input[type=submit]:hover {
  	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  	-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  	box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  	width: 125px;
  	margin-left: -130px;
  }
  input[type=submit]:active {
  	background: #c3d7ff;
  	background: -moz-linear-gradient(top,  #c3d7ff 0%, #f0f0f0 100%);
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d7ff), color-stop(100%,#f0f0f0));
  	background: -webkit-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  	background: -o-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  	background: -ms-linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  	background: linear-gradient(top,  #c3d7ff 0%,#f0f0f0 100%);
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d7ff', endColorstr='#f0f0f0',GradientType=0 );
  }

Then we add the transition rules:

   p a {
   	color: #fff;
   	border-bottom: 2px solid #2da1ec;
   	-webkit-transition: all .4s ease;
   	-moz-transition: all .4s ease;
   	-o-transition: all .4s ease;
   	transition: all .4s ease;
   }

and

   input {
   	font-family: "Helvetica Neue", Helvetica, sans-serif;
   	font-size: 25px;
   	-webkit-transition: all .4s ease;
   	-moz-transition: all .4s ease;
   	-o-transition: all .4s ease;
   	transition: all .4s ease;
   }

Step 7: CSS Animations

We can also add some nice CSS3 animations for an added effect when the page loads. It’s advisable to use CSS animations as a compliment to your design; not an integral part of it. Support for animations is still sparse and you should be wary of over-complicating your design for the sake of it.

That said, Dan Eden’s Animate.css is a really useful CSS animation library. You can add it as shown in the original document at the beginning of the tutorial, or import it into your stylesheet, if you’d prefer:

   @import url(animate.css);

There are a variety of beautiful animations to choose from, but I’m going to add the bounceInDown animation. We apply it to our element (in this case the container) like so:

   #container {
   	position: fixed;
   	width: 500px;
   	height: 300px;
   	top: 50%;
   	left: 50%;
   	margin-top: -150px;
   	margin-left: -250px;
   	text-align: center;
   	-webkit-animation-name: bounceInDown;
   	-webkit-animation-fill-mode: both;
   	-webkit-animation-duration: 1.5s;
   	-webkit-animation-iteration-count: 1;
   	-webkit-animation-timing-function: linear;
   	-moz-animation-name: bounceInDown;
   	-moz-animation-fill-mode: both;
   	-moz-animation-duration: 1.5s;
   	-moz-animation-iteration-count: 1;
   	-moz-animation-timing-function: linear;
   	animation-name: bounceInDown;
   	animation-fill-mode: both;
   	animation-duration: 1.5s;
   	animation-iteration-count: 1;
   	animation-timing-function: linear;
   }

If you want to change the animation, you just change the -animation-name to the name of the animation you’d like.

Step 8: Taking Things Further

This isn’t a responsive design, far from it, but you might want to add a couple of media queries to the bottom of your css to cater for smaller devices. Think about making the container element narrower for smaller screens, and altering the width or positioning of the inputs.

To allow our signup form to add email addresses to a list, we could do with wiring it up to a email newsletter service, such as MailChimp. I’m not going to explain this in detail, since this article demonstrates it perfectly.

If you’d like to add validation to the form, you can check out this tutorial.

Conclusion

Building a quick teaser page like this one is vital for publicity before a website or product launch. It needn’t be complex, as this pure CSS solution shows.

I hope you learned something from this tutorial, thanks for reading!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a web and user interface designer who likes minimalism. I run a freelancing web design business called Iqonic Design, and you can find my work there, as well as connect with me on Twitter, Dribbble, Forrst, and Zerply.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more