html5とCSS3による装飾サンプル
html5とCSS3のサンプルの実用的なものがたくさんあります。
その一部をランダムに表示しています。 詳しくは サンプルページへどうぞ
-
＞＞タイトルにSVGでアイコンをつける(1) アイコンで装飾
タイトルにアイコンをつける（SVG-1）
※ タイトルにSVGでアイコンをつける。 このSVGはMITライセンスでの利用となります。
The MIT License (MIT) Copyright © 2019-2020 css.gg[ 閉じる ]
htmlソース
<h4 class="icon-ex3"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0519 14.8285L13.4661 16.2427L17.7088 12L13.4661 7.7574L12.0519 9.17161L13.8804 11H6.34321V13H13.8803L12.0519 14.8285Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M19.7782 19.7782C24.0739 15.4824 24.0739 8.51759 19.7782 4.22183C15.4824 -0.0739417 8.51759 -0.0739417 4.22183 4.22183C-0.0739417 8.51759 -0.0739417 15.4824 4.22183 19.7782C8.51759 24.0739 15.4824 24.0739 19.7782 19.7782ZM18.364 18.364C21.8787 14.8492 21.8787 9.15076 18.364 5.63604C14.8492 2.12132 9.15076 2.12132 5.63604 5.63604C2.12132 9.15076 2.12132 14.8492 5.63604 18.364C9.15076 21.8787 14.8492 21.8787 18.364 18.364Z" fill="currentColor" /> </svg> タイトルにアイコンをつける（SVG-1） </h4>
CSS
.icon-ex3{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex3 svg{ width: 24px; margin-right: 8px; margin-bottom: 4px; }
-
＞＞背景の採色・模様 （4） - 水玉柄 背景の装飾
背景の採色・模様
※ 水玉模様の背景パターンです。
[ 閉じる ]
htmlソース
<p class="background-ex7"> <span>背景の採色・模様</span> </p>
CSS
.background-ex7{ background-image: radial-gradient(lightblue 4px, transparent 4px); background-size: calc(20 * 1px) calc(20 * 1px); color: #333; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; border: 1px solid #aaa; } .background-ex7 span{ padding-left: 10px; }
-
＞＞背景の採色・模様 （2） - 市松 タンジロウ柄 背景の装飾
背景の採色・模様
※ 市松模様の背景パターンです。
[ 閉じる ]
htmlソース
<p class="background-ex2"> <span>背景の採色・模様</span> </p>
CSS
.background-ex2 { background-color: #a5c9c1; background-image: linear-gradient(45deg, #333 25%, transparent 0), linear-gradient(45deg, transparent 75%, #333 0), linear-gradient(45deg, #333 25%, transparent 0), linear-gradient(45deg, transparent 75%, #333 0); background-size: 30px 30px; background-position: 0 0, 15px 15px, 15px 15px, 30px 30px; color: #fff; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; } .background-ex2 span{ padding-left: 10px; }