MENU

【コピペで使用OK！】CSSで写真や画像をおしゃれに可愛くデザインしよう！

コーディング デザイン
【コピペで使用OK！】CSSで写真を可愛くデザイン
misa

こんにちは、ウェブデザインパレットのmisaです。

CSSで写真を可愛く装飾する方法をまとめました。

どのデザインもHTMLとCSSのみで実装できます。

コピペOKなので、ぜひアレンジして使ってみてください＾＾

Contents

影をつける

写真
コードを表示
HTML
<img src="image.jpg" class="img01" alt="写真">
CSS
img01 {
    box-shadow: 20px 20px 0px rgb(218 239 116 / 80%); /* 影のオフセット、ぼかし、色、不透明度 */
}

背景をずらす

写真
コードを表示
HTML
<div class="photo-container12">
  <img src="image.jpg" class="img12" alt="写真">
</div>
CSS
.photo-container12 {
  position: relative;
  display: block;
  width: 80%;
  margin-inline: auto;
  margin-top: 60px;
  margin-bottom: 80px;
}

.img12 {
  width: 100%;
  rotate: 3deg;
}

.photo-container12::after {
  content: "";
  position: absolute;
  top: 20px;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e6e6fa;
  rotate: -10deg;
  z-index: -1;
}

グラデーションの枠線

写真
コードを表示
HTML
<img src="image.jpg" class="img02" alt="写真">
CSS
.img02 {
  border: solid 8px ;
  border-image-slice: 1; 
  border-image-source: linear-gradient(to right, #e3ffc0, #9dc2f4);
}

枠線を重ねる

写真
コードを表示
HTML
<img src="image.jpg" class="img03" alt="写真">
CSS
.img03 {
  border: 10px solid #eae2dd;
  outline: 3px solid #e8854a;
  padding: 5px;
}

斜線フレーム

写真
コードを表示
HTML
<div class="photo-container10">
  <img src="image.jpg" class="img10" alt="写真">
</div>
CSS
.photo-container10 {
  position: relative;
  width: 80%;
  display: block;
  margin-inline:auto;
  line-height: 0;
}

.photo-container10::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-image-source: repeating-linear-gradient(145deg, #e6e6fa, #e6e6fa 2px, 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;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.img10 {
  width: 100%;
}

オーバーレイを使って写真にテキストやグラデーションを追加

写真

You only live once

コードを表示
HTML
<div class="photo-container04">
    <img src="image.jpg" alt="Cute Photo" class="img04" alt="写真">
    <div class="overlay">
      <p>You only live once</p>
    </div>
</div>
CSS
.photo-container04 {
  position: relative;
  display: block;
  width:80%;
  margin-inline:auto;
  line-height: 0;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient( 135deg, rgba(246, 255, 0, 0.3), rgba(255, 0, 161, 0.3));
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  font-family: serif;
}

.img04 {
  width: 100%;
}

ポラロイド風の写真

写真

You only live once

コードを表示
HTML
<div class="photo-container05">
    <img src="image.jpg" class="img05" alt="写真">
    <div class="caption">
      <p>You only live once</p>
    </div>
</div>
CSS
.photo-container05 {
  position: relative;
  display: block;
  width:60%;
  margin-inline:auto;
  line-height: 0;
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.caption {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
  color: #555;
  font-family: cursive;
}

.img05 {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

ペーパーフォトフレーム

写真
コードを表示
HTML
<div class="photo-container11">
  <img src="image.jpg" class="img11" alt="写真">
</div>
CSS
.photo-container11 {
  position: relative;
  width: 80%;
  display: block;
  margin-inline:auto;
  line-height: 0;
  background-color: #fff;
  padding: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.photo-container11::before {
  top: 42px;
  left: 30px;
  border-bottom: solid 1px #a9a9a9;
}

.photo-container11::after {
  bottom: 42px;
  right: 30px;
  border-top: solid 1px #a9a9a9;
}

.img11 {
  width: 100%;
}

文字入れ①

写真

LIFE is
BEAUTIFUL

Because of love,
life is beautiful.

コードを表示
HTML
<div class="photo-container13">
  <img src="image.jpg" class="img13" alt="写真">
  <div class="text-wrap13">
    <p class="text13">LIFE is<br>BEAUTIFUL</p>
    <p class="sub-text13">Because of love,<br>life is beautiful.</p>
  </div>
</div>
CSS
.photo-container13 {
  position: relative;
  display: block;
  width: 100%;
  margin-inline:auto;   
}

.img13 {
  display: block;
  width:60%;
  margin-inline:auto;   
  border: 80px solid #DDDDD5;
  padding: 2px;
}

.text-wrap13 {
  position: absolute;
  display: block;
  top: 50%;
  left: 200px;
  translate: 0 -50%;
}

.text13 {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.5;
}

.sub-text13 {
  font-size: 0.6em;
  font-weight: 100;
  line-height: 1.5;
  padding-top: 10px;
}

文字入れ②

写真

Let the summer
adventures begin

コードを表示
HTML
<div class="photo-container14">
  <img src="image.jpg" class="img14" alt="写真">
  <p class="text14">Let the summer<br>adventures begin</p>
</div>

<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=League+Script&display=swap" rel="stylesheet">
CSS
.photo-container14 {
  position: relative;
  display: block;
  width: 80%;
  margin-inline:auto;   
}

.img14 {
  display: block;
  width: 100%;
  margin-inline:auto;   
}

.text14 {
  position: absolute;
  top: 40px;
  left: 20px;
  font-size: 3.3em;
  font-weight: bold;
  line-height: 1.3;
  color: #fff;
  rotate: -12deg;
  font-family: "League Script", cursive;
}

反射エフェクト

コードを表示
HTML
<div class="photo-container06">
  <div class="img06"></div>
</div>
CSS
.photo-container06 {
  position: relative;
  display: block;
  line-height: 0;
  margin-bottom: 430px;
}

.img06 {
  border-radius: 10px;
  width:600px;
  height: 400px;
  background-image: url("./image.jpg");
  background-size: cover; 
  margin-inline:auto;   
}

.img06::after {
  content: "";
  display: block;
  width:600px;
  height: 400px;
  background: inherit;
  position: absolute;
  top: 100%;
  opacity: 0.4;
  transform: scaleY(-1);
  filter: blur(3px);
  margin-inline:auto;
}

ハート型に切り抜き

コードを表示
HTML
 <div class="img07"></div>
CSS
.img07 {
  width: 400px;
  height: 400px;
  background-image: url('./image.jpg');
  background-position: center;
  background-size: cover;
 clip-path: path('M200,60 C120,14 0,14 0,152 C0,262 200,380 200,380 C200,380 400,262 400,152 C400,14 280,14 200,60 Z');
  margin-inline: auto;
}

レトロフィルター

写真
コードを表示
HTML
<img src="image.jpg" class="img08" alt="写真">
CSS
.img08 {
  width: 80%;
  filter: sepia(40%) saturate(1.2) contrast(0.8) brightness(1.1);
  display: block;
  margin-inline:auto;
}

モノクロエフェクト

写真
コードを表示
HTML
<img src="/wp-content/uploads/2024/08/q.jpg" class="img09" alt="写真">
CSS
.img09 {
  width: 80%;
  display: block;
  margin-inline:auto;
  filter: grayscale(100%);
}

まとめ

今回は、コピペで使用できるおしゃれでかわいい写真のCSS装飾をまとめました。

ぜひ、アレンジして使ってみてくださいね＾＾

ボタンデザインや見出しデザインの記事もぜひご覧ください👇💛

あわせて読みたい
【コピペで使用OK！】シンプルでおしゃれなCSSボタンデザイン（ホバーアニメーション付き） こんにちは、ウェブデザインパレットのmisaです。 シンプルでおしゃれなボタンのデザインをまとめました。 どのボタンもHTMLとCSSのみで表示できます。ホバーアニメーシ…
あわせて読みたい
【コピペで使用OK！】シンプルでおしゃれな見出しデザイン こんにちは、ウェブデザインパレットのmisaです。 シンプルでおしゃれな見出しデザインをまとめました。 どの見出しもHTMLとCSSのみで表示できます。 コピペOKなので、…

では、また～✨

コーディング デザイン
CSS HTML コピペ用コード デザイン 画像 装飾

ABOUT ME

misaのアバター misa

現役インハウスWebデザイナー。
35歳、2児の母。
今までの経験を活かし、コーディングやWebデザインについての情報を発信しています。

RELATED POST

Contents