おしゃれで簡単で実用的なテクニックを教えてくれる＜w3schoolのHowTo＞

w3schoolの一つのコーナーで、HTML5のほぼすべての機能（ライトボックス、マップ、ボタン、リストなど）をサンドボックスの形で、サンプルコード付きで分かりやすく説明。

https://www.w3schools.com/howto/

写真のスライドショー

See the Pen jmZBZb by darkorcale (@darkorcale) on CodePen.

CARD表示について

See the Pen card view by darkorcale (@darkorcale) on CodePen.

cardのcontainerは「position:relative;」で設定しています。
cardの中のimageは「position:absolute;」で設定しています。
imageは「z-index:-1;」を設定しているので、testはimageよりも前に表示されます。
ついでにcardにマウスのカーソルを合わせると浮き効果をつけています。

プロモーションなどに使えるグラデーション×枠付き背景

See the Pen body background color gradation by darkorcale (@darkorcale) on CodePen.

• HTML×CSSのみで構成
• 画面全体に白い枠
• 背景にはグラデーション×アニメーション
• 背景画像（鳥、都市）は画面サイズ変動に連動