灌籃高手作者井上雄彥漫畫創作過程全紀錄

能看見井上雄彥漫畫的創作過程真是一件令人興奮的事情。從小看灌籃高手長大,他所繪製出的人物,讓我印象深刻,就像他自己所說的,他所創作的人物都是他用心勾繪出的,就像他血脈相連的孩子。這次的創作過程全紀錄,讓我看見他一筆一點一滴的勾繪出浪人劍客中的武藏神情,真是神乎奇技。

Add a comment

Plastic Animation Paper 4 (PAP RPO 4.0)開放全功能專業版本下載使用

Plastic Animation Paper無紙2D動畫軟件,在2010/7月份開啟"全功能版本"軟體免費下載使用。

Add a comment

分鏡表Storyboard-動畫分鏡電影分鏡下載律表

這些表格希望對製作動畫的朋友有幫助,可參考或直接使用。謝謝

download 1: 美式單一畫面A4尺寸分鏡表
download 2: 日式A4六格畫面分鏡表
download 3: 動畫製作律表

下載 Download

吉卜力工作室宮崎駿使用的分鏡表格式下載

下載 Download 吉卜力工作室宮崎駿分鏡表

您會有興趣的文章:2D動畫軟體 PAP 4.0 - 開放全功能版本

Add a comment

使用jQuery來達到如iframe、asp include 和 php include 的效果
 

jQuery能做到的比iframe連結另一個網頁html內容來的活用,使用css做樣式變化,也較有彈性。再次比較asp includephp include 這樣的方式,無須使用以上asp和php伺服器就能達到你想要的include html。(注意:此方法get()屬於ajax需要在server上執行。)

Add a comment

關閉Chrome 12px字體大小限制

網頁設計時檢查遊覽器相容,發現設定12px以下字體,在goole chrome遊覽器卻都無效,上網查了一下結果,原來chrome遊覽器的預設限制最小字體為12px。
查詢了一下解決方法,就如下面的簡單語法,將chrome字體大小的限制關閉。

*PC桌面版的Chrome27正式取消了-webkit-文字大小調整屬性的支持,實際上是修正了原有的錯誤
 

-webkit-text-size-adjust:none;

 

Add a comment

Multi-Level Drop-Down Menu for CSS

STYLE CSS

CSS設定裡/---show---/註解中的內容為下拉選單主要呈現的效果。

(/---show---/之外的CSS樣式可自行更換。本人製作最簡單的格式給各位,為在教學使用上較易理解。)

* {
    padding: 0;
    margin: 0;
}
#cssmenu {
    width: 720px;
    margin-right: auto;
    margin-left: auto;
}
/*-------view style----------*/
.nav,
.nav ul {
    list-style-type: none;
}
.drop a {
    color: #000;
    text-decoration: none;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.drop {
    float: left;
    width: 100px;
    background-color: #0c0;
    position: relative;
    height: 20px;
    line-height: 20px;
}
.m4 {
    background-color: #093;
}
.drop:hover {
    background-color: #ff0;
    color: #fff;
}
.drop ul li:hover {
    background-color: #6c0;
}
.drop .dlist {
    background-color: #f00;
    width: 150px;
    position: absolute;
    top: 20px;
    left: 0px;
}
.m4 ul {
    background-color: #f60;
}
.drop .fly {
    display: block;
    position: relative;
    width: 150px;
}
.drop .fly ul {
    position: absolute;
    display: block;
    width: 150px;
    top: 0px;
    right: -150px;
    background-color: #09f;
}
.m4 .fly ul {
    background-color: #fc0;
}
/*-----------show---------------*/
.drop ul {
    display: none;
}
.drop:hover ul {
    display: block;
}
.drop .fly ul {
    display: none;
}
.drop .fly:hover ul {
    display: block;
}
.drop .fly .fly ul {
    display: none;
}
.drop .fly .fly:hover ul {
    display: block;
}
.drop .fly .fly .fly ul {
    display: none;
}
.drop .fly .fly .fly:hover ul {
    display: block;
}
/*-------show-------------*/

HTML

<dl class="nav">
    <dd class="drop m1 "><a href="#">HOME</a></dd>
    <dd class="drop m2">
        <a href="#">ABOUT US</a>
        <ul class="dlist">
            <li class="fly">
                <a href="#">PREVENTION</a>
                <ul>
                    <li><a href="#">video</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">TRUCKS</a></li>
                    <li><a href="#">PLANT</a></li>
                    <li><a href="#">EFFUVIUM</a></li>
                    <li><a href="#">VIEW</a></li>
                </ul>
            </li>
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly"><a href="#">PREVENTION5</a></li>
        </ul>
    </dd>
    <dd class="drop m3">
        <a href="#">DESIGN</a>
        <ul class="dlist">
            <li class="fly">
                <a href="#">PREVENTION</a>
                <ul>
                    <li><a href="#">video</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">LANDFIL</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">TRUCKS</a></li>
                    <li><a href="#">PLANT</a></li>
                    <li><a href="#">EFFUVIUM</a></li>
                    <li><a href="#">VIEW</a></li>
                </ul>
            </li>
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly"><a href="#">PREVENTION5</a></li>
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly"><a href="#">PREVENTION5</a></li>
        </ul>
    </dd>
    <dd class="drop m4">
        <a href="#">DRAW</a>
        <ul class="dlist">
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly"><a href="#">PREVENTION5</a></li>
            <li class="fly">
                <a href="#">PREVENTION</a>
                <ul>
                    <li><a href="#">video</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">LANDFIL</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">TRUCKS</a></li>
                    <li><a href="#">PLANT</a></li>
                    <li><a href="#">EFFUVIUM</a></li>
                    <li><a href="#">VIEW</a></li>
                </ul>
            </li>
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly"><a href="#">PREVENTION5</a></li>
        </ul>
    </dd>
    <dd class="drop m5">
        <a href="#">FILM</a>
        <ul class="dlist">
            <li class="fly">
                <a href="#">PREVENTION</a>
                <ul>
                    <li><a href="#">video</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">LANDFIL</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">TRUCKS</a></li>
                    <li><a href="#">PLANT</a></li>
                </ul>
            </li>
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly"><a href="#">PREVENTION5</a></li>
        </ul>
    </dd>
    <dd class="drop m5">
        <a href="#">PRODUCT</a>
        <ul class="dlist">
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly">
                <a href="#">PREVENTION</a>
                <ul>
                    <li><a href="#">video</a></li>
                    <li><a href="#">video</a></li>
                    <li><a href="#">video</a></li>
                    <li><a href="#">video</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">LANDFIL</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">TRUCKS</a></li>
                    <li><a href="#">PLANT</a></li>
                </ul>
            </li>
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly"><a href="#">PREVENTION5</a></li>
        </ul>
    </dd>
    <dd class="drop m6">
        <a href="#">CANTACT</a>
        <ul class="dlist">
            <li class="fly">
                <a href="#">PREVENTION</a>
                <ul>
                    <li><a href="#">video</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">LANDFIL</a></li>
                    <li class="fly">
                        <a href="#">Dig-web</a>
                        <ul>
                            <li><a href="#">Kodak</a></li>
                            <li><a href="#">Canon</a></li>
                            <li><a href="#">Nikon</a></li>
                            <li><a href="#">Panasonic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">TRUCKS</a></li>
                    <li><a href="#">PLANT</a></li>
                </ul>
            </li>
            <li class="fly"><a href="#">PREVENTION2</a></li>
            <li class="fly"><a href="#">PREVENTION4</a></li>
            <li class="fly"><a href="#">PREVENTION5</a></li>
        </ul>
    </dd>
</dl>

Demo

IE6 解決方法

body {
    _behavior: url("csshover3.htc");/*---ie6支援hover--加入body---*/
}

*註解:

關於CSS鏈結_behavior上增加(" ")這兩個符號解釋為url("csshover3.htc"); ----表示csshover3.htc在此網頁資料夾上。然而一般使用的是url(#);才是所謂的依照檔案位址指定路徑

例如:有個圖片檔名為img.jpg要設定為body的背景。

body{
    backgroud-img: url(..images/img.jpg);
} 
/*----此img.jpg在外面的images資料夾裡。----*/

我測試使用("")兩個符號,設定圖片背景img.jpg

body{
    backgroud-img: url("img.jpg");
} 
/*-----------是沒有反應的----------*/

所以結論為,url("#") 只能設定使用_behavior載入在此網頁本身資料夾上。

相關資料夾路徑設定方法有:

[ / ]:下層資料夾 (/imges/img.jpg)

[../ ]:上層資料夾(../imges/img.jpg)

相信這樣解釋大家能夠了解,csshover將要放在哪裡做連結,比較不會混淆,而達不到功效。

範例檔案內附csshover3.htc檔案

下載範例程式碼

您會有興趣的文章:【jQuery教學】jQuery切換不同CSS樣式style:切換class、切換樣式、轉換不同CSS

Add a comment

使用jQuery 控制CSS變換不同Class樣式,達到同一頁面切換成不同顯示效果。如以下使用圖文模式圖片模式文字模式,分別為三種class(.vw_01、.vw_02.、vw_03)做切換。
 

Slam Dunk 10 days after

作者井上雄彥是為了紀念灌籃高手一億冊,在借用的廢校展覽所教室黑板上,所畫的黑板漫畫,內容為灌籃高手31集打完全國大賽結局後10天,劇中人物的現況 ...

Add a comment