バナーのサンプル
「/scss/custom/_sample.scss」から「/scss/custom/_util.scss」にコピペし利用する。
セクションにありがちな背景
「/scss/custom/_sample.scss」から「/scss/custom/_util.scss」にコピペし利用する。
斜めの背景１
.bg-skew-1
斜めの背景２
.bg-skew-2
斜めの背景３
.bg-skew-3
斜めの背景４
.bg-skew-4
カーブした背景１
.bg-curve-1
カーブした背景２
.bg-curve-2
カーブした背景３
.bg-curve-3
ジクザクした背景１
.bg-jikuzaku-1
ジクザクした背景２
.bg-jikuzaku-2
ジクザクした背景３
.bg-jikuzaku-3
正三角形を配置
.bg-sankaku-1
ひし形を配置１
.bg-hishigata-1
ひし形を配置２
.bg-hishigata-2
はみ出して他要素に重なる背景
.bg-over-1
不確定要素の対角線で切り替わる背景１
.bg-taikaku-1
不確定要素の対角線で切り替わる背景２
.bg-taikaku-2
半分だけの背景１（グラデーション）
.bg-half-1
半分だけの背景２（写真）
.bg-half-2
CSSのみで作成するパターン背景
「/scss/custom/_sample.scss」から「/scss/custom/_util.scss」にコピペし利用する。
※参考サイト：https://bansal.io/pattern-css
水玉
.bg-dot-1
水玉ずらして
.bg-dot-2
ドット
.bg-dot-3
チェック柄の背景
.bg-check-1
斜めのチェック柄の背景
.bg-check-2
グリッドの背景
.bg-grid-1
三角の背景
.bg-triangles-1
ジクザクの背景
.bg-zigzag-1
ストライプ
ボックスのサンプル
slick sliderカスタマイズ
slick sliderにレイヤーアニメーションを追加
-
Test 1
Sample 1
-
Test 2
Sample 2
slick sliderのデザイン変更パターン
Panzoom
その他
テーブル：縦横ハイライト
| A | B | C | D | E |
|---|---|---|---|---|
| Sample | text | text | text | text |
| Sample | text | text | text | text |
| Sample | text | text | text | text |
テーブル：縦横ハイライト :has() での対応
| A | B | C | D | E |
|---|---|---|---|---|
| Sample | text | text | text | text |
| Sample | text | text | text | text |
| Sample | text | text | text | text |
テーブル：分岐を考慮したTH追従のサンプル
| A | B | C | D | E | F | G | H | I | |
|---|---|---|---|---|---|---|---|---|---|
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
| Sample | text | text | text | text | text | text | text | text | text |
インスタグラムのグラーデーションのロゴ
Googleマップ iframe の色変更
.gmap-mix-blend
縦横比の違う画像の高さを揃えて横並び
CSSだけでループする画像スライダー
リンク先のファイルによりアイコンを足す
円で切り抜いた角
CSSだけで構築したモーダル
テンプレートから利用頻度の低い要素をこちらに移動
マウスオーバー
hvr-blur
hvr-gray
hvr-opacity-re
hvr-blur-re
hvr-gray-re
はみ出す要素
containerから、はみ出す要素の指定。
containerが画面の中央にある時だけ有効。