html5とCSS3による装飾サンプル
html5とCSS3のサンプルの実用的なものがたくさんあります。
その一部をランダムに表示しています。 詳しくは サンプルページへどうぞ
-
＞＞タイトルにアイコンをつける (border-2) アイコンで装飾
タイトルにアイコンをつける
※ CSSでボーダーを変形させてアイコンを作成しています。
画像を用意しなくて良いので便利ではあります。[ 閉じる ]
htmlソース
<h4 class="icon-ex2"> タイトルにアイコンをつける </h4>
CSS
.icon-ex2 { font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex2::before { content: ''; width: 14px; height: 14px; border: 5px solid pink; background-color: #ffffd6; /* 白抜きの場合ここは#fff */ margin-right: 8px; }
-
＞＞見出しの装飾 - 左右にラインを入れる 見出しの装飾
見出しの装飾 - 左右にラインを入れる
※ 背景色を利用して疑似的にラインを描画します。
[ 閉じる ]
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; /* 線の色 */ }
-
＞＞画像の操作（3） ロールオーバー
※ 画像にエフェクトをかけます。 filterプロパティで行います。
この例では背景画像に対し明度をとコントラストを上げ露光オーバーにし、さらにぼかしをかけています。
エフェクトはアニメーションで行っています。[ 閉じる ]
htmlソース
<p class="hover-ex7"> </p>
CSS
.hover-ex7 { height: 90px; width: 680px; box-sizing: border-box; background-image: url('/sysdata/images/sample/title_back1.png'); background-repeat: no-repeat; background-size: cover; background-position: center; transition: all .6s; } .hover-ex7:hover{ filter: contrast(150%) brightness(280%) blur(5px); }