2012年6月29日金曜日

課題が完成した人は(2) CSSの小技を試してみよう！

 

Safari 最新版へのアップデート方法 (4/16の授業ページへ)

CSSは年々新しくなっています。

最新のCSS参考：
●Flashなどは一切使用せずに、CSS3とjQery,HTML5で作成されたアニメーション漫画。
●CSSで描かれたスーパーマン
●CSSによる波紋のようなアニメーション

新しいCSSはDreamweaver8の編集画面には全ては表示されない場合も多い。
Q：「では新しいCSSは使えないのか？」
A：「使う事ができます」
CSSのファイルの各項目に直接使いたいCSSコードをコピーペーストし
プレビューでブラウザに表示して確認する事で、
Dreamweaver8内で編集項目にはでて来ないCSSも使う事ができます。

 練習してみよう！！！

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
↑このデモ画面を見てみましょう。

これはDivボックス内に文字を書き、Divボックスの背景を白くし、
DivボックスのドロップシャドウをCSSで作成する事で、
まるで画像作成ソフトでつくられたかのような表示をWEB上で行っています。


新規HTMLと新規CSSを作成し、ファイル名を付けて保存。
(例：drop-shadow.html　drop-shadow.css)
そしてHTMLとCSSを連動させる。


  　HTML　(<body> ~ </body>内に以下をコピーペースト

<div class="drop-shadow perspective">
<h1>images</h1>
    <p>all modern browsers</p> </div>

　CSS　(新規drop-shadow.css内に以下をコピーペースト)

.drop-shadow {
    position:relative;
    width:45%;
    padding:1em;
    margin:2em auto 5em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
}

.drop-shadow:after{
    right:10px;
    left:auto;
}

.perspective:before {
    left:28px;
    bottom:8px;
    max-width:200px;
    height:35%;
    -webkit-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
    box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
    -webkit-transform:skew(50deg);
    -moz-transform:skew(50deg);
    -o-transform:skew(50deg);
    transform:skew(50deg);
}

.perspective:after {
    display:none;
}

完成するとこうなります↓


 


参照：　[CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル
http://coliss.com/articles/build-websites/operation/css/css-tutorial-drop-shadows-without-images.html

色々なCSSの小技紹介

[CSS-EBLOG]

box-shadowを使った面白演出 - CSS3で遊んでみる4 ／
http://css-eblog.com/css3/box-shadow-tips.html


少しのコードで実装可能な20のCSS小技集　／ [WEBクリエーターBOX]http://www.webcreatorbox.com/tech/css-tips20/

ソースが公開されているcss小技11エントリーまとめ　／ [KOCHIBIT.net]
http://kachibito.net/web-design/11-css-tips-entry.html

CSSで角丸DIV boxを実現 [CSS Lecture]
http://www.css-lecture.com/log/css3/css3-border-radius.html

課題が完成した人は(1) メニューボタンを作成しよう！

課題が完成した人は(2) CSSの小技を試してみよう！

課題が完成した人は(3) 配布されているテンプレートを試してみよう！