【コピペ用】CSSでドットを作るコード
1652
この記事を書いている人
コピペするだけで使えるドットパターンを紹介します。
[目次]
HTML
<div class="dot"></div>HTMLは全て上記で統一です。
こちらのHTMLを使って、CSSは使いたいパターンのコードをご利用ください。
どの記事の内容もそうなのですが、ご不明点あればお気軽にコメントにてご質問くださいませ
ドットパターンまとめ
パターン1
.dot {
background-image: radial-gradient(#77A0D1 30%, #fff 0);
background-size: 4px 4px;
}パターン2
.dot {
background-image: radial-gradient(#F0C0C4 30%, #fff 0);
background-size: 10px 10px;
}パターン3
.dot {
background-image: radial-gradient(#908886 10%, #transparent 0);
background-size: 10px 10px;
}パターン4
.dot {
background-image: radial-gradient(#908886 10%, #c1e0d6 15%);
background-size: 10px 10px;
}パターン5
.dot {
background-image: radial-gradient(#908886 10%, #b9dde0 15%);
background-size: 10px 10px;
}どんな風に使えるか
これだけ教えられてもどうやって使うねん
と思ったあなた！！！
これをどんな風に使えるかやってみます。
普通に背景に指定する
.dot_area {
background-image: radial-gradient(#eefcd9 10%, #b9dde0 15%);
background-size: 10px 10px;
padding:2em;
}写真のアクセントに使う
（ちなみにこの画像はCanvaにて無料で使えます
Canvaテンプレートへ）
画像にimg-dotというclassをつけています。
.img-dot {
position: relative;
margin-bottom: 50px;
}
.img-dot::before {
content: "";
width: 65%;
height: 140px;
background-image: radial-gradient(#6F4BBF 25%, transparent 0);
background-size: 10px 10px;
position:absolute;
right: -30px;
bottom: -14px;
z-index:-1;
}写真の上に重ねる
こちらは、前回の記事をご覧ください。
見出しにつける
Content
<div class="headline">Content</div>.headline {
position: relative;
}
.headline::before {
content: "";
width: 60px;
height: 60px;
border-radius:50%;
background-image: radial-gradient(#b9dde0 25%, transparent 0);
background-size: 10px 10px;
position:absolute;
left:-30px;
top:-20px;
z-index: -1;
}色々応用して使ってみてください
他に思いついたらまた追記しま〜す。
いいなと思ったら
TAPしてね♡↓
【CSS】ドットを使って背景にノイズ質感をプラスする方法 【CSS】テキストを順番にフェードインするアニメーション
コメントは承認後に表示されます。