【コピペOK】CSSで画像をおしゃれに!全6パターン!!

Coding

この記事では、CSSで画像に様々のスタイルを付けて、いくつかおしゃれなデザインを紹介します。画像を目立たせたい場合や他の画像とデザインで差別化する際などに使ってみて下さい。

基本的にはCSSをコピペするだけで反映されます。しかしclassの付与はご自身で行って下さい。

使い方

  1. デザインを変えたい画像に指定のCSS classを追加する
  2. CSSをスタイルシートにコピペ

注意点

classは各々別の名前にしています。当ブログでは被ることはありませんが、自信で追加したclass名とかぶっていた場合は表示崩れが起きます。その場合は任意のclassに書き換えて下さい。

▼基本の形

<img src="https://ka123m0810.xsrv.jp/wp-content/uploads/2020/07/CSSテスト.jpg" alt="" class="imgstyle">

上記のHTMLが今回のデザイン作成の基本の形とします。
class="imgstyle"の部分を指定のものに変更して下さい。

【コピペOK】CSSで画像をおしゃれにしよう!!

ここからコピペでOKです。
基本は、下記のルールに則ってコピペして下さい。

①下記の基本HTMLを使用。「ここに画像のパス.jpg」を入れたい画像のものに変更する。

<img src="ここに画像のパス.jpg" alt="" class="ここに指定クラスを入力">

②下記の「指定クラス」の内容をHTMLの「ここに指定クラスを入力」の部分に記述。
(特例パターンがある場合もあり)

指定クラスXXXXXX

③当記事のデザインCSSをスタイルシートにコピペ。

ボーダー+シャドウ

写真の周りに線を引き、影を付けます。

<style>
.imgstyle1 {
  border: solid 1px #333;
  box-shadow: 3px 3px 3px #999;
}
</style>
指定クラス.imgstyle1

丸く

画像を丸く型取ります。

<style>
.imgstyle2 {
  border-radius: 50%;
  height: 180px;
  width: 180px;
}
</style>
指定クラス.imgstyle2

傾ける

画像をひし形になるように傾けます。

.imgstyle3 {
  width: 200px;
  height: 200px;
  margin: 83px 40px;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  max-width: 566px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
指定クラス.imgstyle3

文字を入れる

画像の上に任意のテキストを乗っけます。

文字を重ねる

p.pkasane {
color: #fff; background-color: red;
position: relative; top: 150px; z-index: 2;
text-align: center;
width: 71%;
}
img.imgstyle4 {
position: relative; z-index: 1;
}
@media (max-width: 575px) {
 p.pkasane {
 position: relative; top: 100px; z-index: 2;
 width: 100%;
}}

マスク(切り抜き)

画像に画像を重ねて、その型に切り抜きます。

.imgstyle5 {
  -webkit-mask-image: url('/wp-content/uploads/2020/05/same.png');
  mask-image: url('/wp-content/uploads/2020/05/same.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

@media screen and (max-width:575px) {
.imgstyle5 {
  -webkit-mask-image: url('/wp-content/uploads/2020/05/same-e1589018206567.png');
  mask-image: url('/wp-content/uploads/2020/05/same-e1589018206567.png');
}}
指定クラス.imgstyle4

画像にグラデーション

画像の上にグラデーションカラーを乗っけます。

.imgstyle6 {
  padding: 12em 10em;
  display: block;
  background: linear-gradient(-45deg, rgba(88, 207, 251, .7), rgba(240, 255, 0, .7)) ,url(/wp-content/uploads/2020/07/画像スタイル-530x298.jpg);
  background-size: cover; 
}
指定クラス.imgstyle5
特例パターンCSSから画像読み込み

以上が「【コピペOK】CSSで画像をおしゃれに!全6パターン!!」でした。

今後も暇さえあればいろんなパターンを増やしていく予定ですのです。
色々と参考になって頂けたら幸いです。

Udemyなら一早く一流のエンジニアになれます。
約10万の中から選べる完全買い切り型のオンライン教材だから無駄なく学べて、尚且つ非常に分かりやすく効率的です。
普段のネットショッピングの様にカートに入れてレジに進む。たったこれだけで一流への一歩を歩めます。

▶︎ 世界最大級のオンライン学習サイトUdemy

デザイン見本まとめ

他のデザイン見本もいくつか用意しています。合わせてどうぞ。

2020年7月8日CodingCSS,Reference,WEB

Posted by KT