\ えぬすぴブログ

 #852  <<PC>>

CSS3 でデザイン(Opera 10.50 記念)

サイトのデザインを一新して雰囲気を変えました。 CSS3 の中で、text-shadow(影付きの文字)box-shadow(影付きのボックス)border-radius(角が丸い枠線)の3つを使っているだけですが(苦笑)。 border-image(枠線を画像にする)は使っていないですが、ゲームに使われるようなメッセージボックスを作るのに便利そうです。

以前に border-radius を使いました(Opera 10.50 beta / 角が丸い枠線 - #824)。 その続きで、今日は box-shadow も使いました。 Opera がバージョン 10.50 になって対応するようになった記念です♪ 

見やすくなって、立体的でやわらかい感じにもできると思います。 ただ、使う前よりも動作が重くなるのにも、今気が付きました(汗)。 ページをスクロールさせると、表示が少し引っかかるようにもなります。

でも、特に“地球上で最速のブラウザ”(!)でもある Opera 10.50 ではほとんど影響が出ない感じです(笑)。

どのような見え方になるのか、サンプルも作りました。 対応していないブラウザでは表示に違いが出ません。

▼ text-shadow

text-shadow: #996 4px 4px 6px; (ぼかし 6px)
えぬすぴブログ

text-shadow: #996 4px 4px 3px; (ぼかし 3px)
えぬすぴブログ

text-shadow: #996 4px 4px 0px; (ぼかしなし)
えぬすぴブログ

▼ box-shadow

box-shadow: #996 8px 8px 12px; (ぼかし 12px)
えぬすぴブログ

box-shadow: #996 8px 8px 6px; (ぼかし 6px)
えぬすぴブログ

box-shadow: #996 8px 8px 0px; (ぼかしなし)
えぬすぴブログ

▼ border-radius

※ IE8 や Opera 10.10 などでは四角いままです。
 この文章のまわりの枠線の角が丸くなります。
 border-radius: 16px; として表示しています。

英語になりますが、CSS3 について解説されているページです。

CSS3 には Opera や Firefox や Google Chrome や Safari など、たいていのブラウザが対応しています。

ただ、Windows に最初からインストールされていて多くの人に使われている、肝心の Internet Explorer では対応していません。 現在の IE8 では CSS2.1 までです。 CSS3 に対応するのは次期バージョンの IE9 になる予定ということで、まだ先のようです。

ボクとしてはもちろん、“地球上で最速のブラウザ”(!)でもある Opera 10.50 をおすすめしたいです♪(笑)。

前のバージョン(10.10)よりちょっと(?)不安定で落ちることもあったり、カスタマイズしてできていたことの中でできなくなっていることもあったりするのですが(汗)。 まだ 10.50 正式版になったばかりなので、アップデートされて大丈夫になっていくと思います。

FC2ブログ > ジャンル:コンピュータ > テーマ:Opera

▼ 同じカテゴリーの記事

コメント

コメントの投稿

※ 「名前」と「本文」以外は省略できます。

  • ※ 必須
  • ※ 必須
  •  → 確認ページ (メールアドレスの記入があっても公開されません)
10 ← 2017年11月 → 12
---1234
567891011
12131415161718
19202122232425
2627282930--



 Google サイト内検索

▼タグ(抜粋)