Articles in the category CSS

Modern Tools for Advanced CSS Development

Web development has taken a turn towards more candid and fluid information. More people are willing to release free open source code just to help the community and other developers working on similar projects. But aside from free code samples there are dozens of handy webapps, resources, tools, and programs built to enhance the frontend […]

33 Amazing Frontend Design Patterns using CSS3 and jQuery

Website layouts are typically seen as a combination of design and development meshed together. UI design can be performed using graphics software, code, or in most cases both. This subject offers an interesting combination of skills that work hand-in-hand with each other. Frontend inspiration can offer a lot of great ideas for anyone who builds […]

28 Free Open Source CSS3 Code Snippets

Web developers are constantly building awesome stuff and releasing the code online for free. Open source code allows other developers to recreate page elements without spending hours of time writing code again from scratch. This can range from website navigation to image sliders and even CSS dropdown menus. As a developer myself I have learned […]

38 Free Open Source CSS Dropdown Navigation Menus

Constructing a website from scratch has become easier and less stressful over these past few years. I find myself ripping out fewer and fewer hairs as more open source projects become available. One of the most common UI elements would be a dropdown menu for multi-tier navigation. In the past I’ve written about coding a […]

40 CSS Apps, Tools, and Resources for Web Developers

The task of coding a new website is often repetitive and time-consuming. It takes effort and hard work to build an HTML/CSS layout fitted properly in all browsers. Alternatively the design process is much more fluid to allow for new ideas and thought patterns. If you feel the web development cycle takes a bit too […]

20 Free Open Source CSS3 User Interface Kits

The power of CSS3 design offers unique trends for building custom website interfaces. And with the help of the open source movement, it is now easier than ever to make your own customized layout design. CSS3 user interface kits have become more common and you can find these published within various websites and blog. For […]

Case Study into CSS3 Effects on Popular Websites

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

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. Live Demo - Download Source Code

33 Fresh jQuery And CSS3 Tutorials

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

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

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.

25 More Books For Designers, Developers And Web Workers

A while ago we shared 25 great web-design and development books and since this earlier post got a great response (and we've read a lot more books since), we've now gathered another 25. In this list you'll find books about design, theory, development, css, html and a lot more. I hope you enjoy the post!

Applying a Clean & Imageless Design to an Article – Part I

For Christmas this year, my beautiful wife gave me a copy of The Web Designer's Idea Book, Volume 2. Obviously, I have been perusing the book, and I am finding that there are tons of awesome web designs to take in. I'm super happy with the gift and I expect that it will prove to be a highly valuable resource throughout 2011, and beyond. Yet, even just a quick perusal of the book reveals the prevailing influence of Photoshop (or other graphics programs) on the industry at large. Today, the web is full of beautiful, rich and colourful graphics that continuously amaze and impress us in all manner of very legitimate ways. But just because we can include all of this incredible imagery, it doesn't necessarily follow that we have to. Sometimes, the simple use of colour, shape and typography can create an attractive and elegant design all on its own.

Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

In this tutorial, we'll be revisiting the Brillante blog design, covering the PSD slicing, HTML/CSS coding, custom fonts embedding and some handy cool tips to improve your website performance. This is Part 2 of 3 of the Photoshop blog design called Brilliante, published some time ago on SpyreStudios and designed by Mahmoud Khaled Deiab. In this second part, I'm gonna walk you through the PSD to HTML/CSS coding process. Third part will be about creating a WordPress theme. Let's begin!

How To Create a Sweet CSS3 Vertical Navigation

Today we'll be creating a beautiful vertical CSS3 navigation, without the use of images. Basically we'll display a circle with an icon in the center. When the user hovers over the circle, it expands and shows a short description. Now you may be wondering: how are we going to display an icon without images? Well, Drew Wilson's (fabulous) Pictos font makes this quite simple. Unfortunately (but understandably) it's not free, you can purchase is for $49 here. Luckily, there are other icon fonts out there like iconic, which you can use for free. I should also mention that this has been tested using Webkit browsers only (Safari, Chrome). It may work in other browsers but probably with limited support. Check out the demo here!

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user. The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery. The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.

How To Create a Stylish Content Slider using CSS3 & jQuery

With the amount of content available online these days, we sometimes have to resort to using different techniques in order to show/hide/group some content or information on a web page. Content sliders are very popular because they work and usually don’t hinder usability and in many cases can even improve the user experience. Today we’ll […]

10 Great Tips for Writing Better And More Comprehensive CSS

There are many different coding styles, some do not like indentation, some like to capitalize certain things, others like to add more than one element on a line, the main train of thought is they are all after one common thing: organization and better code. Without influencing my coding style, we’ll discuss ten tips for […]