Social Network Icon Pack

80+ social network icons which consists of 40+ 16 pixel x 16 pixel icons and 40+ 32 pixel by 32 pixel icons all in 32-bit PNG format by komodomedia.
Read the rest →

Free Icons flavour & twitter icons

Awsome free icons at smashingmagazine available for download, 2 different set of high quality icons in PNG format with different sizes and downlaodable along with PSD & AI (adobe illustrator format) source for free, allow you to make any modifications to the icons to fit your needs.
Read the rest →

Cufon text replacement with canvas and VML

For web designers among you who have been using sIFR, facelift or other image replacement techniques, and has facing problems in particular browser then you may need to try Cufon, a fast text replacement with canvas and VML.

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set and have been met:

1. No plug-ins required – it can only use features natively supported by the client
2. Compatibility – it has to work on every major browser on the market
3. Ease of use – no or near-zero configuration needed for standard use cases
4. Speed – it has to be fast, even for sufficiently large amounts of text

Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. Cufon has been tested in Internet Explorer 6, 7 and 8, Mozilla Firefox 1.5+, Safari 3+, Opera 9.5+ & Google Chrome.

Cufón has been designed with developers in mind. Therefore the API is simple and configuration is usually not needed at all, as most of the needed information is provided by CSS style sheets.

The Implementation is pretty easy:

1. Download Cufon (recommended the YUI-compressed version)
2. Generate your personalized font
3. Replacing the text:

   <script src="cufon-yui.js" type="text/javascript"></script>
   <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
   <script type="text/javascript">
   	Cufon.replace('h1'); // replace as necessary
   </script>
   

4. Avoid delay display in IE by adding this line just before body closing tag:

   <script type="text/javascript"> Cufon.now(); </script>

And you are done. Try some demos before you try it yourself

Gallery a free wordpress theme for portfolio showcase

Smashingmagazine has released a new free wordpress theme designed by Christopher Wallace named “gallery”, based on the result of smashing community wordpress theme polling.

Read the rest →

Javascript fluid design, new approach to fluid design

Got this from ajaxian, a cool approach of implementing fluid design using javascript, a small javascript library by Yusuf Akyol. Check out the demo page and resize the browser to see the layout and font size changes. This done by a small CSS and:

HTML

<script type="text/javascript"><!--
  fluidLayoutinit(yourFontSize, yourScreenSize);
   // yourFontSize is a hundred percent value at yourScreenSize
   // yourScreenSize is a pixel value for yourFontSize
// --></script>

Javascript

var fluidLayout = {
myFontSize: 100,
getBrowserWidth: function() {
if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
} else if (document.body) {
return document.body.clientWidth;
}
return 0;
},
dynamicLayout: function () {
var defaultFontSize = fluidLayout.myFontSize * 100;
var browserWidth = fluidLayout.getBrowserWidth();
document.body.style.fontSize = (defaultFontSize * browserWidth / 100000) + "%";
},
addEvent: function (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
} else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
},
init: function(fontSize) {
this.myFontSize = fontSize;
this.addEvent(window, 'load', this.dynamicLayout);
this.addEvent(window, 'resize', this.dynamicLayout);
}
}