CSS3 Series, Introduction: Transforms, Infinite Scrolling, Fixed Headers, Borders, and Shadows

Female programmer working at home
During the upcoming weeks, we’ll explain how to use a few CSS3 techniques and tips that can make a big difference in your website.

For web designers, keeping up with industry trends not only helps us grow as professionals, but enables our clients to shine by having beautiful and intuitive websites. Becoming familiar with these new features not only adds that extra touch to websites, but helps move the industry forward creating an ever evolving environment.

In this series, we will dive into several techniques that will give your users a smooth experience when interacting with certain elements on your website. Additionally, CSS3 gives web professionals the flexibility (while being fast to implement) to incorporate various styles and features in a website.

In this series, we’ll cover the following CSS3 techniques:

Slide from Dan Cederholm’s talk about CSS3
at Seattle’s A List Apart event, April 2010.
(Photo by Petra Gregorová, CC BY-ND 2.0) 
Transitions and opacity
Transitions allow for more graceful and elegant transitions between elements over a specified period of time. Adding opacity to hover actions can add that added interaction for your user.

Infinite scrolling
Infinite scrolling, essentially a pagination alternative, is a never-ending content approach used to enhance a user’s experience on sites that produce massive amounts of content, such as Twitter, Tumblr, or Pinterest.

Fixed headers
Fixed headers, which are easy to implement with CSS3, help draw attention to branding and make it easier to navigate to different pages without scrolling back up to the top of  websites because they stay in place as users scroll down.

Implementing rounded corners as a design element on websites used to be a challenging and time-consuming affair. Now, with a few lines of CSS3 it becomes light-years easier. We will dive into different things you can do with these techniques and offer examples to illustrate these features.

Shadows and gradients
Everything from text shadows to gradients, these snippets can add depth and make certain sections of a website stand out tremendously.

For further reading, here are some of our favorite CSS3 resources:
  • CSS3 Preview: All you need to know about CSS3 functions and features
  • A List Apart: A handy CSS3 primer for web designers
Subscribe to our marketing blog for free resources
TBH Creative

About the author | TBH Creative

TBH Creative is an Indianapolis-based web design and marketing company. Our services include web strategy & planning, website design and development, inbound marketing, SEO, branding, graphic design, and marketing reporting.

Since 2004, TBH Creative has worked with hundreds of companies in a wide range of industries, including healthcare, finance, and service. We specialize in developing complex, enterprise-level websites that convert.

We believe in clear communication, high standards of excellence, and beating deadlines. But beyond those ideals, what really drives the heart of our business is your business. We take pride in helping our clients achieve more with digital marketing and web design than they ever thought possible.

View more posts by TBH Creative

Previous Four useful strategies for handling online reviews Next CSS3 Series, Part 1: Transitions

Receive articles in your inbox