画像のためのimgタグ関連で簡単にできることとかよく使うプロパティ

画像を表示したいときに使うimgタグ関連で簡単にできることとかよく使うCSSまとめた.正直imgタグじゃなくても使えるものが多いとは思うけど、まぁ備忘録として.

あと一部はCSSじゃなくてjsライブラリを使うのもあります.

 

角丸の画像にする(CSS)

border-radius:5px;

完全な丸の画像にする(CSS)

幅と高さが同じ画像を前提にしたときに

border-radius:50%;

影を落とした画像にする(CSS)

box-shadow:3px 3px 3px rgba(0, 0, 0, 0.2);

縁をつけた画像にする(CSS)

border:solid 2px black;

中央に配置する(CSS)

外側のdivのCSSに対して

{
text-align:center;
}

透明度を変えて薄くする(CSS)

opacity:0.5;

ロードを遅くする/読み込みを遅らせる(JavaScript)

lazyload.js等を使用して遅延読み込みにする.

https://github.com/verlok/lazyload 等を参考

マウスを重ねるとアニメーションする(CSS)

0.2sで画像サイズを1.2倍の大きさにする.

img{
transition: all .2s ease-in-out;
}

img:hover{
transform: scale(1.2);
}

3次元的な回転をする(CSS)

今回は左右が反転しただけに見える.何degreeにも指定できる.

{
transformrotateY(180deg);
}

2次元的な回転をする(CSS)

{
transformrotate(180deg);
}

画像を指定する(CSS3)

src属性以外でも指定することができる. CSS3であることに注意

{
content: url(“image.png”);
}

エフェクトをかける:グレースケールにする(CSS)

{
filter: grayscale(50%);
}

エフェクトをかける:ブラーをかける(CSS)

{
filter: blur(3px);
}

画像がないときにNOT FOUND画像を表示する(JavaScript)

https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali

にて紹介されていた方法.

onerror=”this.src=’notfound.png'”

imgタグのサイズはwidth属性またはheight属性で指定すべきなのかどうか私はわかっていないです… あるページではCSSでは画像が読み込めるようになるまで無理だから、width属性で書けって書いてあったけど…

About the author

コメントを残す