html5とCSS3による装飾サンプル
html5とCSS3のサンプルの実用的なものがたくさんあります。
その一部をランダムに表示しています。 詳しくは サンプルページへどうぞ
-
＞＞テキストに影をつける（3） テキストに装飾
サンプルテキスト ABCDEFG
※ テキストに影をつけるサンプルです。 シャープな影をつけて立体間を出します。
[ 閉じる ]
htmlソース
<p class="text-ex3"> サンプルテキスト ABCDEFG </p>
CSS
.text-ex3{ font-size: 2.2em !important; /* 強制的にフォントを大きくします */ font-weight:bold; color: pink; text-shadow: 0.05em 0.05em 0.02em #333; }
-
＞＞背景の採色・模様 （6） - 多色のグラデーション 背景の装飾
背景の採色・模様
※ 背景をべた塗ではなくグラデーションの指定で装飾します。
[ 閉じる ]
htmlソース
<p class="background-ex9"> <span>背景の採色・模様</span> </p>
CSS
.background-ex9 { background-image: linear-gradient(to right, crimson 0%, red 30%, yellow 80%, white 100%); color: #fff; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; } .background-ex9 span{ padding-left: 10px; }
-
＞＞タイトルに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; }