Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

6/16(月)授業メモ HTML5

今日はHTML5でレスポンシブWEBデザイン、ボックスとテキストにシャドウを付ける。

 

①可変レイアウトパターン:HTML+CSS

 学校のブログ 2014-07-08の記事の「可変レイアウトパターン:HTML+CSS」をもとに進行。

 

②ボックスとテキストにシャドウを付ける。

学校のブログ 2014-07-23の記事の「CSS3シャドウ」をもとに進行。

2-1. #bShadow は、ボックスにシャドウを付ける。

2-2. inset は内側にシャドウがかかる

2-3. ブログ7/23を参照

2-4. ボックスシャドウ

ソース

<body>
<div id="bShadow1"></div>
<div id="bShadow2"></div>
<div id="bShadow3"></div>
</body>


スタイル

#bShadow3 {

 -webkit-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;

 -moz-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;

 box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;

}

※ 1. 0 0 6px #f00は外側へ

※ 2. inset 0 0 6px #00fは内側へ

※ 3. insetは内側にシャドウを付ける指示

※ 4. bShadow は boxShadow を示している

2-5. テキストシャドウ

ソース

<body>

<div id="tShadow1">テキスト<br>シャドウ</div>

<div id="tShadow2">テキスト<br>シャドウ</div>

<div id="tShadow3">テキスト<br>シャドウ</div>

<div id="tShadow4">テキスト<br>シャドウ</div>

</body>

 

スタイル

#tShadow2 {
 text-shadow: 0 0 6px #666;
 color: #fff;
}

※ 1. ヨコ タテ シャドウの大きさ(幅) 

※ 2. color は文字色

 

#tShadow4 {
 text-shadow: -40px -10px 0 #f00, 40px 10px 10px #00f;
}

※ 1. シャドウはたくさん付けれる。(3個まで付けられた)