HP・LP制作でいつか使うかもしれないCSSネタ

Designer girl

CSSのみで作れるドロワーメニュー

CSSのみで作れるってとこが良いですね。

See the Pen
drawer menu
by himeka223 (@himeka223)
on CodePen.

スクロールすると見出しを固定

用語集とかで「あ行」とk、ライムラインページの時に「2000年」とかで見出し固定するとか良いかも

See the Pen
Sticky Heading
by Mana (@manabox)
on CodePen.

スクロールすると見出しを固定ver2

上のやつ同様に使えそう

See the Pen
Pretty Sticky
by Burmese Potato (@BurmesePotato)
on CodePen.

スクロールに合わせて蛍光マーカーがアニメーション表示

LPなんかで目立たせたい文言にあてると効果的になりそうね。

See the Pen
Mark text effect on scroll w/ IO
by kachibito (@kachibito)
on CodePen.

アニメーションするグラデーションボーダーライン

実は動いているのね!ってなるとオシャレかも。

See the Pen
CSS Rainbow Gradient Border (Animated)
by Bramus (@bramus)
on CodePen.

ストライプのボーダー

ボーダーのバリエーションが増えるね

See the Pen
Stripe border
by Mana (@manabox)
on CodePen.

CSSで実装するモーダル

ページ内で「●●●とは?」ってリンク設置してモーダルウィンドウを出すことがたまーにあるので使えそう。

See the Pen
CSS Typing Effect
by Marko (@denic)
on CodePen.

CSSだけでタイピングのエフェクト

ヒーローヘッダー内でメッセージなんかをタイピング表示させると良いね。JS使ってやったことはあるけどCSSオンリーだから軽量ぽくいいね。

See the Pen
CSS Typing Effect
by Marko (@denic)
on CodePen.

縦書きの文章

いつか使ってみたいなぁ

See the Pen
Vertical in write mode A
by yochans (@yochans)
on CodePen.

RELATED POSTS