Quick Tip: 4 Really Useful, Re-Useable Code Snippets from Codepen

CSS3, the latest CSS standard, has advanced the technology considerably, providing front-end developers with a variety of innovative techniques to spruce up their web designs. Developers can do more than ever before with the latest standard, and many are racing forward to create some of the most awe-inspiring interactive elements you've ever seen.

But the beauty of CSS and web design, in general, is you don't have to be a trendsetter to get in on the action. All you really need is a nice snippet of code you can customize or alter to fit your brand's theme.

To help, we've put together a list of code snippets that push the boundaries of modern design. If you're looking for some cool, interactive ways to spruce up your site, then you've come to the right place!

1. Perspective Transform Loading Bar

An increasing number of site designs are making use of purely CSS loading bars that employ neat special effects.

If you really want to capture the attention of your visitors, you can set up a status loader that uses the CSS tag for perspective transform. In layman's terms, this tag allows the related element to be displayed at a slight angle to the viewer's perspective.

See the Pen TRON Spinner by SitePoint (@SitePoint) on CodePen.

You wouldn't think so, but when used to create a circular loading bar, the perspective transform property gives the indicator a unique and engaging aesthetic that pays homage to Tron. This code snippet was created by well-known UI designer and CSS tinkerer Simurai, so you know it's rock-solid CSS.

2. Animated Parallax Background

Animated backgrounds that are continually in motion coupled with parallax design techniques are better suited to working with more complex JavaScript animations. You'll still need to rely on JavaScript for more advanced stuff, but you'll be happy to learn it is now possible to create simple animated backgrounds with motion in CSS3.

This code snippet by Saransh Sinha allows you to deploy an animated, starry sky background for your page or site. It's image-free, using CSS box-shadow and gradient effects to display the objects and a CSS3 animation to get them moving, as opposed to images.

See the Pen Parallax Star background in CSS by SitePoint (@SitePoint) on CodePen.

This is possible thanks to open-source frameworks like Compass, SASS, and HAML. You can even take it a step further and generate custom sprites to be used in your animated background.

Side Note: Skilled CSS coders may recognize the speed of the star field is defined wrong on a technical level causing the smaller stars to move slower than the big stars in parallax. As the small stars are further away, they should be moving more slowly.

This can be easily fixed by changing the "animation" value under the "#stars2" object. More specifically, you can change the number in this snippet: "animStar 100s linear infinite". The lower the number, the faster the background stars will be. We recommend setting it a value between 10 to 30s. If you wanted, you could also fix this by doing the opposite and speeding up the "#stars" object instead.

3. Fullscreen Carousel

In the past, JavaScript has always been used to create elements like an animated carousel for featured content. CSS3 has changed all that because developers can now force one item to be selected at a time even when working with radio buttons. Before CSS3, relying on pure CSS to do this kind of thing and simultaneously work with click events would have been too much.

See the Pen Without JavaScript Carousel by SitePoint (@SitePoint) on CodePen.

Ultimately, web developers can now implement animated elements like a carousel - complete with unique effects - entirely through CSS tags. JavaScript is no longer necessary for such a thing, and the end result is more attractive and responsive than ever! And if you're aiming to drive leads through your interactive content, this type of unique interactivity will get people excited.

4. Animated Photo Stack

This Expanding Photo Stack snippet by Miro Karilahti calls for some eye-catching animation techniques to display a collection of images. While empty, it doesn't look like it uses any more than standard CSS3 animation properties.

See the Pen Expanding Photo Stack by Miro Karilahti (@miroot) on CodePen.

However, as soon as you populate the photo fields, you'll notice the stack also adds some depth to your page, as each photo moves individually. Even better, the required HTML to go along with the snippet is remarkably simple. It has a single div container with separate anchor links for the photos.

[author_more]

[/author_more]

There are limitations to this code. If you alter the number of images in the stack – not an unreasonable expectation – things go a bit haywire. When adding an extra image or trying to remove one, the other elements don't adjust accordingly.

This seems like an issue that could be remedied by using CSS3 flexbox to force new elements to behave properly.

Continue reading %Quick Tip: 4 Really Useful, Re-Useable Code Snippets from Codepen%

by Sarah Landrum via SitePoint