1

真ん中の文字が外側の文字とは違う色のロゴになるサイトを書いています。例えば

<style type="text/css" media="screen>
    .logoG { color:blue; }
    .logoGo { color:red; }
    .logoGoo { color:yellow; }
    .logoGoog { color:blue; }
    .logoGoogl { color:green; }
    .logoGoogle { color:red; }
</style>
<span class="logoG">G</span><span class="logoGo">o</span><span class="logoGoo">o</span><span class="logoGoog">g</span><span class="logoGoogl">l</span><span class="logoGoogle">e</span>

テキストをテキストとして保持したい。画像置換のトリックを使用してテキストを非表示にし、ロゴの背景画像に置き換えないでください。つまり、HTMLを次のようにしたいと思います。

<span class="logo">Google</span>

...そしてCSSが次のようなことをすることで大変な仕事をするために：

logo {visibility: none;}
logo:after {visibility: visible; content: "G"; color:blue;}
logo:after:after {content: "o"; color:red;}
logo:after:after:after {content: "o"; color:yellow;}
logo:after:after:after:after {content: "g"; color:blue;}
logo:after:after:after:after:after {content: "l"; color:green;}
logo:after:after:after:after:after:after {content: "e"; color:red;}

...またはさらに良い：

logo:first-letter  {color:blue;}
logo:nth-letter[2] {color:red;}
logo:nth-letter[3] {color:yellow;}
logo:nth-letter[4] {color:blue;}
logo:nth-letter[5] {color:green;}
logo:nth-letter[6] {color:red;}

これまでのところ、私が見つけた最も近いトリックは、レインボーテキストのこのトリックです：http：//rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/

また、可能であればjavascriptを回避するために、このソリューションが理想的です。過度に？

アップデート

虹のハッキングに基づいて機能するサンプルコードを次に示します。ただし、テキストのサイズを変更すると（たとえば、ctrl + +）、すぐに壊れます。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Google Demo</title>
  <style type="text/css" media="screen">
    h1 {
        background-image:-webkit-gradient( 
        linear, left top, right top
        , color-stop(0, blue)
        , color-stop(0.018, blue)
        , color-stop(0.018, red)
        , color-stop(0.030, red)
        , color-stop(0.030, yellow)
        , color-stop(0.040, yellow)
        , color-stop(0.040, blue)
        , color-stop(0.054, blue)
        , color-stop(0.054, green)
        , color-stop(0.058, green)
        , color-stop(0.059, red)
        , color-stop(0.108, red)
        );
        color:transparent;
        -webkit-background-clip: text;      
    }
  </style>
</head>
<body lang="en-US">
<h1>Google</h1>
</body>
</html>
4

3 に答える 3

2

cssでnth-child（）を試すことができます。このリンクをチェックしてください：http：//css-tricks.com/useful-nth-child-recipies/

cssのn番目の子に注意してくださいIEのサポートはie9+だと思います

span：nth-​​last-child（2）{色：緑; }

于 2013-01-08T23:09:35.073 に答える
0

CSSまたはJavaScriptを使用してターゲットを設定できるように、各文字を何らかのタグでラップせずにそれを行うことはできないと思います。でも面白い問題...

于 2013-01-08T23:20:40.617 に答える
0

ps。これは、同様の問題を抱えているがjsの懸念がない人のためのjavascriptバージョンです。これは、ジェシーのn番目の子のトリックをいくつかのコードと一緒に使用して、関連するタグを使用します。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Google Demo</title>
  <style type="text/css" media="screen">
    h1 .x:nth-child(1) { color: blue; }
    h1 .x:nth-child(2) { color: red; }
    h1 .x:nth-child(3) { color: yellow; }
    h1 .x:nth-child(4) { color: blue; }
    h1 .x:nth-child(5) { color: green; }
    h1 .x:nth-child(6) { color: red; }
  </style>
  <script type="text/javascript" charset="utf-8">
    function fancy() {
        var h1s = document.getElementsByTagName('h1');
        for(var i = 0; i < h1s.length; i++) {
            var h1Text = h1s[i].innerText;
            var h1InnerHTML = '';
            for(var j = 0; j < h1Text.length; j++) {
                h1InnerHTML += '<span class="x">' + h1Text[j] + '</span>'; //nb: innerHTML is a dodgy hack, but fine for demos / works in Chrome
            }
            h1s[i].innerHTML = h1InnerHTML;
        }
    }
  </script>
</head>
<body lang="en-US" onload="fancy();">
    <h1>Google</h1>
</body>
</html>
于 2013-01-08T23:42:22.860 に答える