Topic Archives

CSS Snippets

From animation to responsive design, find the perfect CSS code snippet for your web design project and streamline your development process.

View all CSS content

10 Examples of Generating Randomness with Code

10 Examples of Generating Randomness with Code

Since the very first programming languages, coders have used them to generate things at random. While common examples such as numbers and letters immediately come to mind, there is so…

On the Downlow(res): A Showcase of CSS Pixel Art

On the Downlow(res): A Showcase of CSS Pixel Art

With display technology currently in a sort of golden age, you may be curious as to why so many of us are still hung up on pixel art. Why, with…

Keeping Time: A Collection of Clock and Timer Code Snippets

Keeping Time: A Collection of Clock and Timer Code Snippets

The act of displaying time is quite popular on the web. But it’s not at all limited to what we typically wear on our wrist or hang on the wall….

Fun Examples of CSS Imitating Print Design

Fun Examples of CSS Imitating Print Design

There’s still some value in having a document or other printed product that you can hold in your hand. And as much as the web has promised a “paperless” world,…

Bringing the Curtain Effect to Your Website with These Snippets

Bringing the Curtain Effect to Your Website with These Snippets

The curtain effect will not make your design pop or amaze users, but certainly can engage visitors, smarten the design, and enrich the user experience.

Shining Examples of the Flashlight Effect Web Design Trend

Shining Examples of the Flashlight Effect Web Design Trend

2019 has already seen numerous tiny trends where the mouse cursor played first fiddle: mouse trails, repelling effects, interactive 3D globes and fantastic hover effects – to name a few….

Using Shaders to Create Realistic Special Effects in Web Design

Using Shaders to Create Realistic Special Effects in Web Design

WebGL has become the subject of experimentation and testing the limits of what is possible on the web. Almost each day we stumble upon grandiose solutions powered by it. As…

How to Create a Vertical Slide-Out Menu with CSS Transitions

How to Create a Vertical Slide-Out Menu with CSS Transitions

In this tutorial, we’re going to create a vertical slide-out menu using CSS3 transitions. The menus will be place on the left-side of the screen with the main links hiding…

10 Handy CSS Grid Code Snippets

10 Handy CSS Grid Code Snippets

CSS

The CSS grid spec isn’t exactly “new” but it’s definitely newer in the mainstream dev world. Many frontend coders don’t even know about the CSS grid properties yet, let alone…

How to Build a Stylish CSS3 Search Box

How to Build a Stylish CSS3 Search Box

CSS

A search box is probably one of the most common UI elements around, and I think there is no need to explain its purpose anymore. Whether it’s about a website…

25 CSS Snippets for Some of the Most Common and Frustrating Tasks

25 CSS Snippets for Some of the Most Common and Frustrating Tasks

CSS

In this post we have 25 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Why reinvent the wheel…

The Cross Browser CSS Styling Tips You Need to Know

The Cross Browser CSS Styling Tips You Need to Know

CSS