1. ホーム /
  2. WEBサイト制作 /
  3. CSSだけで写真を編集加工（フレーム・影・トリミング・色）サンプルコード10選
WEBサイト制作

CSSだけで写真を編集加工（フレーム・影・トリミング・色）サンプルコード10選

  • 2023.04.01
  • by memoer
  • 0
イメージ

写真・画像にフレームを付けたい、影を付けたい、トリミングしたい、色を変えたい。
そんなときは、写真・画像データ自体を加工すればいいわけですが、めんどくさい（個人的感想が強めです）。

いまは、写真・画像データはそのままに、CSSだけでさまざまな加工・編集ができます。
CSSであれば、再度デザインを変えたくなったときは、CSSを書き換えるだけですみます。写真・画像の元データを修正する必要はありません。

CSSで、簡単に、写真・画像をリデザインしてみましょう。

使い方

HTML

HTMLはこちらをコピーしてご利用ください。
デザインサンプルはこのソースに対してCSSを適用させています。

<p class="XXX">
 <img src="image.jpg" alt="イメージ">
</p>

冒頭「class="XXX"」の「XXX」は、後述するデザインサンプルのCSSのクラス名に変更してご利用ください。CSSに「.photo08」と書かれている場合は「photo08」がクラス名です。HTMLは「class="photo08"」に変更します。「image.jpg」は写真画像です。

CSS

後述する「デザインサンプル」のCSSをコピーしてご利用ください。

ただし、写真の下部に小さな余白が入る場合は、以下のCSSを追加してください。写真とテキストが並ぶときにどのラインで揃えるかを指定する記述です。bottomで揃えるようにする。細かな説明は省きます…余白ができる場合は、おまじないとして記述してください。

img {
  vertical-align: bottom;
}

デザインサンプル

シンプルなフォトフレーム

写真加工（イメージ）
.photo01 {
  display: inline-block;
  border: #000000 10px solid;
}

枠線（border）を太めの実線（solid）にすることでフレーム風になります。

.photo01 {
  display: inline-block;
  padding: 10px;
  background: #000000;
}

pにpaddingで余白を設けて、backgroundで背景色を黒に指定。これでも同様のデザインになりますね。

写真に影を付ける

写真加工（イメージ）
.photo02 {
  display: inline-block;
  box-shadow: 10px 10px 5px #bbbbbb;
}

box-shadowで影が付けられます。1番目の10pxで水平方向の位置を、2番目の10pxで垂直方向の位置を、3番目の5pxでぼかしの距離を指定しています。

写真を傾ける

写真加工（イメージ）
.photo03 {
  display: inline-block;
  box-shadow: 10px 10px 5px #bbbbbb;
  transform: rotate(-5deg)
}

box-shadowで影が付けられます。1番目の10pxで水平方向の位置を、2番目の10pxで垂直方向の位置を、3番目の5pxでぼかしの距離を指定しています。

写真の傾きは、transformのrotate（回転）で指定します。(-5deg)で5度傾けています。

ポラロイド風のフォトフレーム

写真加工（イメージ）
.photo04 {
  display: inline-block;
  padding: 1px;
  background: #000000;
  box-shadow: 5px 5px 3px #bbbbbb;
}
.photo04 img {
  padding: 10px 10px 30px;
  background: #fff;
}

2段階で枠線を指定し、ポラロイド風を実現しています。
1段階目。内側のimgにpaddingで余白（下側だけ大きめに指定）を設けて、backgroundで背景色を白に指定。
2段階目。外側のpにpaddingで1pxの余白を設けて、backgroundで背景色を黒に指定。

box-shadowで影を付けています。1番目の10pxで水平方向の位置を、2番目の10pxで垂直方向の位置を、3番目の5pxでぼかしの距離を指定しています。

写真をトリミングする（正方形に切り抜き）

写真加工（イメージ）
.photo05 img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

デザインサンプル「ポラロイド風のフォトフレーム」の写真をトリミングしたものです。

widthとheightでトリミング後のサイズを指定します。object-fit: coverを指定すると、先のサイズ内で、写真の縦横比を保ちつつ最大化表示してくれます。object-fitはCSSだけでトリミングできる神プロパティです。

写真をトリミングする（円形に切り抜き）

写真加工（イメージ）
.photo06 img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 100px;
}

デザインサンプル「ポラロイド風のフォトフレーム」の写真をトリミングしたものです。

widthとheightでトリミング後のサイズを指定します。さらにborder-radiusで角を丸く指定します。widthとheightが今回は200pxなので、その半分の100pxを指定すると綺麗な円になります。border-radius: 50%;でも構いません。

object-fit: coverを指定すると、先のサイズ内で、写真の縦横比を保ちつつ最大化表示してくれます。

写真タイトル・ワンポイント装飾を加える

写真加工（イメージ）
.photo07 {
  position: relative;
}
.photo07::before {
  position: absolute;
  content: 'NEW YORK';
  left: 0;
  top: 0;
  color: #ffffff;
  padding: 5px 10px;
  background: #000000;
}

疑似要素（before）を使って実現させます。p（親要素）にまずposition: relative;を指定します。次に親要素に対して絶対的な位置を、疑似要素（before）の、position: absolute;、left: 0、top: 0で指定しています。これで写真の左上に配置されます。content: 'NEW YORK';でテキストを入れ、color、padding、backgroundで装飾しています。

写真を透過させる

写真加工（イメージ）

左がCSSで透過させる前の写真。右がCSSを適用した後のイメージです。

.photo08 {
  display: inline-block;
  background: #000000;
}
.photo08 img {
  opacity: 0.5;
}

opacityで写真が透過されます。数値を0に近づけるとより透明になります。今回は黒背景に重ねているので黒味がかっています。

「写真に文字を重ねたいけど、写真がごちゃごちゃしてて文字が見えづらい」なんてときにこういった加工をかけると、文字が見やすく強調されますね。

白黒写真に色調補正

写真加工（イメージ）

左がCSSでの色調補正前の写真。右がCSSを適用した後のイメージです。

.photo09 img{
  filter: grayscale(100%);
}

filterはさまざまなフィルタ効果を加えることができるプロパティです。grayscaleの数値を100%に近づけるほど色数が減ります。100％で白黒になります。

セピア色に色調補正

写真加工（イメージ）

左がCSSでの色調補正前の写真。右がCSSを適用した後のイメージです。

.photo10 img{
  filter: sepia(100%);
}

filterはさまざまなフィルタ効果を加えることができるプロパティです。sepiaの数値を100%に近づけるほど色数が減り、セピア度合いを調整できます。

以前はこんな便利なCSS・プロパティは用意されていませんでした。
いろいろ新しくなり、便利で簡単になっています。うまく活用していきましょう。

Share

ブログランキング

記事が参考になったら応援クリックしていただけると励みになります。


にほんブログ村 IT技術ブログ WordPressへ