coup de contour de grande lettre avec sass

J'ai utilisé l'astuce de l'ombre du texte en utilisant une grande ombre de texte pour créer l'illusion d'une plus grande largeur de trait pour un contour de lettre. Il fonctionne tout comme pour mes besoins mais j'ai récemment commencé à utiliser SASS et je me demandais s'il était possible de convertir mes règles actuelles css:coup de contour de grande lettre avec sass

#title { 
top:10px; 
left:-30px; 
color:white; 
transform: scale(.8,1); 
position: absolute; 
font-size: 100px; 
font-weight: bold; 
text-transform: uppercase; 
-webkit-font-smoothing: antialiased; 
text-shadow: 0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%), 
0 0 10px hsl(216,100%,50%); }

en quelque chose de beaucoup plus court en utilisant la boucle pour les contrôles de Sass. Jusqu'ici j'ai vu des instructions sur la façon d'utiliser la boucle for pour créer plusieurs règles, mais pas encore pour créer plusieurs propriétés d'une seule règle. Si c'est possible, quelqu'un pourrait-il me donner un exemple? Ou me diriger vers la documentation que j'ai eu du mal à trouver? Ou si ce n'est pas possible, faites le moi savoir, afin que je puisse avancer en paix.

Source

2017-08-28 Marcus Ruddick

Ce semble fou ... mais plus je pense sur la façon d'obtenir le même effet, peut-être il n'y a pas d'alternative. Bien sûr, vous ne voulez pas d'image? Avez-vous vérifié '-webkit-text-stroke'? Pas identique, mais beaucoup moins de rendu! – arbuthnott

J'ai essayé cela, mais il n'a pas atteint ce que je cherchais. Je n'ai pas encore rencontré de problèmes de performances avec ce type de méthode, ou d'autres façons de le faire, mais je prévois d'utiliser des aspects visuels plus détaillés à l'avenir, de sorte qu'une image le remplacera probablement à terme. pour le moment, il est plus facile de faire cela, puis passer du temps à animer des images détaillées pour chaque écran de titre. Merci pour votre contribution si! Je suis toujours à la recherche de nouvelles et meilleures façons. –

Vous pouvez utiliser la boucle for pour créer votre règle sous forme de chaîne, puis utiliser l'interpolation pour l'appliquer à la propriété text-shadow.

codepen

$text-shadow: ''; 
@for $i from 1 through 20 { 
    $text-shadow: $text-shadow + if($i == 1, '', ', ') + '0 0 10px hsl(216,100%,50%)'; 
} 
text-shadow: #{$text-shadow};

Source

2017-08-28 23:29:03

ça marche, dommage qu'il n'y ait aucun moyen de le faire sans falsifier avec des ficelles, mais je suppose que c'est une tâche inhabituelle. Merci pour votre réponse! –

coup de contour de grande lettre avec sass

Répondre

Questions connexes