14 Awesome HTML and CSS Code Snippets

Lots of talented developers enjoy testing their ideas while pushing the current boundaries of CSS. Feel free to check out any of these awesome HTML and CSS code snippets and even copy them into your own projects.

Also be sure to check if there are any libraries included with each snippet, or if any CSS code has been compiled using SASS or LESS.

CSS Only Floated Labels

A CSS only approach to the floated labels UI pattern.

Demo and code

Password Input Field

Password strength validation with visibility toggle.

Demo and code

Fixed Angled Header

This pen shows how CSS pseudo-elements and transforms can be used to create a fixed, angled header with an image background.

Demo and code

Infinite Autoplay Carousel

Useful for startup landing pages where you need to display brand partners and other cool logos or whatever.

Demo and code

Input UI Animation

Input UI animation with HTML, CSS and JavaScript.

Demo and code

Simple Slide-Out Footer

HTML and CSS simple slide-out footer.

Demo and code

Tags Input

Input tags field, separate your tags with a comma.

Demo and code

HTML And CSS Fixed Footer

A quick example of a fixed footer.

Demo and code

Nice Input Box

Nice input box with a lot of styling based on sibling selectors and psuedo classes. CSS only.

Demo and code

Hover To Reveal Part Of Background Image

This is really simple demo. All what you need is div with background-attachment: fixed and change of left+top on mousemove.

Demo and code

Blog Card

Blog card with HTML and CSS.

Demo and code

Blog Cards

A very minimal responsive blog card design.

Demo and code

Responsive Company Cards

Card design and switch view.

Demo and code

Animated Map Marker

 

This map marker drops in like the iOS pin icon and continues to animate an outward ripple effect.

Demo and code

Web
Analytics Made Easy - StatCounter
scroll to top