CSS Secret Garden: リアルなテキスト効果_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

場合によっては、特定のテキスト処理が Web 上で非常に一般的になることがあります。たとえば、活版印刷テキスト、ホバーブラー テキスト、浮き彫り (擬似 3D) テキストなどです。これらの効果は、多くの場合、慎重に作成されたテキストのシャドウ効果と私たちの目の働きの組み合わせであり、その多くは視覚的なずれに部分的に基づいています。これらのエフェクトに含まれるトリックを理解すると、それを実現するのは実際には簡単であることがわかりますが、開発ツールを使用してこれらをリバース エンジニアリングするのは必ずしも簡単ではありません。

このセクションでは、「この効果はいったいどのようにして実現されるの?」と疑問に思うことのないように、このエフェクトを作成する方法について説明します。方法。スキューモーフィックなデザインはかつてほど人気はありませんが、依然として多くの忠実なファンがいます。

この効果は、中程度の明るい背景に対して暗いテキストで最もよく機能しますが、テキストが黒でなく、背景が完全に白または黒でない限り、暗い背景に対して明るいテキストでも使用できます。

これは、ボタンを押したり上げたりした感覚を作り出すために最初の GUI で使用されていたのと同じ前提に基づいています。つまり、下部に明るい影 (または上部に暗い影) があると、オブジェクトが作成されます。表面に刻まれた幻想。同様に、下部に暗い影 (または上部に明るい影) を付けると、オブジェクトが表面から押し出されたような錯覚が生じます。その仕組みは、通常、光源が上にあると想定しているため、凸面のオブジェクトはその下に影を作り、凹面のオブジェクトは底部が明るくなります。

このようなエフェクトを使用する場合、アクセシビリティを諦めがちですが、そのコントラストをテストすることを忘れないでください ( Leaverou.github.io/contrast-ratio は、サポートされている CSS を受け入れるため、非常に便利なツールです)カラー形式

まず下の画像の色を使用します

テキストの色は hsl(210, 13%, 30%) で、背景の色は hsl(210, 13%, 60%) です:

background: hsl(210, 13%, 60%);color: hsl(210, 13%, 30%);

暗い背景に明るいテキストがある場合 (ここでの例のように)、下部に明るい影を付けるのが適切な場合があります。明るさは必要な効果と正確な色に依存するため、使用する必要があります。アルファ パラメータは、適切な明るさの値が見つかるまで少し試してください。ここでは 80% の透明度の白を選択しています。値は異なる場合があります:

ここでは、代わりにピクセルを使用しています。ただし、テキストのサイズが不定で、非常に小さいか非常に大きい場合は、em を使用する方が良いかもしれません:

background: hsl(210, 13%, 60%);color: hsl(210, 13%, 30%);text-shadow: 0 1px 1px hsla(0,0%,100%,.8);

暗い背景に明るいテキストがある場合はどうなりますか? 色が反転した場合:

影がひどい結果になる可能性があり、テキストがぼやける可能性があります。これは、この場合、活版印刷効果を使用できないことを意味します。ここでは、暗い影を上に配置する必要があります。図に示されています

CSS コードは次のとおりです:

text-shadow: 0 .03em .03em hsla(0,0%,100%,.8);

Stroke text

将来的には、text-shadow の Spread パラメータを使用するだけで済むため、非常に簡単になります。ストローク効果のように見えるように、ボックスシャドウのスプレッドパラメータを使用してアウトラインをシミュレートする方法と同様に、それらを大きくします。残念ながら、現在のブラウザのサポートは非​​常に限られているため、それをシミュレートする他の方法を見つける必要があります。多かれ少なかれ満足のいく結果が得られます

最も一般的な方法は、複数の異なるオフセットをレイヤーに適用することです。 text-shadow 値:

background: hsl(210, 13%, 40%);color: hsl(210, 13%, 75%);text-shadow: 0 -1px 1px black;

効果は次のとおりです:

スプレッドによってストロークされたテキストが完成します。 text-shadow のパラメータ

text-shadow の複数のレイヤーを適用することで 1px のアウトラインが完成します

または、オフセットを使用せずに、レイヤーに複数のぼかしシャドウを適用することもできます:

background: deeppink;color: white;text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;

ただし、これではあまり良い結果は得られませんぼやけのため、パフォーマンスの面で非常にコストがかかります。

さらに悪いことに、ストロークが太ければ太いほど、これら 2 つの方法が生み出す効果は悪くなります。たとえば、3 ピクセルのアウトラインがどれほどひどいかを見てください:

text-shadow: 0 0 1px black, 0 0 1px black,             0 0 1px black, 0 0 1px black,             0 0 1px black, 0 0 1px black;

効果は以下に示されています:

異なるオフセットを持つ複数のテキストシャドウによって作成された、悪い 3 ピクセルのアウトライン

これは通常、SVG を使用して解決されますが、 HTML タグに多くの冗長性が追加されます。たとえば、これを第 1 レベルの見出しで使用したいとします。 HTML タグは次のようになります:

background: deeppink;color: white;text-shadow: 3px 3px black, -3px -3px black,             3px -3px black, -3px 3px black;

次に、CSS では次のように記述する必要があります:

<h1><svg width="2em" height="1.2em">    <use xlink:href="#css" />    <text id="css" y="1em">CSS</text></svg></h1>

これは確かに理想的ではありませんが、最高の視覚効果が得られます

而且即使是在不支持SVG的古老的浏览器中，文本仍然是可读的、添加了样式的、可抓取的。

发光文本

发光文本在悬停链接、或某些类型网站的标题上都是一种颇为常见的效果。这也是最容易创建的效果之一。最简单的形式是你只需要使用一组分层的 text-shadow ，而不需要任何偏移量，颜色也和文本一样：

background: #203;color: #ffc;text-shadow: 0 0 .1em, 0 0 .3em;

效果如下图所示：

如果是做一个悬停效果，你需要应用一个过渡，如下：

a {    background: #203;    color: white;    transition: 1s;}a:hover {    text-shadow: 0 0 .1em, 0 0 .3em;}

你可以在 :hover 时通过隐藏文本创建一个更有趣的效果，让它看起来好像是慢慢变模糊了：

a {    background: #203;    color: white;    transition: 1s;}a:hover {    color: transparent;    text-shadow: 0 0 .1em white, 0 0 .3em white;}

效果如下图所示：

但是，记住依赖 text-shadow 给文本添加效果的话，通常没有优雅的降级：如果 text-shadow 不被支持的话，应用的文本都不会显示。所以你需要谨慎使用，在支持 text-shadow 的环境中才应用它。或者，你也可以通过CSS滤镜来模糊文本：

a {    background: #203;    color: white;    transition: 1s;}a:hover {    filter: blur(.1em);}

这种方法的浏览器支持可能更差，但是至少在缺少支持的时候不会影响到原来的内容。

立体文字

在skeuomorphically设计网站的另一个流行（或者是过度使用）效果是立体（伪3D）文本。

其主要思想是有大量堆积阴影，没有模糊，只有 1px 的区别，使其逐渐变暗，在最后带有一个高度模糊的深色阴影，模拟阴影。

我们使用上图中的文本作为开始，已经应用了简单的CSS代码添加样式：

background: #58a;color: white;

现在我们添加一些逐渐变暗的 text-shadow ：

background: #58a;color: white;text-shadow: 0 1px hsl(0,0%,85%),             0 2px hsl(0,0%,80%),             0 3px hsl(0,0%,75%),             0 4px hsl(0,0%,70%),             0 5px hsl(0,0%,65%);

如上图所示，我们完成得差不多了，但是结果看起来还是很不真实。但是~我们想要它变成如下图那样的效果

只需要在底部再添加一个阴影即可：

background: #58a;color: white;text-shadow: 0 1px hsl(0,0%,85%),             0 2px hsl(0,0%,80%),             0 3px hsl(0,0%,75%),             0 4px hsl(0,0%,70%),             0 5px hsl(0,0%,65%),             0 5px 10px black;

这种重复的、笨重的代码的首要候补就是使用预处理器的mixin啦。在SCSS中我们可以像这样写：

@mixin text-3d($color: white, $depth: 5) {    $shadows: ();    $shadow-color: $color;    @for $i from 1 through $depth {    $shadow-color: darken($shadow-color, 10%);    $shadows: append($shadows,    0 ($i * 1px) $shadow-color, comma);}color: $color;    text-shadow: append($shadows,    0 ($depth * 1px) 10px black, comma);}h1 { @include text-3d(#eee, 4); }

这种效果有许多变体。例如，把所有的阴影变成 black ，然后移除最后一个阴影的模糊，你可以模拟一个经常能在旧/复古的标签中看到的印刷效果：

color: white;background: hsl(0,50%,45%);text-shadow: 1px 1px black, 2px 2px black,             3px 3px black, 4px 4px black,             5px 5px black, 6px 6px black,             7px 7px black, 8px 8px black;

效果如下图所示：

这个要转换成mixin更容易，或者说用一个函数来实现更恰当，

@function text-retro($color: black, $depth: 8) {    $shadows: (1px 1px $color,);    @for $i from 2 through $depth {        $shadows: append($shadows,        ($i*1px) ($i*1px) $color, comma);    }    @return $shadows;}h1 {    color: white;    background: hsl(0,50%,45%);    text-shadow: text-retro();}