All you have to do is design a t-shirt or tank with the words We Are Love. The best designs will be chosen, then the world will vote on which t-shirts they like the most. The most popular designs will be printed as part of the 2012 summer collection.

Each winning designer will get their name printed on the back of their t-shirt, as well as a free copy of their t-shirt and coupon code for discounts on the We Are Love store for you and you friends.

Submit your design today at we-are-love.com/​design and help us make a difference.

With CSS3 there is a lot to learn, and instead of me trying to cover it all in one article I will be posting some tutorials and demo’s over the coming months on how to do various things. But I do want to cover a few basics before we go into those tutorials.

First things first, if you’re still using images for round edges, stop! All modern browsers support round edges via CSS3 and the code is really easy… (Older versions of browsers including IE will roll back to square edges, but those users deserve to miss out for not upgrading their browser haha).

border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
-ms-border-radius: 15px;

Okay… It seems like a fair bit of code… But once the full spec is complete you’ll only need the first line. For now this will cover the leading browsers (Safari, Chrome, Firefox, Opera and IE9+).

Secondly, fonts. Too many times I see site using cufon, sifr or other attempts at using non-standard fonts. ALL the major browsers support the font-face tag as standard and there are many website that will generate the fonts and code for you. My preference is http://www.font2web.com/ but http://www.fontsquirrel.com/fontface/generator is also good… They will provide the CSS code which you put in your stylesheet, then you can select call the font-family in just like you would a standard font. It’s really easy to do.

Lastly, gradients… Relatively easy to do as well is CSS 3 gradients. These can be a bit trickier but there are some good tools to help you generate background gradients so you can stop using images. Try http://www.createcss3.com/ for basic linear gradients or http://www.colorzilla.com/gradient-editor/ for more advanced gradients with colour stops etc.

In future demos I’ll cover more but these are the 3 key ones you should be using today. In future tutorials I’ll cover transforms, transitions, animations, shadows and much much more! Stay Tuned.

I’ve been using it for a few weeks now and it has been so much more stable than 1.4.x – I pretty much bypassed that whole release as it was full of bugs and was a step backwards for jQuery in my opinion. 1.5.x has proven to redeem itself and proven to be faster and more stable then the previous 1.4.x release. Fingers crossed it stays that way and I don’t run into any major compatibility issues. 1.4.x was particularly unstable IE7.

You can get more details or download jQuery from jquery.com

So why then is some guy, that posts rarely on his blog telling you that Facebook is killing itself? Facebook’s problem is it doesn’t quite know what it is anymore and why it exists. They’re adding new features yes, but so did MySpace, and they’re features nobody except the nerdy among us care about.

“Jason, why are you saying this blasphemy?” you ask… Well i’m not against Facebook, I love Facebook, kinda… It stays on everyday and it still wastes my time like any good social site. It’s also not because I started brosbook.com because let’s face it, BrosBook is just a bit of fun and doesn’t have the worldwide appeal of Facebook. My reasoning to this is, I read today Facebook is announcing an email service. “Soooo?” Yeah okay doesn’t seem like something that would trigger this article but hear me out.

Before Facebook killed it, MySpace was adding features that already existed elsewhere, it added apps, like Facebook, it added status’s, like Facebook. “Get to the point!” Well we have email services, hundreds, possibly thousands. Why do we need Facebook email? The answer is we don’t. You know what else we don’t need, groups. We also don’t need places (aka, if you want to kill me, you know where I am). Thus being the point, Facebook has stopped innovating and started following. Like MySpace users will stick to Facebook for a while, but there is going to be another site somewhere down the track (next few years) that will kill Facebook. Why? Because Facebook is not cool anymore.

I can’t tell the future, I don’t believe current trends like Tumblr and Twitter have what it takes to kill Facebook, they’re in a different league. But soon enough a new innovator will come along and we’ll all hear about the new site and reluctantly join before discovering it’s cooler than Facebook.

PS. The iPad is a mobile device, much like the automobile is a mobile vehicle. If it moves without wires it’s mobile. So please Mark, give us an iPad app. Thank you.

It all started with Steve Jobs writing a letter announcing why Flash will never be supported on the iPhone or iPad. It has been the talk of the industry and now more hands are rising in favour of ditching Flash and living with HTML 5. Following is Opera (the browser) and Microsoft both stating that they back HTML 5 in favour of Flash. (Microsoft clearly doesn’t realise it’s Silverlight is likely to die as well)

With Javascript being able to do most of Flash’s tricks natively it’s main purpose has been used for video and audio. Now HTML 5 can do both of these making Flash virtually pointless.

YouTube, Vimeo and Scribd are just a few of the sites that used to rely heavily on Flash that are taking advantage of HTML 5 features to rid themselves of Flash for a better user experience. I myself have been working of ridding Flash out of my sites, namely NexTunes.com.au‘s audio player will run using the audio tag in browsers which support it coming the next release of the site and it will also say goodbye to any Flash based ads.

Adobe are obviously concerned about this recent onslaught from competitors and will be interesting to see whether or not they try new techniques to keep Flash alive.

Get The Functions

Download the functions here: GD Functions V1.0

Using The Functions

There are currently 3 functions included that are quite flexible and they allow you to:

• Resize Images
• Rotate Images
• Crop Images

This is a pretty standard set of functions but they are very easy to use, and they do all the heavy GD lifting for you.

In order to use the functions you must first include the GD Functions into your page.

resizeImage(file, width, height, [newFile, [forceResize, [quality]]]);

Can resize an image in PHP.

File: The address to the file you wish to resize. eg. “../storage/my-image.jpg”

Width: The max width (or new width) for the image to be resized to. eg. 125

Height: The max height (or new height) for the image to be resized to. eg. 125

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

ForceResize: (optional, default:false) If set to true will force the image to resize (in ratio) to the new height. eg. true

Quality: (optional, default:90) The quality of the image being exported. Integer between 0-100, 100 being the best quality. eg. 80

rotateImage(file, Angle, [newFile]);

Can rotate an image to any angle in PHP.

File: The address to the file you wish to rotate. eg. “../storage/my-image.jpg”

Angle: The angle you would like to rotate the image to. Integer between 0-360. eg. 90

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

cropImage(file, X1, Y1, X2, Y2, [width, [height, [newFile]]]);

Can crop a portion of an image, then resize that portion to a specified width/height in PHP.

File: The address to the file you wish to crop. eg. “../storage/my-image.jpg”

X1: The X co-ordinate for the top left corner of the position you wish to cut. Integer. eg. 10

Y1: The Y co-ordinate for the top left corner of the position you wish to cut. Integer. eg. 10

X2: The X co-ordinate for the bottom right corner of the position you wish to cut. Integer. eg. 100

Y2: The Y co-ordinate for the bottom right corner of the position you wish to cut. Integer. eg. 100

Width: (optional, default:cropWidth) The width you’d like the cropped image to be. If not set it will default to the width of the area being cropped. Integer. eg. 50

Height: (optional, default:cropHeight) The height you’d like the cropped image to be. If not set it will default to the height of the area being cropped. Integer. eg. 50

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

Notes

• Requires the PHP GD extension installed to work (comes with most hosting set-ups)
• Supports JPEG, PNG & GIF files.

The beta currently supports the following browsers:

• Google Chrome
• Safari (4+)
• Internet Explorer with Chrome Frame installed

If you’re using one of these browsers, jump on to the YouTube HTML 5 beta page to opt-in and start trying out the Flash-free video player.

http://www.youtube.com/html5

Instead of re-writing all the new features and speed improvements jump on the official release site for more details:

http://jquery14.com/day-01/jquery-14

Be sure to read the backwards incompatibilities at the bottom just to make sure nothing will break when you upgrade.

I’ll post a review once I’ve had a chance to put it through it’s paces properly.

If there are articles that you really like you can tell the world by clicking the “like” button much like Facebook, or you can share the article on Twitter or Facebook, with the click of a button. Many new features are planned and should be rolled out in the coming months. If you have any ideas on how to improve Web Resauce then please feel free to let me know by commenting this post.

But definitely check out Web Resauce and let me know your thoughts.

The Problems

a) Your background won’t fill the screen even though you’ve set the color in the body via CSS as per below:

Background doesn't fill the screen

b) Can’t get a div or other element to stretch 100% of the browser window.

The Solution

It’s quite simple, in your CSS put height: 100%; in both the html and body as follows:

html {
  height: 100%;
}

body {
  height: 100%;
  ........
}

Why does it occur?

The reasons these problems occur is because most browsers don’t automatically render the page/body to 100% of the browser windows height.  This in turn means that when the background is rendered on the body or the height is set to 100% it will only fill 100% of whatever the body is. This is why setting the html and body’s height to 100% will fix the issue.