CSSで写真を装飾する
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-sourceのrepeating-linear-gradientで斜線のスタイルを指定。border-image-sliceとborder-width、width、heightを同じ数値にすることで写真の境界線の上に斜線枠がのるように設定しています。
切り込み
.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だけで表現することができます。
