html5とCSS3による装飾サンプル
html5とCSS3のサンプルの実用的なものがたくさんあります。
その一部をランダムに表示しています。 詳しくは サンプルページへどうぞ
-
＞＞背景の採色・模様 （5） - 格子柄 背景の装飾
背景の採色・模様
※ 格子柄の背景パターンです。
[ 閉じる ]
htmlソース
<p class="background-ex8"> <span>背景の採色・模様 </span> </p>
CSS
.background-ex8{ background-image: linear-gradient(#ccc 1px, transparent 1px),linear-gradient(to right, #ccc 1px, transparent 1px); background-size: 8px 8px; border: solid #aaa 2px; color: blue; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; } .background-ex8 span{ padding-left: 10px; }
-
＞＞背景の採色・模様 （11） - 斜線 背景の装飾
背景の採色・模様
※ 斜線の背景パターンです。
[ 閉じる ]
htmlソース
<p class="background-ex15"> <span>背景の採色・模様</span> </p>
CSS
.background-ex15{ padding: 5px; background: repeating-linear-gradient( -45deg, #ed1c24, #ed1c24 2px, #ff212a 0, #ff212a 8px ); color: #fff; }
-
＞＞見出しの装飾 - 左右にラインを入れる 見出しの装飾
見出しの装飾 - 左右にラインを入れる
※ 背景色を利用して疑似的にラインを描画します。
[ 閉じる ]
htmlソース
<h4 class="background-ex5"> <span>見出しの装飾 - 左右にラインを入れる</span> </h4>
CSS
.background-ex5 { margin-top: 12px !important; /* 本システムCSSの干渉を変更します */ position: relative; color: #333; font-size: 20px !important; font-weight: normal; display: flex; align-items: center; justify-content: center; } .background-ex5 span { position: relative; z-index: 100; display: inline-block; margin: 0 2.5em; padding: 0 1em; background-color: #fff; text-align: left; } .background-ex5::before { position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px; background-color: red; /* 線の色 */ }