Webデザイナーが見てよかったCodePen SPARK
こんにちは。
3年目Webデザイナーのみずです。
実装面の知識を増やしたくて、毎週火曜日に更新されるCodePen SPARKをワクワクしながら見ています✨
ということで最近みていいなと感じたCodePenを自分の記録用としてnoteにまとめました。
シャドーを複数使った立体的なタイトル文字
アメリカのポップなアニメタイトルみたいでかわいいこちらのCodePen。
左下の濃い影、右上の明るい影が輪郭を縁取っていて、文字が切り絵のように見えます。
そして距離遠めにtext-shadowを入れて立体感を出しています。
text-shadowのオフセットは ”.2ch” と指定。
chなんて単位があるんですね。
使用されるフォントの“0(ゼロ、U+0030)”の文字の送り幅を“1ch”と定義した相対単位です。
<中略>
例えば、その要素の“0”の文字の送り幅が“10px”の場合は“1ch”は“10px”、“2ch”は“20px”です。
✔️引用元
グリッドレイアウトとエンボス加工、タイトル文字のエッジの色
Webアクセシビリティマニュアル。このCodePen自体がひとつのWebページのようにまとめられています（内容は英語でわからない）。
タイトル文字のエッジに赤が使われているのがすてき。
あと画面伸長させてもまったく表示が崩れないのもいいですね。
3Dのカルーセルスライダー
立体感のある見え方がFlashを思わせる3Dカルーセル。
Awwwards系のサイトでも立体感のある制作事例紹介があった気がするので発想として持っておきたいです。
マウスを近づけると吸い付くグラビティボタン
よく見るインターフェースですがどう実装したらいいかわからず実務で使えませんでした…。
裏側はこうなっている、というコードが見れると安心感あるし取り入れやすいなあと（ただどういう原理で動いているかは理解できない🤤）
SVGのマスクを使った、燃え広がるようなインタラクション
有機的な見え方がすてきなインタラクション。
原理が掴めれば実装しやすそうだけど、このじわじわと広がるような動きはどうやって実現しているんだろう…🤔
こういう実装もできるんだ！という知識がないと、インタラクティブなWebデザインって作れないですよね。
Webデザイナーとして、実装面も知識として持っておきたいな〜と思います。
それではまた👋
この記事が気に入ったらサポートをしてみませんか？