【CSS】ドットを使って背景にノイズ質感をプラスする方法
1773
この記事を書いている人
こんちゃです〜。
ドットを使って背景にノイズをかける方法を紹介します。
背景にノイズって？
と言葉ではピンとこないと思うので、早速こちらをご覧ください
制作イメージ
例えばこんな感じで画像があったとします。
そして、ドットの箱を作ります。
こちらを透明度を下げて重ねると、こんな感じです。
ちょっとアナログ感を出したい時とかに使えると思いますー！
では、コードを見ていきまセウ。
ドットを作るコード
.dot {
background-image: radial-gradient(#232946 69%, #fff 70%);
background-size: 3px 3px;
}radial-gradientというのを使ってください。
色とか、サイズとかを触ってみてください。
.dot {
background-image: radial-gradient(#4fcfe0 20%, #fff 0);
background-size: 10px 10px;
}触ってみるとこんな感じのドットも出来ます。
[コピペ用]画像に重ねる方法
画像にclassをつけてください。
<figure class="dot-img"><img src="" alt=""></figure>この画像の上に、positionでドット背景を配置します。
.dot-img {
position: relative;
}
.dot-img::before {
content: "";
width: 100%;
height: 100%;
background-image: radial-gradient(#232946 69%, #fff 70%);
background-size: 3px 3px;
position:absolute;
top:0;
left:0;
opacity:.24; /* 透明度 */
}最後のopacityで、ドットの濃さを調整してみてください。
これで遊んでみてください〜
いいなと思ったら
TAPしてね♡↓
【CSS】ボーダーを使わないclip-pathで作る三角形 【コピペ用】CSSでドットを作るコード
コメントは承認後に表示されます。