html5とCSS3による装飾サンプル
html5とCSS3のサンプルの実用的なものがたくさんあります。
その一部をランダムに表示しています。 詳しくは サンプルページへどうぞ
-
＞＞画像の操作（4） ロールオーバー
※ 画像にエフェクトをかけます。 transformプロパティとfilterで行います。
マウスオーバーで画像をズームアップし、ぼかしを入れます。
アニメーションで行っています。[ 閉じる ]
htmlソース
<p class="hover-ex11"> <img src="/sysdata/images/sample/title_back1.png"> </p>
CSS
.hover-ex11 { height: 90px; width: 680px; overflow: hidden; padding: 0 !important; display: flex; align-items: center; } .hover-ex11 img{ width: 100%; transition: all .6s; } .hover-ex11 img:hover{ transform:scale(1.2,1.2); filter: blur(5px); }
-
＞＞背景の装飾 - 色塗 (1) 見出しの装飾
背景の装飾 色塗 (1)
※ 背景を色で塗ります。
[ 閉じる ]
htmlソース
<h4 class="background-ex4"> 背景の装飾 色塗 (1) </h4>
CSS
.background-ex4 { padding-left: 2rem !important; /* 本システムCSSの干渉を変更します */ background: linear-gradient(15deg, red 50%, yellow 50%); color: #fff; font-size: 20px !important; font-weight: normal; height: 56px !important; display: flex; align-items: center; }
-
＞＞見出しにbefore疑似要素でアイコンを設定する(SVG版) アイコンで装飾
見出しにbefore疑似要素でアイコンを指定する
※ before疑似要素でアイコンを指定する。
このSVGはMITライセンスでの利用となります。 Copyright TopeconHeroes ! all right reserved.
他にもアイコンがいっぱいあります。 https://icooon-mono.com/[ 閉じる ]
htmlソース
<h4 class="icon-ex8"> 見出しにbefore疑似要素でアイコンを指定する </h4>
CSS
.icon-ex8{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex8::before { content: ''; width: 20px; height: 20px; background: url('/sysdata/images/sample/constract_ico.svg') no-repeat; background-size: contain; padding-right: 8px; }