J'essaie de créer une boîte autour de chaque lettre à utiliser pour un compteur de statistique de style kilométrique. Savez-vous comment faire cela sans envelopper chaque lettre d'une portée? Si vous avez des idées, j'aimerais les entendre.
7 Réponses :
Je ne peux pas voir un moyen de le faire en HTML sans envelopper chaque lettre dans un élément que vous pouvez stylé.
Si vous utilisez une police mono espacée, vous pouvez probablement utiliser une image d'arrière-plan avec les cases.
Bonne idée - c'est la seule façon de venir encore près. Toutefois, si l'utilisateur effectue un zoomer le texte, vous ne disposez pas de la police ou de forcera le navigateur pour afficher une taille de police différente.
True, mais la plupart des navigateurs de nos jours implémentent le zoom complet de la page par défaut et non seulement le texte zoom. Je serais (personnellement) prêt à accepter cela.
Une autre option serait d'utiliser JavaScript pour ajouter tout le balisage supplémentaire dont vous avez besoin. Il y a déjà quelques plugins jQuery qui font déjà ce type de chose:
Merci - c'est un grand plugin et est au moins meilleur que de faire les effondron manuellement.
Vous pouvez créer dix gifs, un pour chaque numéro (vous avez dit compteur de statistique) qui a l'air de la façon dont vous les voulez. Lorsque vous chargez la page, utilisez JavaScript pour scinder votre chaîne en une matrice, puis en boucle et remplacez chaque caractère avec le gif correspondant pour ce numéro.
Vous pouvez faire une grosse image de l'alphabet et des chiffres complètes de plusieurs polices et utilisez simplement le CSS 'Clip' pour mapper où l'image est et sa taille. Impressionnant!
Eh bien, il est certainement possible de renvoyer cela et d'utiliser un police (via @ font-face ) qui a des lettres en boîte.
Utilisation de gradients CSS3, vous pouvez le faire avec PURE CSS et pas de JavaScript. L'idée principale est de créer un gradient où la couleur de la boîte que vous souhaitez est une couleur solide à une certaine couleur de couleur, puis le gradient est transparent. Vous devez calculer les arrêts de couleur en coordination avec la taille de la police et l'espacement des lettres du texte. Ensuite, appliquez le dégradé à une classe de pseudo de l'élément du texte et de la route de Texte.
Voici un exemple que j'ai créé pour un élément de couverture contenant le montant de l'argent soulevé pour une organisation. Chaque numéro avait besoin d'une boîte rose autour de lui. La raison pour laquelle le gradient est tellement compliqué est que je n'ai fait que répéter uniquement après 3 chiffres, car tous les 3 chiffres, il y avait une virgule qui devait être à l'extérieur des boîtes et nécessitait ainsi un écart supplémentaire. Si vous répétez après chaque personnage, cela peut être beaucoup plus simple, mais je figureais que je partageais cette approche depuis que vous avez mentionné un compteur kilométrique. Vous pouvez également étendre ces gradients avec plus de préfixes de navigateur pour le faire fonctionner dans IE, Opera, etc. P>
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);
}
devrait fonctionner, mais on dirait qu'il y a un bogue de rendu dans certains navigateurs qui rend les cases inégales
Les préfixes du navigateur sont inutiles - Tous les navigateurs ont commencé à l'utiliser sans peu de temps après avoir leur version préfixée.
J'ai aimé Réponse de DMTinter mais c'était plus long que nécessaire (plus il a 7 ans) - Voici un rapide et simple Exemple CSS que j'utilise sur ma page:
span { color: black;
font-family: "Lucida Console", Monaco, monospace;
border: 1px solid black;
background-image: repeating-linear-gradient(90deg, white, white 13.5px, black 14.5px);
}