zone autour de chaque lettre avec css sans utiliser les travées
Je suis en train de créer un cadre autour de chaque lettre à utiliser pour un odomètre style stat counter. Savez-vous comment faire cela sans enrouler chaque lettre dans un span? Si vous avez des idées, je serais ravi de les entendre.
Une autre option serait d'utiliser javascript pour ajouter à tous les supplémentaires de balisage dont vous avez besoin. Il y a quelques plugins jquery que faire ce genre de chose déjà:
Si vous utilisez un mono espacées de police, vous pourriez probablement utiliser une image de fond avec les boîtes.
Belle idée - c'est le seul moyen de venir, même à proximité. Cassera toutefois, si l'utilisateur effectue un zoom avant sur le texte, n'a pas la police, ou forcer le navigateur à afficher une taille de police différente vrai, mais la plupart des navigateurs, ces jours-ci de mettre en œuvre le zoom pleine page par défaut et pas seulement la taille du texte. J'avais (personnellement) être prêts à l'accepter.
Vous pouvez créer dix gifs, un pour chaque numéro (vous avez dit stat counter) que de regarder la façon dont vous le souhaitez. Lors du chargement de la page, l'utilisation de javascript pour diviser votre chaîne dans un tableau, puis la boucle à travers elle et de remplacer chaque caractère avec le gif de que nombre.
Vous pourriez faire une grande image de la totalité de l'alphabet et des nombres dans plusieurs polices de caractères, et il suffit d'utiliser le 'clip' css à la carte où l'image est, et il est de taille. Génial!
À l'aide de dégradés CSS3, vous pouvez le faire avec de la pure css et pas de javascript. L'idée principale est de créer un dégradé où la couleur de la zone que vous voulez est d'une couleur unie à une certaine couleur, et puis le dégradé est transparent. Vous devez calculer les arrêts de couleur en coordination avec la police de la taille et de la lettre de l'espacement du texte. Puis appliquer le dégradé à une pseudo classe du texte de l'élément et le tour est joué.
Voici un exemple que j'ai créé pour une durée élément qui contenait le montant d'argent recueilli pour une organisation. Chaque numéro a besoin d'une boîte rose autour d'elle. La raison pour laquelle le gradient est si compliqué, c'est parce que je l'ai fait que répéter après tous les 3 chiffres, puisque tous les 3 chiffres, il y a une virgule qui devait être à l'extérieur des cases et donc besoin d'un supplément d'écart. Si vous êtes de répéter après chaque personnage, il peut être beaucoup plus simple, mais pensé que je devais partager cette approche puisque vous avez mentionné un odomètre. Vous pouvez également étendre ces gradients avec plus de navigateur préfixes pour le faire fonctionner sous IE, opera, etc.
Une autre option serait d'utiliser javascript pour ajouter à tous les supplémentaires de balisage dont vous avez besoin. Il y a quelques plugins jquery que faire ce genre de chose déjà:
http://daverupert.com/2010/09/lettering-js/
OriginalL'auteur Jeff
Si vous utilisez un mono espacées de police, vous pourriez probablement utiliser une image de fond avec les boîtes.
vrai, mais la plupart des navigateurs, ces jours-ci de mettre en œuvre le zoom pleine page par défaut et pas seulement la taille du texte. J'avais (personnellement) être prêts à l'accepter.
OriginalL'auteur Jeff
Je ne vois pas le moyen de le faire en HTML sans emballage de chaque lettre dans un élément que vous pouvez style.
OriginalL'auteur Pekka 웃
Vous pouvez créer dix gifs, un pour chaque numéro (vous avez dit stat counter) que de regarder la façon dont vous le souhaitez. Lors du chargement de la page, l'utilisation de javascript pour diviser votre chaîne dans un tableau, puis la boucle à travers elle et de remplacer chaque caractère avec le gif de que nombre.
OriginalL'auteur LeifM
Bien, il est certainement possible de renverser cette autour et à l'utilisation d'un police (via @font-face) qui a encadré les lettres.
OriginalL'auteur D_N
À l'aide de dégradés CSS3, vous pouvez le faire avec de la pure css et pas de javascript. L'idée principale est de créer un dégradé où la couleur de la zone que vous voulez est d'une couleur unie à une certaine couleur, et puis le dégradé est transparent. Vous devez calculer les arrêts de couleur en coordination avec la police de la taille et de la lettre de l'espacement du texte. Puis appliquer le dégradé à une pseudo classe du texte de l'élément et le tour est joué.
Voici un exemple que j'ai créé pour une durée élément qui contenait le montant d'argent recueilli pour une organisation. Chaque numéro a besoin d'une boîte rose autour d'elle. La raison pour laquelle le gradient est si compliqué, c'est parce que je l'ai fait que répéter après tous les 3 chiffres, puisque tous les 3 chiffres, il y a une virgule qui devait être à l'extérieur des cases et donc besoin d'un supplément d'écart. Si vous êtes de répéter après chaque personnage, il peut être beaucoup plus simple, mais pensé que je devais partager cette approche puisque vous avez mentionné un odomètre. Vous pouvez également étendre ces gradients avec plus de navigateur préfixes pour le faire fonctionner sous IE, opera, etc.
OriginalL'auteur DMTintner