CSSで写真を装飾する

更新日 : 2021.04.04

Share
3
0
6
CSSのみで写真に装飾を施す方法を紹介します。過度な装飾は避けたいのでできるかぎりシンプルなものを用意しました。デザインに合うものがありましたらご利用ください。

共通のHTML

HTMLは共通して以下のものを使用します。

<div class="image"><img src="./image.jpg" alt=""></div>

斜線枠

.image {
	position: relative;
}

.image::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border-image-source: repeating-linear-gradient(45deg, #fff, #fff 3px, rgba(0 0 0 / 0) 0, rgba(0 0 0 / 0) 6px);
	border-image-slice: 20;
	border-image-repeat: round;
	border-style: solid;
	border-width: 20px;
}

デモでは、幅20pxの斜線枠を10pxだけかかるように指定しています。11行目と12行目のcalc(100% - 20px)がそうです。斜線枠の幅を変える場合には、ここも変更します。

border-imageを利用して斜線枠を作成します。border-image-sourcerepeating-linear-gradientで斜線のスタイルを指定。border-image-sliceborder-widthwidthheightを同じ数値にすることで写真の境界線の上に斜線枠がのるように設定しています。

切り込み

.image {
	position: relative;
}

.image::before,
.image::after {
	content: '';
	position: absolute;
	transform: rotate(-35deg);
	width: 70px;
	height: 25px;
	background-color: #fff;
	z-index: 1;
}

.image::before {
	top: -10px;
	left: -25px;
	border-bottom: 1px solid #aaa;
}

.image::after {
	bottom: -10px;
	right: -25px;
	border-top: 1px solid #aaa;
}

角が欠けた表現を斜めにした疑似要素::before::afterで隠しています。12行目のbackground-color: #fff;は背景色と同じ色を指定してください。

角に装飾

.image {
	position: relative;
}

.image::before,
.image::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.image::before {
	top: -15px;
	right: -15px;
	border-width: 0 100px 100px 0;
	border-color: transparent #053e62 transparent transparent;
}

.image::after {
	bottom: -15px;
	left: -15px;
	border-width: 100px 0 0 100px;
	border-color: transparent transparent transparent #053e62;
}

シンプルに疑似要素::before::afterで作成した三角形を角に配置しています。サイズを変更することで印象を変えることができます。

ずらし背景色

.image {
	box-shadow: 20px 20px 0 #c3a400;
}

写真の下に背景色をずらして表示させる方法は疑似要素を使ったものをよく見かけますが、box-shadowだけで表現することができます。

人気記事

  1. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選