Archive for the ‘Print & Web Design’ Category

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 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 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…)

Posted on January 24, 2009 - by webmaster

Centering layout using CSS positioning & negative margin

Most developers using auto margin technique to create horizontally center CSS layout, by using this technique we simply specify the width of the content container and add CSS auto margin, and set the CSS text alignment of the parent element to center, but sometimes this technique does not come in handy.
(more…)

Posted on September 7, 2008 - by webmaster

Use custom fonts, PHP, DOM & Javascript Image Replacements

Using custom fonts sometimes can give a different “soul” to the web page, but as a good web designer we shouldnt fully strict to the “looks & feels” but also the accessibility, cross compatibility, always try to make it present almost in the same way across different screen readers, browsers, and media. now days we also need to consider of SEO, and use image directly to the page to replace the important phrases is not a best practice.

(more…)

Posted on September 5, 2008 - by webmaster

Typechart: browse web typography and grab CSS

Are you web designer, or web developer and you dont have a MAC ?, well this would be more interesting for you than anyone else.

Typechart lets you flip through, preview and compare web typography while retrieving the CSS

This is all about web typograhpy, within typechart you can easily compare and preview hows fonts rendered in both MAC & PC, and even Grab the CSS.

Interesting huh? check it out.

Posted on July 17, 2008 - by webmaster

New IEPNGFix v.2.0 alpha PNG Transparancy in IE6

Angus Turnbull at twinhelix.com has released the new version of IEPNGFix (now v2.0 alpha), IEPNGFix is script library which is add transparancy PNG Support for Internet Explorer 5.5 & IE6.

Latest updated at July 17, 2008, and now support background position and repeat CSS1! download available at IEPNGFix homepage

There are also other free scripts available to solve PNG transparancy in IE6

• Unit PNG Fix from Unit Interactive Labs, 1KB, auto run, support image object and background,allow auto height and width
• Javascript IE PNG Fix
• Transparancy PNG in IE from 24ways.org