Quickly Build a Swish Teaser Page With CSS3

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.

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.

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.

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.

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:

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.