Advertisement
HTML/CSS

Quickly Build a Swish Teaser Page With CSS3

by

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!

Related Posts
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Code
    Creative Coding
    Customizing the WordPress Admin - Adding StylingCustomize wordpress admin rachel 400
    In the first five parts of this series, I showed you how to customize the WordPress admin in a variety of ways, including customizing the login screen, dashboard and post editing screen. In this tutorial you'll learn how to add some styling and branding to your admin screens. Specifically you'll learn how to: customize the admin screen footer and style it style admin menus style links and buttons Read More…
  • Web Design
    Complete Websites
    Build a Dynamic Dashboard With ChartJSChartjs retina
    Today we will be creating a dynamic dashboard with live charts, through the power of ChartJS. ChartJS is a powerful, dependency free JavaScript library which builds graphs via the canvas element. Best of all, it's easy for designers to get up and running. We'll be focusing on the pieces of the library that get you up and running with beautiful and functional charts fast. We will build a mobile-friendly dashboard from start to finish.Read More…
  • Web Design
    HTML/CSS
    Stir up Your Own Delicious Sass MixinsMix preview
    Sass is designed to help write CSS faster; mixins are of the features that make it possible. Several heavyweight libraries exist with complex formulas for every situation, but today I’m going to show how to stir up your own mixins that complement existing workflows.Read More…
  • Web Design
    HTML/CSS
    Build a Quick and Elegant Login FormPreview
    Today we're going to code up Orman Clark's Elegant Login Form using CSS3 and HTML5, plus some of Dan Eden's CSS animations to embellish the experience.Read More…