WEB MEMO

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

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

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

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

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

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

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

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.

WEB MEMO