html5とCSS3による装飾サンプル
html5とCSS3のサンプルの実用的なものがたくさんあります。
その一部をランダムに表示しています。 詳しくは サンプルページへどうぞ
-
＞＞文字の枠をボタン押下風エフェクト ロールオーバー
※ マウスオーバーでボタンを押したかのようにエフェクトする。 outline と borderによりアニメーション行うことで実現しています。
[ 閉じる ]
htmlソース
<p class="hover-ex2"> <a href="#">サンプルテキスト</a> </p>
CSS
.hover-ex2{ font-size: 20px; font-weight: normal; height: 32px !important; width: 200px !important; display: flex; align-items: center; } .hover-ex2 a{ display: block; width: 100%; height: 100%; padding: 8px 20px 8px 20px; background-color: #efefef; color: #333; text-decoration-line: none; line-height: 1.6; border-bottom: solid 3px #666; outline: solid 1px #666; transition: all .2s; } .hover-ex2 a:hover{ /* color: #fff; */ border-bottom: solid 1px #efefef; /* background-color: #bbb; */ transform: translateY(3px); }
-
＞＞テキストにインデントをつける テキストに装飾
サンプルテキスト ABCDEFG あかさたなはまやらわ
いきしちに うくすつぬ えけせてね おこそとの ほもよろを
※ テキストにインデントをつけ（設定）します。
この例では "1rem" のインデントを設定してあります。
インデントは一行目のみ適用されます。[ 閉じる ]
htmlソース
<p class="text-ex11"> サンプルテキスト ABCDEFG あかさたなはまやらわ<br> いきしちに うくすつぬ えけせてね おこそとの ほもよろを </p>
CSS
.text-ex11{ text-indent: 1rem; /* インデントをつける */ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; border: 1px solid #ddd; }
-
＞＞見出しを下線で装飾する（2） 見出しの装飾
見出しを下線で装飾する 方法その(2)
※ h4タグ属性のボーダーに対して太さ色で装飾をする。 色のグラデーションは green → whiteと設定
linear-gradient( グラデーションの角度または方向, 開始色, 途中色, 終了色 )[ 閉じる ]
htmlソース
<h4 class="title-ex2"> 見出しを下線で装飾する 方法その(2) </h4>
CSS
.title-ex2 { padding: 0 0 8px 0 !important; /* 本システムCSSの干渉を変更します */ border-bottom: 16px solid; border-image: linear-gradient(to right, green 0%, #fff 100%); border-image-slice: 1; display: flex; align-items: flex-end !important; /* 下線に合わせるため */ line-height: 10px; color: #333; font-size: 20px !important; font-weight: normal; }