タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

box-shadowに関するmirutoのブックマーク (2)

  • 【CSS3】ドロップシャドウやグロー(光彩)をCSSで(box-shadow) - みこむらめもむらむらむら

    これも折角だから改めて調べてみためもめも ちゃんとAndriod、iPhoneで確認もした! 問題なく表示されたのぜ!(・∀・) ドロップシャドウ(box-shadow)の基的な書き方 「box-shadow」は名前の通りボックスに影をつけてくれるプロパティ 省略形が存在するので記述方法にはいくつかパターンがあるけど まずは基形から(・∀・) box-shadow: 3px 3px 5px 0 #777; box-shadow:横方向のずれ 横方向のずれ ぼかしの大きさ 影の広がり 影の色; てな感じで指定できる! ぼかしの大きさ 値が大きい程ぼんやり、値が小さい程くっきり 影の広がり シャドウ全体の大きさの拡張・縮小 「ぼかし部分の内側に作られるpadding」というイメージ 負の値を設定することも可能 4つ目の値を省略すると影の広がりが0pxなのと同じ表示に 3つ目、4つ目の値を省

    【CSS3】ドロップシャドウやグロー(光彩)をCSSで(box-shadow) - みこむらめもむらむらむら
  • [CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック

    CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px

  • 1