Download the .EPS FILE or the .AI FILE

The post Free Adobe CS6 Vector Icons for Download appeared first on Interactive Blend.

Highcharts:

Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

jqPlot:

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features.

flot:

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

MooChart:

moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

FusionCharts:

FusionCharts v3 helps you create animated & interactive charts for web & enterprise applications. It is the industry’s leading enterprise-grade charting component that functions seamlessly on PCs, Macs, iPads, iPhones and a majority of other mobile devices.

The post 5 Interactive JavaScript charts for your website appeared first on Interactive Blend.

Gathering Inspiration:

Digital Scrapbook:

Design and Build:

Testing and Feedback:

Browser Extensions:

Debugging Tools:

Bookmarklets:

The post The Top Browser-Based Tools appeared first on Interactive Blend.

The post Recent Inspiration on Dribbble appeared first on Interactive Blend.

Border Radius

The CSS3 border-radius property allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

ie7-js

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

CSS3 Generator

CSS3 Generator helps you understand the new CSS3 features in Webkit with an interactive tool that will build up and show how each new property affects an element.

CSS 3.0 Maker

CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.

CSS3 Pie

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

CSS3, Please!

The Cross-Browser CSS3 Rule Generator: You can edit the underlined values in this css file, but don’t worry about making sure the corresponding values match, that’s all done automagically for you.

The CSS Detective Guide

Tricks for Solving Tough CSS Mysteries! You may be a novice or well on your way to developing your skills in HTML and CSS, but if you’ve had the experience of thinking your CSS was perfect-up until the moment you test your pages in different browsers-then this book is for you.

cssSandpaper

The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE (which doesn’t support it in IE natively) but in other browsers which implement their own vendor-specific variants of these properties.

HTML5 & CSS3 Support

Rather than remember which browsers support which properties, visit this site.

HTML5 ? Boilerplate

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Modernizr

Modernizr adds classes to the html element, which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any JavaScript to use it.

selectivizr

Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Conclusion

Hopefully these tools give you the inspiration to get on the bandwagon to start using CSS3. These properties are being heavily supported in modern browsers, even in ie9, so start using them today!

The post Cross-Browser Compatibility with CSS3 appeared first on Interactive Blend.

Forrst – inspired by micro-blogging services like Tumblr and Twitter – is a place for designers and developers to share inspiring code, screenshots, and links with their peers. In order to keep the quality of the community as high as possible, Forrst employs an invite-only model for new users.

Kyle Bragger is the founder of Forrst and has been developing for about 13 years. Kylewritescode.com is where he blogs and Forrst.com is where he shares dev/design stuff.

“My goal for Forrst is to keep nurturing community growth, and creating a place in which any developer or designer passionate about their craft feels at home.” – Kyle

How do I win an invite?

1. Leave a comment below posting a link to your favorite piece of work you’ve produced.
2. In your comment, tell me why this is your favorite piece of work or how you can contribute to the community.

So its competition time!

If I think you’re work and passion qualify to belong to the Forrst community, I will choose up to three portfolios from the comments below and you will receive an email invite from Forrst. I will announce winners on this blog and on Twitter some time on Friday (12/17).

If you’re already a member, follow me on Forrst!

The post Forrst Invite Giveaway appeared first on Interactive Blend.

In the last couple of years, there has been some growth in using other typefaces on the web. CSS allows developers to use a property called @font-face to define a new typeface and these fonts are 100% SEO friendly. Some fonts can be purchased for embedding, however those license fees are usually out of reach for small companies or individuals – Greg Tarnoff. The issues surrounding @font-face are that downloading and sharing fonts via this attribute is breaking copyright laws.

With that in mind, the four methods that I am going to discuss are SIFR, FLIR, Cufon and Typeface.js.

siFR (Scalable Inman Flash Replacement) – JavaScript AND Flash

http://www.mikeindustries.com/sifr

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash.

Pros:

• Accessible, selectable and most important cross browser compatible.
• Does not violate EULA or copyrights, since font is contained within the SWF object.
• You can easily add shadows and other text effects in Flash

Cons:

• Slower page loading – has to request for Flash, JavaScript and CSS files
• Requires both JavaScript and Flash to be enabled
• Flash plugin must be installed in the browser
• Cannot display on an iPhone. Yet…

siFR elsewhere:

Convertor:

FLIR (Facelift Image Replacement) – JavaScript and PHP

http://facelift.mawhorter.net

An image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via JavaScript and PHP and visible to all modern browsers.

Pros:

• Does not violate EULA or copyrights, since font is rendered as an image
• Prints in the font rendered since it is an image

Cons:

• Requires PHP with the GD enabled
• Text cannot be selected

FLIR elsewhere:

Download:

Cufon – JavaScript

Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation and no Flash or images required.

Pros:

• Do not need to load the Flash plugin which makes it fast, even for sufficiently large amounts of text
• work on every major browser
• close to zero configuration needed

Cons:

• Not many fonts are permitted to be rendered with this method
• the JavaScript files used for the font can be easily reverse engineered and “stolen” which violates EULA and copyright laws
• Inability to highlight and copy/paste text

Cufon elsewhere:

Convertor:

Typeface.js – JavaScript

http://typeface.neocracy.org

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Pros:

• User doesn’t have to have Flash plugin installed on their browser
• Easier to create with just a few lines of JavaScript

Cons:

• Recommended to use only for headlines because too much text will slow down page load
• Cannot be read by screen readers
• Not all browser compliant and still has a lot of development left to be done

Typeface elsewhere:

Convertor:

Conclusion

Which method is better? All of them perform wonderfully for large header text but all are very different from one another. It is up to you as the developer to determine what is important to you… does it load fast, is it selectable, does it work in every browser?

Who would you rather use?

The post How to Use Any Font on the Web appeared first on Interactive Blend.

What are QR Codes?

QR Codes allow everyday items to become a website (print-to-mobile-to-web messaging) where everything can become a hyperlink, or “physical world hyperlinking”. The “QR” stands for “Quick Response”. These smart codes are similar to the price barcodes found on the packaging of supermarket items, however, QR Codes hold much more information (including website addresses, text and phone numbers). A price barcode can hold only about 20 digits (one direction only) but QR Codes can hold up to 7,000 digits (both vertical and horizontal directions).

“The genius behind QR Codes is that even a hairless chimp can play with them.” – Dana Oshiro, Mashable

How do QR Codes work?

Have you ever had a lot to say and not enough room to say it? You may not be unhappy for too much longer because these QR images can encode up to 7,000 alphanumeric characters.

QR images consolidate data down into a graphic which can be viewed at any size readable by a digital camera. When a QR reader is installed on a mobile phone, the consumer simply points their camera phone at your barcode, and the phone links them directly to your web page in seconds.

How are QR Codes used?

So far, QR Codes are being slapped up on just about everything in Asia. Here are just a few examples of where you can find them:

• Business cards
• Posters
• Food products
• Art and tattoos
• Fashion: Lendorff Kaywa produced only 500 high-end limited edition Space Invaders QR Code scarves. Meanwhile, QRCode Commando Nerd p8tch offers a slightly more affordable “p8tch” to sew to bags and clothing.

Anyone with a smartphone can scan and read QR Codes with the click of a camera, and anyone with access to a computer can generate QR Codes themselves. Kaywa’s QR-Code offers a QR barcode generator a link to download their reader.

By scanning the codes, you can access images, websites, place phone calls, play a video and send text messages. By creating the codes, you can produce your own messages. It is pretty exciting if you think of the marketing possibilities of actually living it this type of “web” world.

Locations:

QR Codes are massive in Japan, appearing in magazines, billboards, business cards, shop windows, T-shirts, and more. McDonalds in Japan are also using this on the side of burgers which directs you to a web page displaying the nutritional information.

So far in the US, Google will be taking another stab at QR Codes by calling its program Favorite Places. They will be providing restaurants and other retailers with stickers for their windows (reviews, Zagat ratings, positive newspaper and magazine features). The UK and Australia are also starting to use QR Codes more in advertising.

Pros of using QR Codes:

With QR barcodes, in one click you’ll be directed to your mobile website. This saves time and avoids the frustrations of typing complicated URLs into a web-browser or dialing a 1-800 number.

Go Green: The codes are also meant to increase efficiency and reduce waste. For example, paperless air travel, electronic tickets for a concert or registering for an event. This type of registration will likely become more popular as camera and scanner technology improves.

These codes are great for advertisers, publishers and brands because they are connecting the physical world to the interactive world and driving traffic to their mobile internet site. This is an effective way to add interactivity to any print media and the possibilities are endless!

Cons of using QR Codes:

Despite being created back in 1994 QR Codes are rarely seen in America, because our phones don’t come equipped with the QR Code readers.  This is the reason for very slow marketing and advertising progress. I do believe that QR Codes will start to pick up soon because smart phones with cameras are becoming more and more common (Android or iPhone). Recently, Blackberry messenger 5.0 was released and this included a barcode reader. Once these readers are pre-installed on cell phones and a major brand brings more attention to the technology (Google), QR barcodes will be the new media wave.

As a graphic and web designer, I’m thinking… “does the 2-D QR Code lack visual dynamism? Could graphic elements be inserted into the code to make it more memorable?”
It’s true that you don’t need a built in barcode reader, but you do need to download a free barcode reader app. Here are two highly recommended iPhone QR Code apps:

QuickMark – $1.99
– Seems to be the fastest reader out there.
– Is the first of the “just wave it around” QR Code readers.

Barcode
– Pinch and scale how big the barcode is before decoding. Handy since iPhone’s camera can’t focus.

You can also create your own free QR Code for any website or short blurb of text using code generators like this one from Kaywa.

Contact Us

The post QR Codes: the Future of Marketing appeared first on Interactive Blend.

Marketcircle has offered to giveaway two copies of Billings time tracking and invoicing app for the Mac. Billings was a 2009 Apple Design Award winner and includes lots of great features, especially for freelancers.

Special Discount for Interactive Blend Readers:

Marketcircle has also offered to give a 15% discount off of Billings to all for Interactive Blend readers. If you aren’t one of the lucky winners, you can download a free 21-day trial of Billings and purchase it for 15% off in the next 21 days using the promo code: “blend”.

Contest Rules:

• All you have to do is leave a comment and tell us why you’d like to win a copy!
• 2 winners will be randomly chosen from the comments.
• You must leave an email address in order to win.
• Comments will remain open until Friday, October 30th
• The winners will be announced Monday, November 2nd

If you haven’t checked out Billings before, visit the website to see everything that it has to offer and good luck to everyone!

UPDATE: Congrats to our winners!!

• Sneh Roy – @LBOI
• Tomo Kawai – @tkawaidesign

The post Win A Free Copy of Billings 3 for Mac: Comment to Win appeared first on Interactive Blend.

Here are some pros of putting a social toolbar on your website:

(1) Easy customization of look and feel to match your website’s design.  (2) Offers translation of your website into another language.  (3) Share pages on well-known social networks such as Facebook and Twitter.  (4) Chat with your friends on Facebook or AOL straight from the toolbar.  (5) Notify your readers about events, contests and promotions right from the toolbar.  (6) Offers a fast way of searching your website.

Here are some cons of putting a social toolbar on your website:

(1) Taking up real-estate at the bottom of each page and covering content.  (2) When you register, it can take days to finally get the code for the toolbar.  (3) Many users simply don’t like the look of the toolbar.

If you know of any other Social Toolbars, leave a comment with a link and I’ll be sure to add it to the list. Thanks!

Wibiya

Wibiya enables blogs to integrate the most exciting services, applications and widgets of their choice into their blog through customized web-based toolbars.  Our platform offers a one-stop solution for integrating, managing and tracking third-party applications.

Currently we offer a fixed set of tools such as creating a blog community via facebook connect, enabling twitter alerts on your blog and enabling post navigation but there is a lot to wait for as we will be adding more and more application through time.

Meebo

Meebo, the web platform for IM on any network or site. Meebo connects you to MSN, Yahoo, AOL/AIM, MySpace, Facebook, Google Talk, and many more!

Google Friend Connect

Google Friend Connect instantly awakens and strengthens the community that visits your site by enriching it with social features.

Ow.ly Social Bar 2.0

In the age of sharing, linking, retweeting, capped attention spans and character limits, people need things to be shorter, better, faster, stronger. The Ow.ly social bar is your answer.  What does this mean for you, the content creator? The social media marketing wizard? The link sharing, social bookmarking and retweeting addict? Actually, we’ve packed this toolbar with so many useful features that we’d like to think it means quite a lot.

The post Raising the (Social Tool) Bar appeared first on Interactive Blend.