Today we are releasing a set of seamless paper textures, in six different color flavors, for you to download and use immediately in your next website design project.

The zip archive has everything you need from individual jpg images to a Photoshop Pattern set containing all six patterns. Play with the demo and switch between the 6 different textures.

View Demo

What you get in the download

• one (1) jpg image – Purple
• one (1) jpg image – Red
• one (1) jpg image – Orange
• one (1) jpg image – Blue
• one (1) jpg image – Brown
• one (1) jpg image – Green
• 1 Photoshop Pattern set containing all six colors

You can use these openly and freely as well as redistribute as long as there is a credit and link back to this post. Please do not directly link to the download file.

Download File

Track time with little effort.

Fanurio allows you to track your time both manually and/or with a timer. Simply start the timer when you begin working on any project, pause the timer for those much needed coffee breaks and stop the timer when you have completed your task. And the software is intuitive enough to alert you when your machine has been idle and the timer is currently running.

Make sure you get paid for all of your work.

From the moment you land a new contract, Fanurio provides powerful tools at your fingertips to help you manage and bill all of your work. And you have the freedom to bill hourly or by project. The application also allows you to round time, apply discounts and include fees for work you have sub-contracted.

Your projects can be invoiced at any time and the numbering system is updated automatically. Fanurio empowers you to view which invoices are paid or past due as well as each project’s remaining balance.

Do you often work with foreign clients? No problem. Fanurio can handle multiple currencies from within the application!

Multi-User capabilities

Fanurio can import time recorded on multiple computers, making it useful for small teams and people using more than one computer. If you are part of a team, each member can install Fanurio on their own machine to track time. Members can export their time and send it to the team leader to prepare invoices for their clients.

Built to be safe and reliable.

Fanurio uses a SQL database to prevent any accidental loss of data. For greater security, you can backup your data manually or automatically when the application closes.

Analyze your performance

There are multiple reports that Fanurio can generate to help you analyze your performance over any given time period. Here are just a few questions you can quickly get answered by using this application:

• How much time have I logged so far for Client “X”?
• How much time have I logged so far for Project “Y”?
• How much money have I made this week?
• Who was my best client this year?
• How much have I invoiced this year?

Runs on multiple platforms.

Fanurio is built using Java technology, which enables it to run on Mac OS X, Windows, Linux and other “flavors of Unix”. You don’t have to worry if you have multiple computers with different operating systems. Your time and investment in Fanurio is protected and portable between all of them.

For a full list of features, please visit the features page on the Fanurio website.

How to win.

Enter to win your own free license for Fanurio by leaving a comment on this post with the following:

• Your name
• Your e-mail address (must be valid and only the winner’s email address will be shared with Fanurio to fulfill the promotion)
• How do you think this application will benefit you as a freelancer?

You may only enter once. This promotion will run until March 1, 2010 at 12:00am Eastern Standard Time. The winner will be randomly chosen, using random.org, and notified within 48 hours of the closing of the promotion.

Good luck! If you would like to play with the application, you should download the 30 day free trial version.

Congratulations!

Congratulations to Vassilis Mastorostergios for being the grand prize winner of this promotion. We would also like to thank the people at Fanurio for their help and support as well as all of the people who participated. Participants in this promotions can view details of the drawing by visiting the drawing details on random.org. You must enter the valid email address you provided for the promotion.

Well, one of the many reasons why I exclusively went from using TextMate by MacroMates to Coda by panic was the ability to create a Code Clips library to increase my work flow. This not only sped up my level of productivity but, as I often have the proclivity of doing, made sure I didn’t type any incorrect syntax on items I use for nearly every site.

So, if you are new to Coda, have the software installed and haven’t started your own library of code snippets, I want to share 4 of my most commonly used CSS snippets. (Note: These are a combination of my own home grown code snippets and tricks I’ve learned along the way from other developers. I am not advocating that these examples are the only way to achieve the end results.)

Installing code clips in Coda

To install any of the snippets, copy the code from this page. Launch Coda and choose Windows » Clips. This will bring up the Clips window with the default clips that were installed with the application. For organization, I would recommend creating categories (I have categories for HTML, CSS, and WordPress). Once your categories are set, select the one you want to add a clip to and click the plus sign. Give it a title and past the code. Simple.

How to use code clips in Coda

Using the code clips are even easier than installing them. Simply open the Clips window, choose and clip and click Insert. The clip will be inserted in the active document window at the current location of the cursor.

1. CSS Clearfix

If you hand code your own CSS, you know that clearing floats is a beast unto itself. Some developers, including myself in the past, will place an empty div class named “clear” after the floated elements. In their stylesheet, this class will have property of clear: both. What I didn’t like about this solution was that you would end up with all of these empty divs throughout your page. And then, someone introduced me to the CSS Clearfix solution and I was sold.

The Snippet

.clear {
	display: inline-block;
}
 
.clear:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

The Usage

This bit of code is quite ingenious and works flawlessly in IE 6 (which is a gift by itself). To implement, append this class to any div that contains floating elements and you are in business.

<div id="whatever" class="clear">
	<!-- Insert floated elements -->
</div>

2. The Wrapper

Some of us call this class a “wrapper” others call it a “container”, but we all use it to control the width of the content on our pages. I know that I personally use the exact same width size of 960px for the content on every site I design (this does not include background decorative elements). This snippet insures me that my body content will center and fit nicely on all monitors.

The Snippet

.wrapper {
	margin: 0 auto;
	position: relative;
	width: 960px;
}

The Usage

As the name indicates, this element will “wrap” around all of the elements on the page, constraining them to 960px and centering it for you. (Note: You can alternately have another snippet that does not center by removing the margin property.) And, since this is a class and not an id, I can use this several times throughout a page which comes in handy when I split up content with different backgrounds.

<div class="wrapper">
	<!-- site content goes here -->
</div>
 
<div class="wrapper">
	<!-- more content -->
</div>

3. Site Logo Image Replacement

I will state up front that not everyone uses image replacement for website logos. It is a method I learned many moons ago and I haven’t found a good reason to drop it yet (which doesn’t mean that I won’t). What you basically are doing is giving an h1 tag a class of “logo” and replacing the text with your logo image. You also want your logo image to be an anchor, usually to your home page, so you need to have a style for this class’ anchor tag for this as well.

The Snippet

h1.logo {
	background: url(pathtoimage/nameofimage) no-repeat 0 0;
	display: block;
	height: ; /* your logo image height */
	text-indent: -9999px;
	width: ; /* your logo image width */
}
 
h1.logo a {
	display: block;
	height: 100%;
	width: 100%;
}

The Usage

This one is quite simple. You mark up your h1 tag like you would normally and give it a class name of “logo”. If you look under the hood of every site I’ve coded, you will see the following code:

<h1 class="logo"><a href="#" title="">Text</a></h1>

4. Floating Left & Right

A CSS property you will find yourself using more often than not is the float property. Instead of assigning these properties to every necessary selector in my stylesheet, I will sometimes create a class of “right” and “left” that I can use at will in the mark up that will reference the necessary property.

The Snippet

.left {
	float: left;
}
 
.right {
	float: right;
}

The Usage

Now I am free to add the necessary class to any div element, including an element that already has a class, without having to write a specific float property for that element. I cannot tell you how much time this saves me when developing a site.

<div id="whatever" class="left">
	<!-- whatever you are floating left -->
</div>
 
<div id="something" class="right">
	<!-- whatever you are floating right -->
</div>
 
<div class="someclass left">
	<!-- add multiple classes to the same div -->
</div>

Conclusion & Other Resources

I know that none of these snippets are reinventing the wheel by any stretch of the imagination. Whether you are new to hand coding or a Jedi master, I hope you are inspired by this post to start your own library of code snippets in Coda. This bit of work now will streamline your work flow and eventually save you hours of headache.

For a more advanced list of clips, check out Coda Clips and CSS Tricks. You can even download the clips right into the application without copying and pasting.

Remember, Illustrator is not a native layout application and complex layouts should be created using Adobe InDesign or Quark. But, for simple projects, I find Illustrator to be a quick and dirty solution.

The individual templates included in this package are:

• One (1) 11” x 8.5” Tri-Fold Brochure Template
• One (1) 8.5” x 11” Letterhead Template
• One (1) 3.5” x 2” Horizontal Business Card Template
• One (1) 2” x 3.5” Vertical Business Card Template
• One (1) 9.5” x 4.125” Envelope Template

Each template contains all of the necessary bleed, trim and safe guides for professional printing and is compatible with Adobe CS, Adobe CS2, Adobe CS3 and Adobe CS4.

Download Files

How to Install the Templates

Once you have downloaded and unzipped the package, locate the folder named “pixel8 AI Print Templates”. Place this folder inside your Templates folder (which will be located in the Cool Extras folder inside the Adobe Illustrator application folder).

Now, launch Adobe Illustrator. From the top menu, choose File » New From Template and select the template file you would like to work. You will notice that your file has been named “Untitled-1”. This is because Illustrator will open an instance of the template and not the template itself. You can now begin working.

That’s it! I hope you find these files to helpful and they should save you hours of work flow time. Let me know by leaving a comment.

Included in the zip archive, you get the fully editable shapes to load in Photoshop and the original Adobe Illustrator vector file these shapes were created from. And, because these are vector based, you can resize them to whatever proportional dimensions you like without losing any detail.

Download Now

Buttons

Icons & Logos

Icons & buttons included in the set:

• E-mail icon & button
• Search icon & button
• Twitter icon & button
• Facebook logo & button
• Digg logo & button
• RSS icon & button
• Generic User icon & button
• iPod icon & button
• Tag icon & button
• Document icon & button
• Shopping Cart icon & button
• Home icon & button
• Digitial Camera icon & button
• Security icon & button
• WordPress logo & button