Topic Archives

UI Components

Explore and download our free collections of UI components and code snippets and streamline your web development process.

View all CSS content

8 CSS Grid & Flexbox Snippets for Creating Magazine Layouts

8 CSS Grid & Flexbox Snippets for Creating Magazine Layouts

We share a collection of exciting CSS snippets for creating magazine web page layouts using both CSS flexbox and grid.

8 CSS & JavaScript Snippets for Lighting & Shading Effects

8 CSS & JavaScript Snippets for Lighting & Shading Effects

A collection of lighting and shading effect CSS & JavaScript snippets for recreating the incredible effects we see in modern video games.

8 CSS & JavaScript Snippets for Creating Mega Menus

8 CSS & JavaScript Snippets for Creating Mega Menus

A collection of CSS & JavaScript snippets for building mega menus. Everything from simple, text-based navigation to richly-styled UIs.

10 CSS & JavaScript Snippets for Interactive Skeuomorphic UIs

10 CSS & JavaScript Snippets for Interactive Skeuomorphic UIs

What is really impressive about skeuomorphic design is that when paired with CSS & JS, you achieve a new level of interactivity.

10 CSS & JavaScript Snippets for Creating Responsive Navigations

10 CSS & JavaScript Snippets for Creating Responsive Navigations

These responsive CSS navigation examples are free to edit and use on your own projects. We have a menu type for all types of websites.

10 CSS & JavaScript Snippets for Text Distortion Effects

10 CSS & JavaScript Snippets for Text Distortion Effects

We have a collection of CSS & JavaScript text distortion effect snippets that you can freely use to create stunning headlines and taglines.

8 CSS Snippets for Creating Toggle Switches

8 CSS Snippets for Creating Toggle Switches

We highlight some inspiring examples of how web designers are bringing excitement to toggle switches with CSS, while still maintaining their functionality.

How to Target Design Elements with the CSS :not Pseudo-Class

How to Target Design Elements with the CSS :not Pseudo-Class

:not allows you to target elements that do not match a list of provided selectors. The result is more control over niche design features.

10+ High-Quality Free CSS Button Libraries & Frameworks

10+ High-Quality Free CSS Button Libraries & Frameworks

Explore top CSS button libraries for web design. Find easy-to-use styles & animations to enhance your projects. Perfect for developers & designers.

8 CSS & JavaScript Snippets for Reflection & Refraction Effects

8 CSS & JavaScript Snippets for Reflection & Refraction Effects

The simple act of light reflecting off of or refracting through a surface can produce stunning visuals. We see it every day in the physical world. It might be the…

10 CSS Code Snippets for Responsive Text Techniques

10 CSS Code Snippets for Responsive Text Techniques

We take a look at a number of different approaches you can take to implement responsive text into your web design layouts.

8 CSS Grid Snippets for Creating Common Website Layouts

8 CSS Grid Snippets for Creating Common Website Layouts