2017年11月18日のブックマーク (2件)

  • box-shadowはもう古い?CSS新時代の「影の落とし方」

    長い間Webデザイナーが愛してやまないものの1つに*「box-shadow(ボックスシャドウ)」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで稿では、CSS新時代の影の落とし方につい

    box-shadowはもう古い?CSS新時代の「影の落とし方」
    muneking
    muneking 2017/11/18
  • Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選

    CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。 Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。 今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。 とてもシンプルなコードばかりですので、使えそうなものがあれば、早速試してみてください。 CSSフィルターができること ~基機能「9」~ 1. レンズで覗き込むようにぼかしを加える「blur」 filter: blur( ぼかしの長さ ); blurを指定すると、ガウシアンぼかしタイプのブ

    Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選
    muneking
    muneking 2017/11/18