text-stroke
text-shadowで対応した縁取り
部分的になんとなくボケた印象…
線幅を太くする角のすきまが目立ちます
※text-shadowを何度も重ねるとかけると綺麗な表示になりますが割愛します！ 興味がある方は調べてみてください
text-strokeで対応した縁取り
かなり綺麗に縁取りができます
線幅を太くしても不自然さがありませんね。text-strokeのみで上記のような表現が可能です
ただし、使用フォントによっては…
フォントの種類によっては重なる箇所が崩れています。
text-strokeを使用したい場合は本デザイン前に試しておきたいですね…
こんなデザインも可能に！
background-clip: text
このようにbackgroundに指定した画像を、テキストでクリッピングすることができます。このようにbackgroundに指定した画像を、テキストでクリッピングすることができます。
パララックスのように実装することもできます！ただしiOSの実機ではパララックスが再現されないので、あくまでデザインのアクセントとして使用するのがおすすめです。
line-clamp
文字数で制限
このように文字数で制限をすると、同じ文字数でも見た目が大きく異なってしまうことがあります
ここに投稿の本文などが入ります。文字数で制限すると、英語のテキストなどが入ったときは見た目で大きな差が生まれてしまいます。ここに投稿の本文などが入ります。文字数で制限すると、英語のテキストなどが入った...
The text of the post will be entered here. If you limit it by the number of characters, it will make...
行数で制限
行数で制限すると見た目が揃いますね
ここに投稿の本文などが入ります。文字数で制限すると、英語のテキストなどが入ったときは見た目で大きな差が生まれてしまいます。ここに投稿の本文などが入ります。文字数で制限すると、英語のテキストなどが入ったときは見た目で大きな差が生まれてしまいます。
The text of the post will be entered here. If you limit it by the number of characters, it will make a big difference in appearance when English text etc. are included.
コンテンツ幅が異なっても大丈夫
横幅の異なるコンテンツでも、行数で制御することで同じ見た目を維持することができます
ここに投稿の本文などが入ります。文字数で制限すると、英語のテキストなどが入ったときは見た目で大きな差が生まれてしまいます。ここに投稿の本文などが入ります。文字数で制限すると、英語のテキストなどが入ったときは見た目で大きな差が生まれてしまいます。
ここに投稿の本文などが入ります。文字数で制限すると、英語のテキストなどが入ったときは見た目で大きな差が生まれてしまいます。ここに投稿の本文などが入ります。文字数で制限すると、英語のテキストなどが入ったときは見た目で大きな差が生まれてしまいます。
ここに投稿の本文などが入ります。