BLOG株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。by一緒にラクーンのサービスをつくりませんか?採用情報カジュアル面談2022.3.30デザインCSSだけでできる!画像のスタイリングHTMLcssこんにちは。デザイン戦略部のうとです。サイトをつくるときに、「大量の画像を加工するのが大変だな」と思うことはありませんか?画像を加工して使用する場合、もし修正が必要になるとすべての写真を修整しなくてはなりません。その点、CSSを使用していると、それぞれの画像を修正しなくてもCSSを修正すればすべての画像に反映してくれます。そんなわけで、今回はcssでできる画像のスタイリングをいくつかご紹介します。目次シャドウをつける角丸にする円で切り取るフェード効果をつける画像にグラデーションを重ねる画像が重なっている感じにするリボンをつける1.シャドウを付けるbox-shadowを使用すると、画像にシャドウを付けることができます。角度や透明度なども簡単に変更できるため便利です。0.7);}2.角丸にする丸みを調整できるので重宝します。imgタグに設定しましょう。15px;}3.円で切り取るborder-radiusを50%にすると楕円を作ることができます。50%;}画像を正方形にするとborder-radiusで正円を作ることができますが、background-imageで背景画像として使用すると、長方形の画像でも正円で切り取ることができます。50%;}また、backgroundの位置を調整するとちょうどいい位置で切り取ることができます。50%;}4.フェード効果をつける疑似要素afterにlinear-gradientを使用し、背景色で塗ることでフェード効果をつけています。transparent);}5.画像にグラデーションを重ねるこちらは背景として画像を使用し、linear-gradientを使用することで、画像にグラデーションを付けています。background-size:cover;}6.画像が重なっている感じにする疑似要素afterを使用し、box-shadowを回転させています。-1;}ちなみに、beforeも使うと重なりをもう一枚増やすこともできます。-2;}7.リボンをつけるこちらも疑似要素を使用し、上のリボンをbefore、下のリボンをafterで作成しています。はみ出してしまう部分はoverflow:hiddenで隠してしまいましょう。2;}photoshopなどを使用するときれいな画像を作ることができ、またブラウザ間の見え方などをあまり気にする必要がありません。CSSを使用すると、少し書き換えるだけですぐに変更ができるため、ぜひいろいろ試してみてください。