CodeMyUI

Round Expand On Hover Breadcrumbs

With this breadcrumb navigation, you will get a collapsed breadcrumb element and on hover, it expands to show you the lable for each item. It was designed by Renaud Tertrais. (more…)

crossout and write with red pen

In this particular text animation, we see how to style the del ins element so it looks like the del HTML tag is crossed out from the document using a red pen and the correction is written cross it. Designed by Mark Ostrander.

(more…)

Styling the h1 to h6 Heading Tags

If you want to add some visual style to you heading tags you might enjoy this snippet in pure css where each heading from h1 to h6 has a progressively lighter background and smaller font size.

(more…)

Tick Animation in CSS Input Checkbox

A simple CSS only tick mark animation for checkbox input field designed by Rab Rennie.

(more…)

Are you looking to add some visual flair to the tables on your website? Take a look at this pure CSS table design by Andrew Creech.

(more…)

Pure CSS Hamburger Menu Slide In

With this hamburger menu when you click on it, the navigation menu sidebar expands into view from the top left.

(more…)

CSS Only Hover Show/Hide Navigation Menu

Need a simple navigation menu on the left-hand side that is collapsed by default and is expanded when you hover over it? Look no further this CSS only navigation menu will help you easily achieve it.

(more…)

Wavey Ribbon Navigation Menu

Look at this smooth experimental navigation menu using SVG by Steve Gardner, it has 3 layers what looks like a wavey ribbon and the navigation menu appears in there. This can work well on a website that is looking to implement an out of the box design.

  (more…)

Toggle Switch With Lables

This toggle switch will look great on websites where you want to show a toggle option with lables on them. It was designed by Jarek Ostrowski.

(more…)

Spilled Paint Animation on Click

With this snippet, we can see paint dripping from the top of the screen on mouse click. It was designed by Darryl Huffman and will look great in the hero section of any website.

(more…)

Blurry Loading Quote Animation Effect

With this snippet by Dudley Storey the words of the quote randomly appear on the screen with a blurry effect. This snippet makes use of web-animations.js library.

(more…)

Deal With It Meme With CSS

This snippet shows you how to drop a sunglass on to a face to recreate the deal with it meme using a few images and CSS. Robin Rendle recreated the snippet from the footer of CSS-Tricks.

(more…)

Simple File Upload UI

Here is a simple material ui inspired file upload interface designed by Rico Sta. Cruz. It will look great on any page that is looking to add a simple file upload feature to the webpage.

  (more…)

Focus Search Mode with CSS

Here is a fun CSS only search field by Campbell Ding. When you click on the search field it expands to take up more width and sims the background essentially pacing the focus on search.

(more…)