用photoshop做出的3D文字教學


測試網站在各個解析度螢幕的顯示 – viewlike.us
支援320×396到1920×1200
還有iphone跟Wii的模擬…

富士山的卡通宣傳短片
富山観光アニメプロジェクト

用jQuery做出把T-shirt摺好跟展開的效果
How to Make a Threadless Style T-Shirt Gallery
轉貼他的程式碼：
CSS：

*{
 margin:0;
 padding:0;
 }
 img{
 border: none;
 }
 body {
 text-align: center;
 background: #222;
 }
 h2{
 color: #333;
 font:italic 36px Georgia, serif;
 padding: 20px;
 border-bottom: dashed 1px #999;
 clear: both;
 }
 #content{
 width: 100%;
 margin: 0px auto;
 background: #fff;
 text-align: center;
 margin-bottom: 50px;
 }
 .row{ /*Container for each row of shirts*/
 width: 495px;
 margin: 0px auto;
 clear:both;
 padding: 20px 0;
 }
 .teebox{
 overflow: hidden; /*Prevents excess of image from showing*/
 position: relative;
 margin: 0 10px;
 width: 144px; /*Width and height define thumbnail size*/
 height: 183px;
 float: left;
 clear: right;
 z-index: 0;
 }
 .selected{
 overflow: visible; /*Display part of image that not currently visible*/
 z-index: 10;
 }

 .teebox img {
 left:-84px; /*Use this to center your image when not hovered*/
 position: absolute;
 }
 .teebox a{ /*Area that changes to selected class when hovered over*/
 display:block;
 position: relative;
 float: left;
 left: 84px; /*Use to line up the overlay image*/
 z-index: 1;
 }
 .caption{
 color: #2FB5FF;
 font:14px Arial;
 position: relative;
 float: left;
 left: 0px;
 top: 146px;
 padding: 10px;
 background: #222;
 z-index: 1;
 }

HTML：

 

    

       
       
$10
    
 

jQuery：

$(document).ready(function() {
 $(".teebox a").mouseover(function(){
    $(this).parent().addClass("selected");
    $(this).find('img').animate({opacity: "0.0"}, 0); //Hides overlay
    $(this).parent().find('.caption').hide(); //Hides Caption
 }).mouseout(function(){
    $(this).parent().removeClass("selected");
    $(this).find('img').animate({opacity: "1.0"}, 0); //Shows overlay
    $(this).parent().find('.caption').show(); //Shows Caption
 });
});