Better Typography for Web

Fluid Type

http://trentwalton.com/2012/06/19/fluid-type/

via Web Design Ledger – 8 jQuery Plugins for Enhancing Typography

FitText: A jQuery plugin for inflating web type

http://fittextjs.com/
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. This is for gigantic display text only.

SLABTEXT – A JQUERY PLUGIN FOR PRODUCING BIG, BOLD & RESPONSIVE HEADLINES

http://www.frequency-decoder.com/demo/slabText/
Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Say No to Faux Bold

http://www.alistapart.com/articles/say-no-to-faux-bold/

Codrops Tutorials: Transition

Codrops Tutorials

This is a treasure trove of CSS and JQuery.

40+ New HTML5/CSS3 Articles and Tutorials

A lot of menu transition effects with demos and code downloads.

 

CSS Background Color Transition

Color transition made easy.

a {
   background: #f5f5f5;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

a:hover {
   background: #008BFD;
}
a {
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}

Read more: CSS3 transition-timing-function Property [w3schools]
Demo: Sexy Interactions with CSS Transitions [thinkvitamin]

Changing Background Image Transition


.trans {width: 30px;	
height: 30px;	
padding: 0;	
margin: 0;	
border: 0 solid #333;	
background-image: url(back-sprite.gif);	
background-repeat: no-repeat;	
background-position: 0 0;	
-webkit-transition: background-position .3s ease;	   
-moz-transition: background-position .3s ease;	     
-o-transition: background-position .3s ease;	        
transition: background-position .3s ease;
background-color: #000;
 -moz-transition: .3s ease;
transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}

.trans:hover {	background-position: 0 -30px; background-color:#0CC;}

Demo | Download Source

Read: Changing a Background-image with CSS3 Transitions | Demo

Sample: RightNowWP [ThemeForest]

jQuery MagicLine Navigation

Read | Demo

Trove of the Web

I have been busy and haven’t been reading much. And during this surfing hiatus, a lot of developments are going around. This is why I love web design; it is constantly evolving and there’s always a lot to be learnt at every corner.

Responsive Web Design: What It Is and How To Use It


More Reading:
A LIST APART: RESPONSIVE WEB DESIGN
ZOMIGI: EXAMPLES OF FLEXIBLE LAYOUTS WITH CSS3 MEDIA QUERIES

Are You A Layer Mayor

Create An Animated Bar Graph With HTML, CSS And jQuery


Tutorial
See animated version in action

A Smashing Magazine Anniversary Treat

Little Big Details

How Designers Can Help Developers