CSS3を使って文字を美化する方法-CSSチュートリアル-php.cn

CSS3を使って文字を美化する方法

青灯夜游

リリース： 2018-09-07 16:24:38

オリジナル

1897 人が閲覧しました

CSS は技術であるだけでなく、芸術でもあります。上手に使えば、さまざまな魔法の効果を生み出すことができます。CSS3 の革新により、プログラマーはより多くのスペースと機能を得ることができます。自分自身の気まぐれを表現する可能性。ではCSSで文字の半分を美化する方法です。実際には、キャラクターを半分に分割し、半分を A スタイル、半分を B スタイルにします。もちろん、漢字であろうと欧文であろうと、単語や文の半分を美しくするためには、単一の文字を切り離すことはできないことは誰もが知っていると思います。それをすることも非常に一般的です。しかし、キャラクターの半分を美しくするにはどうすればよいでしょうか？もちろん方法はありますが、ここで必要なのはアートです。

まず必要なレンダリングを見てください:

CSS3を使って文字を美化する方法

左側は色、右側は色です。もちろん絵を使えばとても簡単ですが、絵には文字スタイルを動的に生成できないなどの制限があります。純粋な CSS を使用してこの効果を実現する方法を見てみましょう。

CSSで文字の半分を美しくするという基本的なアイデア

アイデアは非常にシンプルで、単語を2回書いて、それぞれの半分を表示するだけです。アイデアは非常に明確でシンプルですが、どのように実装するのでしょうか?もちろん、実際には単語を 2 回書くことはできません。これはあまりにも愚かなことです。ユーザーがこのテキストをコピーして貼り付けると、同じテキストのコピーが 2 つ貼り付けられることになります。ここでは、CSS 擬似要素 (before と :after) を使用する必要があります。この「擬似要素」の「擬似」という単語は、もともと存在しないことを示しています。擬似要素内に同じ文字を配置し、その半分だけを表示し、元の文字の残りの半分を表示して、最後にそれらを組み合わせて1つの単語にする方法です。

CSSコード

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /*  任何宽度都可以 */
    color: black; /* 任何颜色，或透明 */
    overflow:hidden;
    white-space: pre; /* 处理空格 */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #f00;
}

ログイン後にコピー

HTMLコード

<p>单个字符</p>
<span class="halfStyle lazy " data-content="风">风</span>
<span class="halfStyle lazy " data-content="流">流</span>
<span class="halfStyle lazy " data-content="倜">倜</span>
<span class="halfStyle lazy " data-content="傥">傥</span>

<hr/>
<p>用脚本自动美化：</p>

<span class="textToHalfStyle lazy ">恋爱容易婚姻不易，且行且珍惜。</span>

ログイン後にコピー

必要なのは、半分美化が必要な各文字に.halfStyleCSSクラスを適用することだけです。上記のコード例では、各スパンに文字が含まれており、それに data-content="wind" などの data-attribute を配置してから、疑似要素で attr(data-content) メソッドを使用します。 .halfStyle:before は動的になり、内容を手動でハードコーディングする必要はありません。

複数の文字を美化する必要がある状況では、.textToHalfStyleCSS クラスを使用してこの効果をすべての文字に自動的に追加する jQuery コードを作成できます:

jQuery(function($) {
    var text, chars, $el, i, output;

    // 遍历所有字符
    $(&#39;.textToHalfStyle&#39;).each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split(&#39;&#39;);

        // Set the screen-reader text
        $el.html(&#39;
        <span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">&#39; 
        + text + &#39;</span>&#39;
        );

        // Reset output for appending
        output = &#39;&#39;;

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += &#39;<span aria-hidden="true" data-content="&#39; + chars[i] + &#39;">&#39; + chars[i] + &#39;</span>&#39;;
        }

        // Write to DOM only once
        $el.append(output);
    });
});

ログイン後にコピー

このようにして、テキストの段落であっても、テキスト全体を一度に実行できます。1つずつ手動で設定する必要はなく、1つずつ絵を描く必要もありません。

高度な方法: 左半分の文字と右半分の文字は両方とも疑似要素を使用して生成されます

上記の方法では、テキストの左半分は :before 疑似要素を使用して生成され、右半分は元のテキストを使用します。しかし実際には、擬似要素を使用して左側と右側の両方を生成できます。右側の半分は :after を使用して実装されます。

CSS コード

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

ログイン後にコピー

これで、表面上に 3 つの文字が重なっています。このようにして、3 色の文字を取得できます。。上記の例はすべて左と右の色分離を使用しています。実際には、上と下の色分離、または上、中、下の色分離を使用することもできます。

CSS3を使って文字を美化する方法