Custom Login Form Styling
In Tutorials by Kitty Giraudel
In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness.
Archive
Here you can browse through all articles, tutorials, roundups, and experiments on Codrops.
The Unwritten Rules of a Great Design Critique
In Articles by Patrick Cox
Design critiques are not only the way to an improved design, they are also a great educational opportunity for all parties involved. If held properly by following some basic guidelines they can bring along a great collaboration experience and positively influence the progress of a project.
Real-Time Geolocation Service with Node.js
In Tutorials by Dmitri Voronianski
A tutorial about how to create a simple real-time application that shows the locations of visitors on an interactive map using Node.js and the HTML5 Geolocation API.
Busting that Creative Slump You’re In
In Articles by Patrick Cox
Being creative is a state of mind and finding that creative state of mind can be difficult. Here are some ideas and tips on how to get out of a creative slump and what to do in order to stay in a creative mind set.
Windy: A Plugin for Swift Content Navigation
In Playground by Manoela Ilic
This jQuery plugin can be used to swiftly navigate content items. The effect will make the items fly away like a deck of cards caught in a tiny storm.
Custom Drop-Down List Styling
In Tutorials by Kitty Giraudel
A tutorial on how to create some custom drop-down lists. We’ll show you five examples with different looking drop-down menus and lists for various purposes.
Freebie: Application Icon Set (PNG, PSD, CSH)
In Freebies by Matt Gentile
The Application Icon Set by Matt Gentile consists of 120 pixel-perfect icons in three different sizes (16px, 32px and 64px) and it comes in three formats (PSD, PNG and CSH). The icons are vector shapes so you can scale them to any size.
Vertical Showcase Slider with jQuery and CSS Transitions
In Tutorials by Manoela Ilic
A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We’ll be using jQuery, CSS Transitions and media queries to make the layout adaptive.
Stop, Look, Click: Attention-Grabbing Elements in Web Design
In Articles by Carrie Cousins
There have been many studies on attention with very significant results coming from the area of cognitive neuroscience and psychology. It is an interesting challenge to translate those results into the domain of web design and use it as a tool for creating a meaningful impact.
Make a Statement with Type
In Articles by Carrie Cousins
Font choices can have an impact on how your message is communicated and how people feel about the words on the page.
3D Restaurant Menu Concept
In Tutorials by Manoela Ilic
A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items.
Dashboard Design Elements for the Win
In Articles by Patrick Cox
Proper admin panel or dashboard design is an often neglected part in a web app. Designing and building dashboards is not an easy task and it’s good to know what the key elements for a successful and great dashboard are.
Fullscreen Video Slideshow with BigVideo.js
In Tutorials by John Polacek
A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video.
Build a Color Scheme: The Fundamentals
In Articles by Patrick Cox
Let’s dig into the very fundamentals of building a color scheme for your web design: what colors fit to which context, how do combinations work and what color scheme concepts are there?
Button Switches with Checkboxes and CSS3 Fanciness
In Tutorials by Kitty Giraudel
In this tutorial we will create some realistic-looking switch buttons using pseudo-elements and checkboxes.
Creative Web Typography Styles
In Tutorials by Manoela Ilic
Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js.
Do I Really Need A Style Guide?
In Articles by Patrick Cox
What is a style guide and when should you use one? We’ll summarize the main properties of a style guide, what it should contain and how you can determine if you should invest the time in creating one for your brand/website.
Perfectly Paired: Using Symmetry in Web Design
In Articles by Carrie Cousins
Create a sense of balance and harmony by using symmetry elements design scheme.