サイトデザインを一新！HTML5+CSS3にて構築
サイトをリニューアルしました！HTML5とCSS3で構築しています。
でも、MozillaかWebkit系でしかまともに見れないのが残念。。。
HTML5について
要素が増えたので、正しいマークアップが出来ているか心配。
今までdiv、p、ulだけで構成していたような気がする。。。
head要素内はシンプルになった。
ドキュメントタイプが<!DOCTYPE HTML>だけになったので、strictやtransitinalかを迷わなくていい！
CSS3について
デザインの多くをCSS3で実現しました。
例えば、右上の「about me」のボタンもCSS3のグラデーションです。
background: -webkit-gradient(linear, left bottom, left top, from(#5b5d6f), to(rgba(111,113,132,1)));
background: -moz-linear-gradient(#5b5d6f, rgba(111,113,132,1));
FireFoxとSafariもしくはChromeだと左側に90度回転したロゴが出ています。
これもCSS3でテキストを装飾しています。
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
その他、テキストやボックスにシャドウを入れられます。
CSSだけでデザインを一新出来るのが魅力で！
その中でも一番「いい！」と思ったのが、Multiple backgroundsです。
複数のbackgroundを1つの要素に設定出来るので、ヘッダーとフッターにウィンドウ全体に広がる画像があった場合、body要素に2つの背景を指定するだけでOK！
デザインを意識しすぎづにマークアップが出来ます！
参考にしたサイト
http://www.html5.jp/tag/elements/index.html
http://www.htmq.com/css3/index.shtml
http://leaverou.me/ft2010/#intro
- Web-Parkのホーム >
- website >
- サイトデザインを一新！HTML5+CSS3にて構築
- オススメ本（既読）
-
- 読んでみたい本（未読）
-
Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405
COMMENT PLEASE!!
トラックバック
- 「サイトデザインを一新！HTML5+CSS3にて構築」のトラックバックURL
Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
https://web-park.org/website/renewal20101121.html/trackback
