Archives

Here you can browse through all articles from the main categories of Codrops.

July 2013

Freebie: Famous Landmarks Icon Set (AI, EPS, PSD)

Google Nexus Website Menu

On Scroll Effect Layout

Troubleshooting CSS

On Scroll Header Effects

Justified and Vertically Centered Header Elements

Animated Books with CSS 3D Transforms

Using Custom Data Attributes and Pseudo-Elements

Interactive Particles Slideshow

Loading Effects for Grid Items with CSS Animations

Responsive Icon Grid

View Mode Switch

June 2013

The Web Designer’s Idea Book Vol. 3 Giveaway

Expanding Search Bar Deconstructed

Nifty Modal Window Effects

Dynamic Grid with Transitions

Type & Grids Responsive HTML5 Template Giveaway

Caption Hover Effects

Creative Button Styles

Freebie: Stationery Icon Set (EPS, AI, PSD)

Web Audio Stylophone

The Shock Bundle Giveaway

On-Scroll Animated Header

Responsive Multi-Column Form

May 2013

Simple Icon Hover Effects

BookBlock Revised

Tooltip Menu

Examples of Pseudo-Elements Animations and Transitions

Natural Language Form with Custom Input Elements

Product Grid Layout

Horizontal Slide Out Menu

Morphing Devices

Responsive Retina-Ready Menu

A Collection of Page Transitions

Vertical Timeline

Fixed Background Scrolling Layout

Automatic Figure Numbering with CSS Counters

January 2013

Planning Your Web Design with Sketches

Flipping Circle Slideshow

NotifySnack Giveaway

Creative Layouts and Interactions in Web Design

Defending Presentational Class Names

UI Design Guidelines for Responsive Design

Putting CSS Clip to Work: Expanding Overlay Effect

Understanding the CSS Clip Property

3D Image Gallery Room

Designing For The Empty States

Juicebox HTML5 Image Gallery Giveaway

3D Book Showcase

Techniques for Creating Motion in Web Design

December 2012

How to Create a Simple Multi-Item Slider

Tips for a Clean and Minimal Online Store Design

Slider Pagination Concept

A Creative Year: Distinctive Web Designs of 2012

CSS Click Events

RockableThemes Premium WordPress Themes Giveaway

Sticky Captions Concept

Fullscreen Pageflip Layout

Holiday Giveaway: Win 1 of 6 Accounts with MaxCDN

Grabbing Attention and Building a Moving Experience with Shape

Suppo iOS App Support Page Giveaway

Responsive & Touch-Friendly Audio Player

Cloudinary Giveaway: Image Management in the Cloud

StackSlider: A Fun 3D Image Slider

November 2012

Simple Effects for Drop-Down Lists

Calendario: A Flexible Calendar Plugin

MyThemeShop Membership Subscription Giveaway

Using Transparency in Web Design: Dos and Don’ts

Awwwards Submission Giveaway

Three Script Updates

Adaptive Thumbnail Pile Effect with Automatic Grouping

Learning Principles for Improving Your CSS

Responsive CSS Timeline with 3D Effect

Creative CSS Loading Animations

Baraja: A Plugin for Spreading Items in a Card-Like Fashion

Mobile Design Typography is Vitally Important … and Challenging

Responsive WordPress Theme Giveaway

Gamma Gallery: A Responsive Image Gallery Experiment

Heading Set Styling with CSS

October 2012

Becoming Device-Agnostic

Elastislide Revised

Kick-Start Your Project: A Collection of Handy CSS Snippets

Slit Slider Revised

Basic Ready-to-Use CSS Styles

Slicebox Revised

ManageWP Giveaway

Creating Off-Center Balance: Using Asymmetry in Web Design

SnackWebsites Giveaway

PFold: Paper-Like Unfolding Effect

Custom Login Form Styling

The Unwritten Rules of a Great Design Critique

FooBox WordPress Plugin Giveaway

Real-Time Geolocation Service with Node.js

Busting that Creative Slump You’re In

Windy: A Plugin for Swift Content Navigation

Custom Drop-Down List Styling

Freebie: Application Icon Set (PNG, PSD, CSH)

Vertical Showcase Slider with jQuery and CSS Transitions

September 2012

Stop, Look, Click: Attention-Grabbing Elements in Web Design

Make a Statement with Type

3D Restaurant Menu Concept

Dashboard Design Elements for the Win

Fullscreen Video Slideshow with BigVideo.js

Build a Color Scheme: The Fundamentals

Button Switches with Checkboxes and CSS3 Fanciness

Compare Ninja Premium Subscription Giveaway

Creative Web Typography Styles

PSD2HTML Professional Coding Services Giveaway

Do I Really Need A Style Guide?

Perfectly Paired: Using Symmetry in Web Design

BookBlock: A Content Flip Plugin

August 2012

Multiple Area Charts with D3.js

IM Creator Lifetime Subscriptions Giveaway

Happy Birthday! 3 Years of Codrops

We Are Architects

Unfolding 3D Thumbnails Concept

Creative Background Styles and Trends in Web Design

Triple Panel Image Slider

Inject Energy Into Your Mobile Design with Light Effects

Circle Hover Effects with CSS Transitions

MyThemeShop Responsive WordPress Themes Giveaway

The Designer’s Web Handbook Giveaway

Freebie: Soft UI Kit (PSD)

Animated Responsive Image Grid

Photo Booth Strips with Lightbox

July 2012

Examples of Creative and Modern Effects in Web Design

Modern Block Quote Styles

I Love Script Fonts (Here’s Why)

Designing the Dreaded Form: Getting Creative

3D Flipping Circle with CSS3 and jQuery

Old School Cassette Player with HTML5 Audio

Tips & Tools for Grid-based Layouts

ThemeFuse Premium WordPress Themes Giveaway

Freebie: Baby Blue UI Kit (PSD)

Designing the Dreaded Form

Swatch Book with CSS3 and jQuery

June 2012

Responsive 3D Panel Layout

Timed Notifications with CSS Animations

TheAdStock Giveaway + Free 4th of July Themed Images

ThemeFurnace Premium WordPress Themes Giveaway

Line That Up: Proper Alignment in Web Design

3D Thumbnail Hover Effects

How Web Design Has Changed Print

CSS-Only Responsive Layout with Smooth Transitions

Tokokoo E-Commerce WordPress Themes Giveaway

Visual Hierarchy in Mobile Design

7 Elements of a Well Converting Subscription Page

Book Review: “The Designer’s Web Handbook”

Image Accordion with CSS3

Fullscreen Slit Slider with jQuery and CSS3

May 2012

Understanding the Rule of Thirds in Web Design

Creating an Animated 3D Bouncing Ball with CSS3

Elegant Themes Giveaway

Animated 3D Bar Chart with CSS3

Making Room to Breathe: Wrapping Text Around Elements

Annotation Overlay Effect with CSS3

How to Create a Fast Hover Slideshow with CSS3

Understanding the Lingo: Typography Glossary

Experimental Page Layout Inspired by Flipboard

Impressionist UI Pack Giveaway

ThriveSolo Giveaway

Enhance Required Form Fields with CSS3

Effective Typography-Driven Web Design

April 2012

Fluid CSS3 Slideshow with Parallax Effect

IM Creator Giveaway

FlareThemes Giveaway

Type Effects in Web Design: It’s All About Moderation

Audio Slideshow with jPlayer

Awwwards: The Best 365 Websites Around the World 2011 Book Giveaway

Rotating Words with CSS Animations

Web Icon Set Giveaway

The Divine Proportion and Web Design

Animated Content Tabs with CSS3

Successful Web Design: It’s All About The Details

TN3Gallery Giveaway

Direction-Aware Hover Effect with CSS3 and jQuery

Slideshow with jmpress.js

Color and Emotion: What Does Each Hue Mean?

Responsive Horizontal Layout

March 2012

MightyDeals Giveaway

Add Impact to Type-driven Projects

Login and Registration Form with HTML5 and CSS3

More Examples of Fresh Effects in Web Design

Responsive Content Navigator with CSS3

PSD2HTML Giveaway

Condensed fonts: The good, the bad, the ugly

Parallax Content Slider with CSS3 and jQuery

WordPressThemeShock Giveaway

Understanding and Using Type Categories in Web Design

February 2012

Principles of Color and the Color Wheel

Accordion with CSS3

Establish a Mood with Typography

Overcoming the “User Designer” Disease

Conceptboard Giveaway

Type Effects and Modification

3D Gallery with CSS3 and jQuery

Keys to Email Creative Success: Marketing and Design

Original WordPress Themes Giveaway by ThemeFuse

How to create animated tooltips with CSS3

January 2012

Page Transitions with CSS3

Modular front-end development with LESS

Be Less Annoying: Reduce Bounce Rates through Better Web Design

Arctext.js – Curving Text with CSS3 and jQuery

How to spice up your menu with CSS3

Codrops Giveaway From MOO.com

Sliding Image Panels with CSS3

5 Things Every Mobile Design Should Have

CSS Buttons with Pseudo-elements

Animated Web Banners With CSS3

Filter Functionality with CSS3

Jumping the Hurdles of Brainstorming

Examples of Fresh Effects in Web Design

Thumbnail Proximity Effect with jQuery and CSS3

Fullscreen Background Image Slideshow with CSS3

December 2011

How Often Do You Try New Things?

With Rocking Letters into the New Year

CSS3 Lightbox

Slopy Elements with CSS3

Experimental CSS3 Animations for Image Transitions

Item Blur Effect with CSS3 and jQuery

Experiments with background-clip: text

25 Examples of Perfect Color Combinations in Web Design

Design It to Build It: What to Consider When Designing for the Web

Splash and Coming Soon Page Effects with CSS3

Lateral On-Scroll Sliding with jQuery

6 Questions You Should Ask Yourself When Choosing Fonts

November 2011

Inspiring Examples of Symbol and Metaphor Use in Web Design

Typography Effects with CSS3 and jQuery

Top 10 Reasons to Use HTML5 Right Now

20 Examples of Centered Website Designs

Hover and Click Trigger for Circular Elements with jQuery

Elastic Image Slideshow with Thumbnail Preview

Fullscreen Image Blur Effect with HTML5

Communication, Mood and Meaning: Lines in Web Design

25 Fresh Examples of Beautiful Typeface Combinations in Web Design

Interactive Typography Effects with HTML5

Animated Buttons with CSS3

25 Inspiring Examples of Texture Use in Minimal Web Design

Original Hover Effects with CSS3

October 2011

Fullscreen Image 3D Effect with CSS3 and jQuery

Be More Creative through Design Constraints

Creative CSS3 Animation Menus

Developing Unity in Web Design

Blur Menu with CSS3 Transitions

Wave Display Effect with jQuery

Architecture in Web Design: Applying Vitruvius’ Principles

Flexible Slide-to-top Accordion

Circle Navigation Effect with CSS3

25 Examples of Emphasis Applied in Web Design

Draggable Image Boxes Grid

Mobile: The Web’s New Minimalist Movement

September 2011

Scrollbar Visibility with jScrollPane

Developing Emphasis in Web Design

Multi-level Photo Map

Is There Room for Negative Space in Web Design?

Responsive Image Gallery with Thumbnail Carousel

Developing Balance in Web Design

Elastislide – A Responsive jQuery Carousel Plugin

Slicebox – A fresh 3D image slider with graceful fallback

J is for jCookies – HTTP Cookie Handling for jQuery

August 2011

HTML Only – The Significance of Proper Markup in Web Design

Automatic Image Montage with jQuery

Why Do Chairs Have Four Legs? The Cornerstones of Usable Websites

Image Zoom Tour with jQuery

Developing Visual Rhythm in Web Design

Circular Content Carousel with jQuery

Portfolio Image Navigation with jQuery

Expanding Fullscreen Grid Portfolio

Minimal and Contrasty Color Schemes in Web Design

February 2011

25 Examples of Interesting and Beautiful Navigation

Re-thinking Browser Compatibility

Designing for Feature-Rich Websites: Best Practices

20 Unique and Creative Image Sliders

Overlay-like Effect with jQuery

The Problem with Web Fonts

Fullscreen Gallery with Thumbnail Flip

25 Examples of Interesting and Creative Structures in Web Design

Let’s call it Modern Web Design

3D Wall Gallery

January 2011

Showcase of Depth and Perspective in Web Design

Thumbnails Preview Slider with jQuery

25 Examples of Circular Elements in Web Design

Fingers are Bigger than Mice – Design Concepts for Mobile Websites

Sweet Thumbnails Preview Gallery

Shadow Usage in Web Design

Visual Movement: Flow in Web Design

B&W Box Gallery

Rocket Invoice Giveaway: Win a free copy

Creative Examples of Portfolio Item Display

Share, Don’t Steal (why we copy)

Animated Form Switching with jQuery

25 Fresh Examples of Beautiful UI Elements

Parallax Slider with jQuery

July 2010

Thumbnails Navigation Gallery with jQuery

Music Portfolio Template with HTML5 and jQuery

Related Posts Slide Out Boxes with jQuery and CSS3

Latest Tweets Tooltip with jQuery

Slide Down Box Menu with jQuery and CSS3

UI Elements: Search Box with Filter and Large Drop Down Menu

Minimalistic Slideshow Gallery with jQuery

Image Highlighting and Preview with jQuery

Interactive Photo Desk with jQuery and CSS3

April 2010

Rocking and Rolling Rounded Menu with jQuery

Awesome Bubble Navigation with jQuery

Pretty Simple Content Slider with jQuery and CSS3

60+ Interior Design and Furniture Websites for Your Inspiration

Elegant Accordion with jQuery and CSS3

Improved Micro Image Gallery: A jQuery Plugin

Micro Image Gallery: A jQuery Plugin

End of Page Slide Out Box with jQuery

Share the Love: Social Bookmark Designs in Blogs

January 2010

Fresh Set of CSS-only Menus

24 Beautiful Hotel Website Designs to Get Inspired

CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation

Self-resizing Navigation Menu with jQuery

Some Useful JavaScript & jQuery Snippets – Part 4

Find Your First Twitter Follower

Some Useful JavaScript & jQuery Snippets – Part 3

Some Useful JavaScript & jQuery Snippets – Part 2

Pause and Play Effect with jQuery

Some Useful JavaScript & jQuery Snippets

Scrolling to the Top and Bottom with jQuery

PrettyNumber – A jQuery Plugin for Formatting Numbers

Clothesline Social Bookmarks – A CSS-only Social Bookmarking Tutorial

December 2009

Easy PHP Site Translation

Creating a Rotating Billboard System with jQuery and CSS

Day and Night: Creating a Scenery Animation with jQuery and CSS

Fixed Fade Out Menu: A CSS and jQuery Tutorial

Beautiful Slide Out Navigation Revised

URL Image Getter/Uploader/Resizer

How I Speeded Up Our WordPress Blog

jBookMark: A jQuery Marking Tool

CSS and jQuery Tutorial: Overlay with Slide Out Box

TweetTheme: Color Theme Inspiration from Twitter Themes

Twitter API and jQuery Showcase: Display your Followers or Friends

November 2009

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

jTextTranslate: A jQuery Translation Plugin

Free Glossy Icons: The jFeedback Icon Set with Source

jFeedback: A Minimal jQuery Notification Plugin

jCapSlide: A jQuery Image Caption Plugin

CSS Tutorial: Image with Toolbar and Navigation Overlay

jPaginate: A Fancy jQuery Pagination Plugin

jMaxInput: jQuery Twitter-Like Textarea

jQuery Image Cropper with Uploader v1.1

September 2009

Google API Showcase: The Live Translator

Styling Forms with CSS: Sophisticated Registration Form

21 Free CAPTCHA Sources

42 Famous Login and Registration Forms

PHP Login System Reloaded v1.1

How To Play Looping Sound In Your iPhone App

Checking Network Reachability on the iPhone

Dynamic jQuery Image Gallery with Uploader

Codrops’ New Style: Lessons learned from applying CSS3

42 jQuery Navigation based Techniques

CSS3 Styled jQuery Dropdown

Switching Styles: jQuery CSS Exchanger

jQuery Fancy Draggable Captcha

42+ jQuery Image Gallery Plugins

jQuery Sliding Menu Plugin

CSS3: Creating Web Site Banners

Dynamically Changing Style with jQuery

PHP Login System Reloaded

9 Valuable and Working iPhone Programming Tutorials

32 free arrow icons for your web page

20 fresh and colorful CSS3 buttons

CSS3 big style fieldset registration form

How to list files in a directory with PHP

Calculate the number of days between two dates

Using MySQL transactions with PHP

August 2009

Solving PHP MySQL UTF-8 issues

CSS button with hover effect

Free Web 2.0 style glossy buttons

JavaScript browser detection

PHP function that returns the exact age

CSS Gmail style labels

Cool CSS-only registration form

Simple CSS chart for dynamic content

Simple CSS: Update box for category or posts

JavaScript: Changing location or stylesheet according to device or browser