タグ

ブックマーク / webrocketsmagazine.com (1)

  • CSS3を使ってできる画像まわりのエフェクトやスタイリング18

    CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード(シャドウ編) 13. フェード(グラデーション編) 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

    CSS3を使ってできる画像まわりのエフェクトやスタイリング18
    oneshin3
    oneshin3 2016/04/12
    “.frame {2 display: inline-block;3 position: relative;4}5.frame:after {6 position: absolute;7 content: "";8 box-shadow: 0 15px 10px rgba(0,0,0, .5); /* シャドウ */9 transform: rotate(3deg); /* 回転させる */10 right: 5px;11 left: auto;12 top: auto;13 bottom: 15px;14 z-index: -1;15 width: 5
  • 1