Awesome landing page design using CSS3

Up until recently it has been necessary to use images to create cool page shadow and page curl effects. Not anymore. design-a-webpage.com demonstrates how a super cool page curl shadow can be created using efficient and clean CSS3.

Being able to use CSS3 is a huge advantage over images because there is a massive difference in data size. Instead of transferring images (some of which would need to be quite large) you can now simply write a CSS3 gradient declaration to do the same job.

Go to my Good money crash course landing page, on design-a-webpage.com. Note the cool page effect that makes the dark blue content float above the rest of the page, appearing to curl up at each end.

The designers at design-a-webpage.com have been quite sneaky in that they have not only introduced curved gradient shadows above and below the content strip, they have also given the main content a shadow gradient to provide it with a more realistic "depth".

It's easy to confirm this by comparing the tone of the bottom left corner of the content to the top right. Notice that it is far lighter on the left hand side than the right. This gives the page the appearance that there is an external light source shining unevenly onto a three dimensional surface.

I won't show the code for the content gradient here, but take a gander at the CSS3 declaration for the page curl shadows above and below the main content:

They've got multiple platform support so it works on most, if not all, browsers. That's what makes the declaration so long. However, each individual snippet makes use of the radial gradient background attribute that comes with CSS3. In addition, they also utilize transparency so that the underlying color of the gradient sections is not overwhelmed.

Of course, it's not necessary you learn how to use any of this since all of this ships automatically with the Shadows theme that comes with design-a-webpage.com.

All that was required for me to create this page was to add a bit of content and select my colors using point and click color palettes. All in all it took about a minute. No coding. No CSS. No HTML. No PHP. No software downloads. Just point and click and publish.

Try it out for yourself and post a link to the Shadow pages you create. Remember you aren't limited to the product layout as used in this page, there are a whole range available to design-a-webpage members.