9月になると、友達の輪では新学期の渋滞を自慢する人以外は、履歴書を自慢する人ばかり。私のいとこは今年大学4年生で、先日の深夜にスクリーンショットを送ってきて、30社以上に応募したけど既読はほとんどなく、面接なんて影も形もないと言っていました。彼女にポートフォリオを送ってもらって見てみると、ページはきれいに作られていましたが、きれいすぎて——まるで白湯のように、見終わっても何も記憶に残らないものでした。
実は多くの学生がこの点でつまずいています：技術は悪くないし、レイアウトも整っているのに、ポートフォリオに「記憶点」がないのです。面接官は1日に何十枚も見るので、目はすでに疲れています。あなたがすべきはページを埋め尽くすことではなく、細部でそっと後押しして、彼の視線をあなたの作品にもう2秒留まらせることです。影は、最も安価で最も早く効果が出るその後押しなのです。
影を軽く見てはいけません。カードの下に少し加えるだけで、それは平面から「浮き上がり」ます；ボタンの横に少し加えるだけで、指がまだ触れていないのに、心はもう押せると感じます；アバターに少し加えるだけで、全体の輪郭が引き締まります。これはコンテンツを邪魔せず、しかし密かに面接官に伝えます：この人は細部に感性があると。
しかし、手書きのbox-shadowは本当に苦痛です。パラメータが山ほどあり、xオフセット、yオフセット、ぼかし半径、拡散半径、色の透明度、一つの数値を変えるとカード全体の印象が変わります。以前、カードの影を調整するのに20回以上試行錯誤し、最後には諦めてデフォルトを使いました。後に「CSS影生成器」という小さなツールを見つけ、スライダーをドラッグするだけでリアルタイムに効果を確認でき、左で調整し右でプレビュー、満足したらコードを直接コピーできます。その感覚はまるで手回し窓から電動窓に変わったかのようでした。
具体的な使い方？ツールを開き、まず影のタイプを選びます——通常の投影、内側の影、または多層の重ね合わせ。あの高級な浮遊感を出すには、通常2〜3層を重ねる必要があります：大きくて淡い層で環境光を作り、小さくて深い層で接触影を作ります。色は純黒ではなく、深い青や深い灰色を使い、透明度を10%から20%の間に抑えると、通気性のある効果が出ます。ぼかし半径は大きめに、拡散半径は小さめかマイナスにすると、エッジがよりきれいに収まります。
ポートフォリオのどこに加えるべきか？ファーストビューのメインカードには、柔らかい外側の影を加えて背景から際立たせます。プロジェクトリストのサムネイルには、軽い内側の影を加えて額縁のくぼみ感を模倣します。ナビゲーションバーが固定されるとき、下部に細い影を入れてユーザーに「ここにいるよ」と伝えます。また、モーダル、ドロップダウンメニュー、フローティングボタンは、影の頻出使用エリアです。ただし、一つの原則を覚えておいてください：一つのページ内で影の「性格」は統一されるべきです。すべて硬い短い影にするか、すべて柔らかい散った影にするか、混ぜてはいけません。
加えすぎると汚く見えると心配する学生もいます。実は判断基準は簡単です：目を細めて見て、影がコンテンツの主役を奪っていたらやりすぎです；目を閉じてから開けて、ページの階層がはっきりし、主次が明確なら正解です。影はコンテンツに奉仕するもので、技術を誇示するためのものではありません。
秋採用のこと、実力は切り札ですが、履歴書とポートフォリオはノックの磚です。磚が少し見栄えよければ、扉は少し早く開きます。10分かけてCSS影生成器でポートフォリオの重要な要素を調整するのは、手間はかかりませんが、面接官が画面をスクロールするとき、指が止まるかもしれません。止まれば、あなたのコードの背後にあるものを見せるチャンスが生まれます。
11月になって9月に直さなかったことを後悔しないでください。今すぐスライダーを2回ドラッグしてください、本当に、履歴書を10通多く出すより効果的です。