Tutorials
Having fun with transparency
May
Web design continues to grow and advance with new features constantly being brought forward through browsers, programming and markup languages. Being creative doesn’t necessarily being the first to use these new features but instead being the first one to experiment. Take a look at the border-radius property, on first glance it just just rounds off corners, but when you begin to delve deeper and experiment you realise that the property can do much more than just round off corners. To be creative you don’t have to magically spark new ideas all the time, sometimes its about working with what you have and ‘thinking outside the box’. In this post I shall be sharing and explaining a number of creative uses of transparency in web design.
This post has an autoplaying video for the example hinted above, be warned, I know some of you can hate autoplaying flash videos (including me) but this one is okay, just some relaxing music while you read.
Create a pixel perfect subscription box using CSS3
May
Today I will show how to create the above subscription box using simple HTML markup and a few advanced CSS3 properties. I believe CSS3 is the future and the sooner you can jump on the CSS3 band wagon the better. All the stylish shadows and gradients used are rendered using CSS properties which can be experimented with to produce some fantastic results.
Design and build a personal mini-site
Mar
Personal mini-sites (or vCard sites) are simple one page websites that have become extremely popular over the last couple of years. They serve as brief personal introductions to the owner, and launch pads to their profiles and content on popular web sites and applications.
Fixing Transparency in IE6
Mar
You’ve created this really great design and everything looks just like the treatment the client approved in all other standards compliant browsers, but then they come back and say “By the way, it has to work in Internet Explorer 6 as well.” Great, here comes hours of debugging and a separate style sheet on top of that. And what are you supposed to do about all those 24bit PNGs with transparency you’ve used?
Creating Isometric Graphics in Illustrator
Mar
A recent trend, particularly with Flash-based websites has been to create an experience based around the isometric representation. Isometric illustrations provide a 3D view where no matter where an element is within the image it remains in scale, unlike the true 3D perspective where objects reduce in size towards the background.
In this article you will learn the two common methods used for creating isometric illustrations and how to create them in Illustrator.
The hidden power of border-radius
Feb
So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.
Understanding CSS – Padding, Positioning and CSS3
Jan
As my first CreativityDen post I’ve decided to show you all, (mainly beginners to CSS), how to use it effectively in you designs. One of the most frustrating things when coding a website can be not having the skills to bring your .PSD file to life, it happens to most of us, (unless your like me and you learnt to code first), but it doesn’t have to be that way anymore.
These methods are trial and error, not every effect works in every design, which is why not every well done site has drop shadow and rounded corners everywhere, so be careful when and where you use them.
How to create a fluid grid with jQuery
Dec
Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. So here it goes…
Create a funky most commented section for your blog!
Dec
After Engadget redesigned their website a few weeks ago, I noticed how their sidebar contained some unique methods of displaying posts. A nice featured posts section, a fancy calendar and an awesome most commented, digg and twitter section. Using the amount of comments to determine the width and having each post a different color to produce a rainbow, I thought was an awesome idea. So I had a go at making the most commented section for CreativityDen. It turned out pretty well, so I decided to share it with you! All credit goes to Code and Theory.
Design a pixel perfect menu – MetaLab style
Dec
I’m a big fan of pixel perfect design. So much so that whenever I visit MetaLab’s website my jaw drops in awe. The attention to detail is unbelievable. So I tried to replicate the style by designing a pixel perfect navigation menu. I was surprised at how easy it was to produce replicate , it’s because of this that I decided to write up my process. If you’re into this type of design then I strongly recommend reading this tutorial. It should definitely get you on the right track.