はじめに
webページを作成するときに、見出しの行頭にアイコンがあると見栄えが良くなるなと感じたので、使えそうなcssのクラスをこの記事に記録しておきます。
色やサイズは適宜変更してください。
使い方の例は以下の通りです。
<p class="設定するクラスの名前">ここにテキストを書く</p>wordpressのようなCMSを使っているときは、別でcssクラスの設定の仕方があると思うので、それに従ってください。
gradient-bar-left
上下方向のグラデーションが付いた縦棒です。
.gradient-bar-left {
position: relative;
padding-left: 1.5em;
}
.gradient-bar-left::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 5px;
background: linear-gradient(to bottom, #ff7e5f, #feb47b);
border-radius: 5px;
}
dot-left
丸アイコン（ドット）です。
箇条書きに合いそう。
.dot-left {
position: relative;
padding-left: 1.5em;
}
.dot-left::before {
content: "";
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
width: 10px; height: 10px;
background: #4a90e2;
border-radius: 50%;
}
triangle-left
矢印的な右向きの三角形です。
.triangle-left {
position: relative;
padding-left: 1.5em;
}
.triangle-left::before {
content: "";
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
width: 0; height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #e94e77;
}
square-left
小さな四角形です。
少しだけ角が丸みを帯びています（border-radiusの数値で調節可能）。
.square-left {
position: relative;
padding-left: 1.5em;
}
.square-left::before {
content: "";
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
width: 12px; height: 12px;
background: #2ecc71;
border-radius: 3px;
}gradient-box-left
縦長の長方形の左上と右下を丸くしています。
左右方向にグラデーションがあります。
.gradient-box-left {
position: relative;
padding-left: 1.5em;
}
.gradient-box-left::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 10px;
background: linear-gradient(to right, #4a90e2 0%, rgba(74,144,226,0) 100%);
border-radius: 30px 0 30px 0;
}
おわりに
クラス名にleftが付いているのは、行の左にアイコンを挿入することが分かるようにするためです。
他にも良い図形が現れたら更新しようと思います。
コメントを残す