html5とCSS3による装飾サンプル
html5とCSS3のサンプルの実用的なものがたくさんあります。
その一部をランダムに表示しています。 詳しくは サンプルページへどうぞ
-
＞＞テキストに蛍光ペン風マーキング テキストに装飾
サンプルテキスト ABCDEFG あいうえおかきくけこ
※ テキストに蛍光ペンでマークしたような効果の装飾をします。
[ 閉じる ]
htmlソース
<p class="text-ex19"> サンプルテキスト <em>ABCDEFG</em> あいうえおかきくけこ </p>
CSS
.text-ex19{ line-height: 1; font-size: 20px !important; /* 強制的にフォントを大きくします */ padding: 1rem; } .text-ex19 em { background: linear-gradient(transparent 30%, yellow 60%); /* マーキングする */ }
-
＞＞タイトルにアイコンをつける (border-3) アイコンで装飾
タイトルにアイコンをつける
※ CSSでボーダーを変形させてアイコンを作成しています。
borderの角の描画特性を利用したアイコンです。 画像を用意しなくて良いので便利ではあります。[ 閉じる ]
htmlソース
<h4 class="icon-ex10"> タイトルにアイコンをつける </h4>
CSS
.icon-ex10{ font-size: 20px; display: flex; align-items: center; height: 36px; } .icon-ex10::before { content: ''; box-sizing: border-box; width: 8px; height: 8px; border: 8px solid transparent; border-left: 8px solid pink; }
-
＞＞見出しの装飾 - マーカーでひいたようなラインを入れる 見出しの装飾
見出しの装飾 - マーカーでひいたようなラインを入れる
※ 背景色を利用して文字の半分のみマーカーをひいたように色をつけます。
[ 閉じる ]
htmlソース
<h4 class="background-ex6"> <span>見出しの装飾 - マーカーでひいたようなラインを入れる</span> </h4>
CSS
.background-ex6 { background: linear-gradient(transparent 50%, #fffea4 0%); }