Posts Tagged ‘Print & Web Design’

Posted on June 29, 2009 - by ruby

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.
(more…)

Posted on May 20, 2009 - by ruby

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.
(more…)

Posted on May 8, 2009 - by ruby

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

Posted on May 4, 2009 - by ruby

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.

(more…)

Posted on April 15, 2009 - by ruby

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);
}
}

Posted on April 15, 2009 - by ruby

How to Spot Quality within Web Design: Examples & Tips

Have seen a lot of terms of “high quality design” but there are no standard valuations of design quality, yes in the end it is depend on personal taste but wefunction has published a great tutorial in detail about tips to create a high quality web design along with real examples.

A lot of checklist includes: spacing, pixel perfect details, Typography, Organization of elements, and so on. just check it out

Posted on April 15, 2009 - by ruby

Evidens free wordpress theme

Designdisease has released new free wordpress theme called evidens. 3 columns, fluid width layout, great typos, comes with optional flickr photostream, twitter integration, and logo changer options either using image or blog name setting.

Available in 2 variation styles dark design (download, preview demo) and white design (download, preview demo) Download files also packed with PSD logo and required plugins.

Licensed under licensed Creative Commons Attribution-Share Alike 3.0 license, means use it for free, modify it as needed but keep the credits intact at the bottom

Posted on April 5, 2009 - by ruby

Create Sliding Image Caption with jQuery

Sam Dunn published an article about how to create a neat sliding box image caption using jQuery at buildinternet.com. The idea is very simple as you may have seen in many portfolio websites out there, giving a cool caption to an image by adding a cover (block HTML element) with sliding animation ($.animate()) to show short description about the image.

Detail step by step tutorial available here and you could see it in action here

Posted on March 11, 2009 - by webmaster

Free Wordpress Theme ImpreZZ

New elegant free wordpress theme released by productivedreams. 3 coloumns and wordpress 2.7.1 compatible. download available here.

Posted on March 4, 2009 - by webmaster

Redesign Chazzuka.com

During my unwell conditions i need to do something to cheers myself, and i decided to work a bit on my website, actually this is just a minor changes, i made this draft design long time ago, and today I just ported it to CSS xHTML, extends some ASP functions, write some jquery functionality and import some plugins.
(more…)