大文字のアウトラインストローク（ぼんやり）

大きな文字のシャドーを使って文字のアウトラインのストローク幅を大きくする錯覚を作り出すためのテキストシャドートリックを使用しています。私のニーズのためにあるように、それは動作しますが、私は最近、SASSを使用し始め、私の現在のCSSルールを変換することが可能であった場合には思っていた：大文字のアウトラインストローク（ぼんやり）

#title { 
top:10px; 
left:-30px; 
color:white; 
transform: scale(.8,1); 
position: absolute; 
font-size: 100px; 
font-weight: bold; 
text-transform: uppercase; 
-webkit-font-smoothing: antialiased; 
text-shadow: 0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%); }

SASSのループ制御のために使用してはるかに短いものに。

これまでのところ、複数のルールを作成するためにforループを使用する方法について説明しましたが、まだ1つのルールの複数のプロパティを作成する方法はありません。可能であれば、誰かが私に例を教えてもらえますか？または、私が苦労して見つけたドキュメンテーションを教えてください。それができない場合は私に知らせてください、私は平和の中で移動することができます。

出典

2017-08-28 Marcus Ruddick

非常識思われる...しかし、より多くの私は同じ効果を達成する方法を考える、多分何の選択肢はありません。確かにイメージがほしいと思わない？ '-webkit-text-stroke'をチェックしましたか？同一ではありませんが、レンダリングは少なくなります！ – arbuthnott

私はそれを試みましたが、私が探していたものを達成できませんでした。パフォーマンスの問題はまだ見ていないのですが、それを完成させるための他の方法はありませんが、将来的にはより詳細な視覚的な側面を使用して、最終的に画像を置き換える予定です。今すぐ簡単にこれを行うには、すべてのタイトル画面の詳細な画像をアニメーション化する時間を過ごす。しかし、あなたの入力をありがとう！私は常に新しい、より良い方法を探しています。 –

forループを使用してルールを文字列として作成し、補間を使用してtext-shadowプロパティに適用できます。

codepen

$text-shadow: ''; 
@for $i from 1 through 20 { 
    $text-shadow: $text-shadow + if($i == 1, '', ', ') + '0 0 10px hsl(216,100%,50%)'; 
} 
text-shadow: #{$text-shadow};

出典

2017-08-28 23:29:03

それはうまく動作しません。文字列でぼかしすることなくそれを行う方法はありませんが、それは普通ではないと思います。ご回答有難うございます！ –

大文字のアウトラインストローク（ぼんやり）

答えて

関連する問題