The Problem with Web Fonts
by Patrick Cox in Articles
The problem with web fonts is that nobody wants to use the ‘safe’ fonts and you need as much live text on your site as possible. So what’s a design
+ moreArchive
Here you can browse through all articles, tutorials, roundups and experiments on Codrops.
Fullscreen Gallery with Thumbnail Flip
In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when
+ more
25 Examples of Interesting and Creative Structures in Web Design
by Gisele Muller in Articles
Of course we all love the basics when it comes to web design, we like columns, grids, organized and well disposed content... but that doesn't mean we don't like crea
+ more
Let’s call it Modern Web Design
by Patrick Cox in Articles
I am proposing a new buzzword to replace all other web design buzzwords. Forget ‘Graceful Degradation’, lose ‘Progressive Enhancement’, drop
+ more
3D Wall Gallery
by Mary Lou in Playground
Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when
+ more
Showcase of Depth and Perspective in Web Design
An interesting way to spice up a web design is to add some depth to it. Instead of making a design flat, certain elements and techniques can stimulate the depth [&he
+ more
Thumbnails Preview Slider with jQuery
In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make […]
+ more
25 Examples of Circular Elements in Web Design
by Gisele Muller in Articles
When designing a website we have a lot of elements to worry about: menus, navigations buttons, forms, header, footer and many other important details that make our d
+ more
Fingers are Bigger than Mice – Design Concepts for Mobile Websites
by Patrick Cox in Articles
With smartphone subscriptions projected to climb above 50% of the market by the end of 2011, designing for mobile browsers and touch devices is now reaching critical
+ more
Sweet Thumbnails Preview Gallery
In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider […
+ more
Shadow Usage in Web Design
by Gisele Muller in Articles
When designing a website you can use several effects to drive attention to an element, emphasize something or simply to give your page an unique and personal touch.
+ more
Visual Movement: Flow in Web Design
by Patrick Cox in Articles
In fine art, visual movement is used to guide the viewer through the piece. Lines, shapes, color, depth and hierarchy can all be used to guide the viewer from one [&
+ more
B&W Box Gallery
by Mary Lou in Playground
In today’s experiment, we created a little gallery that plays with the black and white versions of images. The idea is to have an initial grid-like view of the
+ more
Creative Examples of Portfolio Item Display
by Stelian Subotin in Articles
Portfolios are a great opportunity to show your potential clients and customers what you have created and what you are capable of. It can also be a playground for id
+ more
Share, Don’t Steal (why we copy)
by Patrick Cox in Articles
I’m totally guilty on this one Your Honor. I have copied sites before, but I have learned my lesson and I will never do it again. I promise. Why do […]
+ more
Animated Form Switching with jQuery
In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another […
+ more
25 Fresh Examples of Beautiful UI Elements
by Gisele Muller in Articles
UI elements - user interface elements - are a really important part of the design process. They are what we can call the face of interaction between your site and it
+ more
Parallax Slider with jQuery
Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide
+ more