画像を表示したいときに使う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にも指定できる.
{
transform: rotateY(180deg);
}
2次元的な回転をする(CSS)
{
transform: rotate(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属性で書けって書いてあったけど…
