この記事では、CSSで画像に様々のスタイルを付けて、いくつかおしゃれなデザインを紹介します。画像を目立たせたい場合や他の画像とデザインで差別化する際などに使ってみて下さい。
基本的にはCSSをコピペするだけで反映されます。しかしclassの付与はご自身で行って下さい。
使い方
- デザインを変えたい画像に指定のCSS classを追加する
- 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パターン！!」でした。
今後も暇さえあればいろんなパターンを増やしていく予定ですのです。
色々と参考になって頂けたら幸いです。
デザイン見本まとめ
他のデザイン見本もいくつか用意しています。合わせてどうぞ。
