これまで幾つものホームページを制作してきましたが、ホームページを作る時って、
サーバー、システム、プログラム、コーディングも重要だけど、やっぱりデザインやマーケティング知識って知らないとショボサイトになりがちですよね。
今お手伝いさせてもらっているサイトは、システムがボロボロの平成初期ぐらいのまだスマホがない時代からのシステムをそのまま使っている組織で、
デザイン思考もとても古臭くて、話をしていても時代錯誤を感じてしまうほどで、
色々な用語や今時思考を合わせるのに毎日苦労しています。
今回はそんな愚痴を言う日記ではなく、その会社のデザイナーが作ったデザイン仕様を的確にCSSでコーディングしようとした時に、
なんかCSSのテキストの扱いって思った通りにならんな〜と思って、色々調べて行き着いた最終盤を、ブログに備忘録しておきます。
テキスト効果のいろいろ
そもそも、デザインに似せるために色々な表現をしますが、個人的な思考としては次のようなモノがあります。画像素材
逃げのデザイン（ユゲ的に言うと）は、画像素材をそのまま使用して、Webページの表示データ量を増やす方式です。 写真素材などは、画像を使わざるを得ませんが、 ページ内で何度も使い回すアイコンのようなものも、単色デザインであればできる限りSVGで構築するのがいいのですが、複数表示の場合は画像もアリっちゃあアリです。台座か影か？
動画や画像の上に被せるように文字を載せる時に、台座を用意するか、影をつけることで、どんな背景になっても絶対に読みやすい文字を表現できます。
台座パターン
影付けパターン
/* 台座 */
padding:10px;
background-color:rgba(255,255,255,0.5);
color:black;
/* 影付け */
color:white;
text-shadow:2px 2px 0px black;
グロー効果
color:black;
text-shadow:0 0 10px red;
特に印象的に見せたい場合は、文字の周りを色で囲うように、影付けをすれば、色々な表現ができるようになります。
上記は、不思議な感じの印象をだせますね。
テキストグラデーション
background: linear-gradient(to right, #f00, #0f0, #00f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
文字にグラデーションを入れることで、色々な箇所に馴染ませたり、単一になりすぎない効果が見込めます。
アウトライン
font-size:2.0em;
font-weight:bold;
color: white;
text-shadow: 0 0 2px black;
少し強調したような引用を持たせられます。
カラフルに変化する文字
.selector{
font-size:2.0em;
font-weight:bold;
animation: rainbow 5s infinite;
}
@keyframes rainbow {
0% { color: red; }
25% { color: orange; }
50% { color: green; }
75% { color: blue; }
100% { color: red; }
}
色が周期的に変わるので、ネオンサインのような効果が出せます。
グラデが動く文字
.selector{
font-size:2.0em;
font-weight:bold;
background: linear-gradient(90deg, red, blue, green, red);
background-size: 300%;
animation: moveGradient 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes moveGradient {
0% { background-position: 0% }
100% { background-position: 100% }
}
単色だけじゃなく、グラデーションもアニメーションで動かせちゃいます。
text-shadowがなんだかショボく感じたら
text-shadowって、どうも、グローの色味が弱いな〜と思っていたら、 強調できる書き方がありました。強調されたグロー効果
text-shadow:
2px 2px 5px red,
-2px 2px 5px red,
2px -2px 5px red,
-2px -2px 5px red;
複数の影表現を書くことができて、上下左右にそれぞれ影を配置することで、結果太く表現できているようです。
ちなみに、毎回これを書くのがめんどくさかったので、個人的には以下のように変数かしてつかっています。
--blur-color : red;
--blur-size : 2px;
--blur-shift : 5px;
text-shadow:
calc(var(--blur-shift) * 1) calc(var(--blur-shift) * 1) var(--blur-size) var(--blur-color),
calc(var(--blur-shift) * -1) calc(var(--blur-shift) * 1) var(--blur-size) var(--blur-color),
calc(var(--blur-shift) * 1) calc(var(--blur-shift) * -1) var(--blur-size) var(--blur-color),
calc(var(--blur-shift) * -1) calc(var(--blur-shift) * -1) var(--blur-size) var(--blur-color);
0 件のコメント:
コメントを投稿