忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[160] [159] [158] [157] [156] [155] [154] [153] [152] [151] [150

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS3を試してみる gradient border-radius transform box-shadow

気づいたらまた広告が出ていました・・・。(3ヶ月無更新)

仕事が忙しいというのもひとつの理由ですが、
休日にWeb関係の勉強をしなくなったのが大きいです。
この仕事や、HTMLやCSSに情熱がなくなったわけではないのですが、
今、それ以上に情熱を傾けたいものがあるためなかなか難しいです・・・。

昼休みに効率的に情報を仕入れるようにしなければ・・・。と思ってます。

で、
今回は、CSS3を試してみるその2をお送りします。

デモのURLは下記です。
http://www.granshe.com/css3/110103/

今回は
・translate
・gradient
・border-radius
・box-shadow
を利用してみました。

青の矢印リンクアイコンは画像ですが、それ以外は画像は使用せず、CSSのみで実装しています。


解説

グローバルナビゲーション:

gradientで今風?のボタンを実装してみました。

メインビジュアル部分:

transformプロパティを実装してみました。
firefoxだと不完全ですが、webkit系だと動くと思います。

個人的にはrotateが楽しくて気に入っています。
translateはロールオーバーの挙動でうまく使えそうだなと思いました。
floatやpositionと併用したときに、どのような挙動をするのか要確認ですね。

メインコンテンツ部分:

2カラムレイアウトはfloatを使わずに実装しています。
display: box; プロパティです。
ブラウザによって若干挙動が異なるので、
個人的にはしばらくはfloatのお世話になるかなぁという感想です。

フッター付近のボタン:

border-radiusとbox-shadowを使ってちょっとリアルボタンを作ってみました。
「角丸にならない」「影がつかない」くらいの挙動なら、
サイトを使用する際の問題にはならないと思うのですぐ使えそうですね!


所感

CSS3に関して、IEは9から対応予定とのことですから、完全実装はまだまだ先になりそうですし、
サイトのレイアウトにかかわるプロパティはなかなか利用するのが難しいかもしれませんが、
「なくても支障をきたさない」、ワンポイントの使用であればそろそろこっそり始めてしまっても良いのでは?
と思いました。


特にtransformプロパティのデモを作成するにあたり、
どなたかのサイトを参考にさせていただいたのですが、
ブックマークを忘れた挙句履歴が残っておらず掲載できませんでした・・・。

この場を借りてお詫び・御礼申し上げます。
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
02« 2017/03 »04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
ブログ内検索
忍者ブログ [PR]