web制作 | 夜間飛行 備忘録

web制作講座で教わったあれこれを書き留めていきます

33日目

本日は…

■透過PNGの作り方&positionで配置する方法

 ・まず透過PNGでロゴを作る

f:id:knkasay:20150407180256p:plain

  ※ポイントはパス上文字ツール

 ・保存するときはPNG24がいい。8だと周囲に白い線が残る可能性

 ・GIFも同様

  →これらの対策としては、マットに背景色を設定する

 ・現在主流はPNG→大きいので高圧縮ツールを使う

 

■positionの使い方

 f:id:knkasay:20150407180913j:plain

  ※最終的には上図のように重ねる

 ・headerに対してposition:relativeを設定し、上に乗せるbillbord(写真)とロゴの両者をposition:absolute;で任意の位置に重ねる

 

 ・ちなみにbillbordの角丸はborder-radiusによるもの(角丸は左上から右回りで指定できる)

 ・radiusを50%と指定すると、正方形の画像なら丸くなる。長方形なら楕円になる

 

 ・container自体の影はbox-shadowによる

 

 ※※写真自体を角丸にすることもできる→Photoshopで、写真の下のレイヤーに角丸四角を作り、レイヤーとレイヤーの間をalt+クリックすることで、写真が角丸になる

 →同様にして楕円で切り抜くことも可能

 ※※※Illustratorでは、上に角丸の画像を乗せて角丸に見せた

 

■午後はflash

 ・車をアニメーションで動かす

  →クラシックトゥイーンを設定するときは、中のキーフレームをクリックすること

 ・レイヤーを作って、ボタンとアクションレイヤーにする

  →挿入>新規からボタンを選択して作る(二個目からは一つ目を複製して作る)

 ・ボタンの画像を切り替わるように4つ設定、最後のひとつはボタンのクリック範囲を決める

 ・ボタンそれぞれにアクションをコードで入れていく(F9)

 ・初めから動かないために、アクションレイヤーの一つ目のキーフレームにstop()を入れてやる

 ・Ctrl+Enterでプレビュー