Rahmen um jeden Buchstaben mit css ohne Verwendung von Spannweiten

Wenn Sie einen mono-spaced font, könnten Sie wahrscheinlich verwenden Sie ein Hintergrundbild mit den Boxen.

Könnten Sie zehn GIF-Dateien, eine für jede Zahl (Sie sagte, stat counter), die so Aussehen, wie Sie wollen. Beim laden der Seite, die javascript verwenden, um split die Zeichenfolge in ein array, dann die Schleife durch Sie und ersetzen Sie jedes Zeichen mit dem entsprechenden gif-für diese Zahl.

Mithilfe von CSS3-Farbverläufe, die Sie tun können, das mit reinem css und ohne javascript. Der Grundgedanke ist, erstellen Sie einen Verlauf, wo sich das Feld Farbe, die Sie wollen, ist eine solide Farbe, um eine bestimmte Farbe zu stoppen, und dann den Farbverlauf transparent ist. Sie haben zu berechnen, die Farbe hält in Abstimmung mit der schriftart,-Größe und Zeichenabstand für den text. Dann bewerben Sie den Verlauf, um eine pseudo-Klasse für das text-element und voila.

Hier ist ein Beispiel, das ich erstellt für ein span-element enthalten, dass die Menge des Geldes, das für eine Organisation. Jede Reihe benötigt einen rosa Kasten um ihn herum. Der Grund, warum der Verlauf so kompliziert ist, weil ich es nur wiederholen Sie nach jeweils 3 Ziffern, da alle 3 Ziffern da war ein Komma, die benötigt werden, außerhalb der Boxen und somit benötigt eine zusätzliche Lücke. Wenn Sie wiederholen nach jedem Zeichen, es kann sein, viel einfacher, aber dachte, ich würde teilen diesen Ansatz, da Sie erwähnte einen Kilometerzähler. Sie können auch erweitern diese Verläufe mit mehr browser-Präfixe zu machen, arbeiten in IE, opera, etc.

html:
<span id="amount-raised">10,123</span>

css:
span#amount-raised {
position: absolute;
z-index: 1;
font-size: 70px;
letter-spacing: 10px;
color: #fff;
}
span#amount-raised:before { /* pink boxes */
  content: '';
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
  height: 100%; width: 100%;
  background-image: -webkit-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
  background-image: -moz-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
}