カテゴリ別に表示出来ます
-
＞＞画像の操作（1） ロールオーバー
※ 画像にエフェクトをかけます。 filterプロパティで行います。
この例では背景画像に対し 透過度を40％にしてモノクロにしています。
エフェクトはアニメーションで行っています。[ 閉じる ]
htmlソース
<p class="hover-ex5"> </p>
CSS
.hover-ex5 { 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-ex5:hover{ filter: grayscale(100%) opacity(40%); }
-
＞＞見出しを四角い枠で囲う 見出しの装飾
見出しを四角い枠で囲う
※ 見出しを四角い枠で囲います。 太さ、色、べた塗りなどいろいろ可能です。
[ 閉じる ]
htmlソース
<h4 class="title-ex7"> 見出しを四角い枠で囲う </h4>
CSS
.title-ex7{ padding: 12px 20px !important; /* 本システムCSSの干渉を変更します */ color: #333; border: solid 2px lightgray; color: #333; font-size: 20px !important; font-weight: normal; }
-
＞＞見出しを四角い2重枠で囲う 見出しの装飾
見出しを四角い２重枠で囲う
※ 2重線を周りに引くのに outlineを利用する。
[ 閉じる ]
htmlソース
<h4 class="title-ex12"> 見出しを四角い２重枠で囲う </h4>
CSS
.title-ex12{ padding: 12px 20px !important; /* 本システムCSSの干渉を変更します */ color: #333; border: solid 1px #666; outline: solid 1px #666; outline-offset: -9px; color: #333; font-size: 20px !important; font-weight: normal; }
-
＞＞画像の操作（2） ロールオーバー
※ 画像にエフェクトをかけます。 filterプロパティで行います。
この例では背景画像に対し ポジ・ネガ反転します。
エフェクトはアニメーションで行っています。[ 閉じる ]
htmlソース
<p class="hover-ex6"> </p>
CSS
.hover-ex6 { 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-ex6:hover{ filter: invert(200%); }
-
＞＞見出しを四角い枠で囲い淡い色を付ける 見出しの装飾
見出しを四角い枠で囲う
※ 見出しを四角い枠で囲い淡い色を付けグラデーションをかけます。
文字も白色で影をつけることにより刻印感をだします。[ 閉じる ]
htmlソース
<h4 class="title-ex8"> 見出しを四角い枠で囲う </h4>
CSS
.title-ex8{ border: solid #ccc 1px; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 1); color: #333; font-size: 20px !important; font-weight: normal; display: flex; align-items: center; height: 54px; padding-left: 12px; }
-
＞＞画像の操作（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); }
-
＞＞画像の操作（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); }
-
＞＞見出しの装飾 角丸枠をつける 見出しの装飾
見出しに角丸の枠
※ 見出しに角丸の枠をつけます。
[ 閉じる ]
htmlソース
<h4 class="title-ex5"> 見出しに角丸の枠 </h4>
CSS
.title-ex5 { padding: 10px 10px 10px 18px !important; /* 本システムCSSの干渉を変更します */ border: solid 3px lightgray; border-radius: 0.5em; color: #333; font-size: 20px !important; font-weight: normal; display: flex; align-items: center; }
-
＞＞タイトルの装飾 定番の 付箋風見出し 見出しの装飾
見出しの装飾 付箋風見出し
※ 定番の付箋風見出しです。
[ 閉じる ]
htmlソース
<h4 class="title-ex15"> 見出しの装飾 付箋風見出し </h4>
CSS
.title-ex15 { margin-top: 16px !important; /* 本システムCSSの干渉を変更します */ padding: 0 0 0 8px !important; /* 本システムCSSの干渉を変更します */ border-left: solid 8px pink; color: #333; font-size: 20px !important; font-weight: normal; height: 26px !important; }
-
＞＞タイトルの装飾 定番の付箋風見出し 見出しの装飾
見出しの装飾 付箋風見出しライン付き
※ 定番の付箋風見出しにラインをつけたものです。
[ 閉じる ]
htmlソース
<h4 class="title-ex16"> 見出しの装飾 付箋風見出しライン付き </h4>
CSS
.title-ex16{ margin-top: 16px !important; /* 本システムCSSの干渉を変更します */ padding: 0 0 0 8px !important; /* 本システムCSSの干渉を変更します */ border-left: solid 8px pink; border-bottom: solid 1px #ccc; color: #333; font-size: 20px !important; font-weight: normal; height: 26px !important; }