Archive for the ‘CSS’ category

Screenshot

It doesn’t seem like the many CSS3 standards are so “new” anymore. Web designers have been implementing these properties into most of the new layouts I run into. Rounded corners and text shadows are commonplace for the modern web.

I want to use this article as a small case study into CSS3 effects. I’ll be examining some big-name websites and how they are building unique web interfaces. The techniques are not exclusive to any single entity – and it’s actually simple to put together some code of your own. But it is my hope these examples can spur new ideas in budding developers.

How to Design a Dribbble-Style Homepage Layout

Screenshot

The popular design network Dribbble has grown substantially in just a few short years. Graphics designers and illustrators from all over the world have flocked onto the web seeking invites. But aside from the exclusivity their layout design has become a prominent factor of the entire branding.

I love the simplistic nature of their gallery-style photo boxes. It matches well with a community of designers excited to share their latest pixels with the world. In this tutorial I’ll go over techniques for constructing a similar design in HTML5 and CSS3. You can build a very similar page structure with just bare-bones essential CSS. Yet when we can utilize new browser-supported properties like box shadows the process becomes much more captivating.

Dribbble home page design layout

Live DemoDownload Source Code

33 Fresh jQuery And CSS3 Tutorials

Screenshot

In this post we have compiled some useful jQuery and css3 tutorials. Enjoy!!

If you like these tutorials you might also want to check out our previous posts below.

33 Excellent jQuery Tutorials

19 CSS3 and jQuery Tutorials for Perfect UI Design

Hover and Click Trigger for Circular Elements with jQuery

22 Useful HTML5 CSS3 Form Tutorials

Screenshot

Using HTML5 and CSS3 you can create creative web forms with great specifications. So in this roundup we are featuring 22 CSS3 form tutorials.

Slick login form with HTML5 & CSS3

Design a Full HTML5/CSS3 Template Replica of Digg v3

Screenshot

Social media junkies on the turn of the year 2004 surely remember Digg. It was the powerhouse of social news, all the techies would flock to Digg on a daily basis. And it’s been through quite a few changes recently with the v4 redesign. However I fondly remember Digg’s classic appeal running under v3 as the most accepted web interface.

Thus I’ve taken the liberty to re-code the entire front page template into HTML5/CSS3! And in this short tutorial I’ll be introducing you to some of my techniques. Additionally I’ve offered the source code completely free to download for your own usage. Much of the design I’ve had to piece together through the Wayback Machine Internet archives.

Digg v3 Template hand-coded into HTML5/CSS3

Scroll back to the top