CSS3, made easy.

12th August 2012 • 2 Comments

Okay, so I’m guilty of not updating my blog for about a year, but it’s okay, I’ve got a helpful update for you today!

Last year I showed you all how to start using CSS3 today. A year later more browsers are supporting more CSS3 properties and with IE 10 on the horizon we will likely have all the browsers supporting a lot of key CSS3 properties such as transitions and animations.

That’s all positive, but the problem is different browser versions require the prefix, newer versions don’t. This is quite annoying to keep up with and write code for. There are a stack of CSS3 generators out there, the problem is when I’m writing code I know what properties I need and want to quickly stack them together and copy them into my stylesheet. A year and a half ago I built createcss3.com which was a CSS3 generator. Back then it was simple, it just supported a basic top to bottom gradient, border radius and outer box shadow for Firefox and Webkit.

I have had a few people in my ear telling me to update it recently so I gathered all the knowledge I have learned over the past 18 months and put that into what I believe is now the best CSS3 generator out there at the moment.

Let’s take a look at why it’s so good!

CreateCSS3.com

(more…)

Read More

CSS3 Today! Introduction to CSS3.

28th June 2011 • 2 Comments

Even though the CSS3 spec is not 100% complete, all the major browsers are now supporting it making it ready to use today! Due to the spec not being finish thought you generally have to use the browser prefix so it can get a little long winded… None the less, you can achieve so much more than with javascript alone.

(more…)

Read More

How to make a div stretch to 100% of the window height & fixing the background color or image not covering the entire window

14th November 2009 • No Comments

I know, it’s massively long title, but I thought I’d fix too issues with 1 post as they both have the identical solution. The main one is when creating some sites recently they were fairly short designs and¬†bizarrely¬†the CSS background color didn’t fill the window. This was puzzling, but I did find a solution. The other issue is when you’re trying to make a div to stretch to fill a window, it doesn’t like to do it, the solution for this is the same as the other issue.

(more…)

Read More

Multiple CSS classes on the same element

8th September 2009 • 3 Comments

This one is pretty obvious to most CSS developers but it’s not actually used that widely on a lot of websites. It is really easy to apply multiple CSS classes to an element allowing you to mix and match various classes on elements. One instance I find it handy is when I have elements that require the same CSS as another element but simple things like the background color is different. Adding a second class to the element means I don’t need to re-write the class with an alternate color, I can just create an additional class to set the background color.

(more…)

Read More

IE transparency/opacity issues.

21st December 2008 • 1 Comment

Recently I came across some issues with Internet Explorers transparency. When I applied transparency to a div on one of my sites with the IE CSS it didn’t apply any transparency. There was no problems with the code, it was all correct, IE just didn’t want to apply the transparency.

(more…)

Read More

Small height divs in Internet Explorer

31st October 2008 • 1 Comment

If you want to make a div of a height smaller then around 10px, often in Internet Explorer will not make the div any smaller than around 12px. This is a real pain if you want to use div’s to create lines and various other things. Thankfully I’m here to tell you how to get around this problem.

(more…)

Read More

Cross browser table cell spacing with both fixed & percentage width cells

27th October 2008 • No Comments

Today I had a hard time trying to create a table which had some cells of a fixed width, then the others stretching to fill the rest of the page. The problem was I just could not get it to work properly in every browser. If I got it to work one way in one browser, another wouldn’t and vise versa. After messing around for a bit I found the solution, it’s kind of a forceful way to get all the browsers to do what we want, but sometimes the browsers force us to do it!

(more…)

Read More