text-blink

Une action pour mettre en évidence un texte ou bloc en modifiant son style (couleur du texte, couleur de fond…).

Je ne sais pas si vous l'avez remarqué, depuis la version 5.1, le texte "Cliquer pour lire la documentation" dans la barre bleue au début de chaque démonstration clignote pour attirer votre attention. En effet, son contenu, récupéré directement dans le script PHP de l'action, est une synthèse à jour des informations importantes.

La balise blink étant supprimée depuis de nombreuses années, l'idée m'est venue de proposer une alternative plus acceptable par vos visiteurs.

Un exemple simple

Sans option, le texte va clignoter "presque" comme à l'époque de Netscape.

un texte {up text-blink}un texte clignotant de l'époque de la balise blink{/up text-blink} 

Si la balise blink ne jouait que sur l'opacité, l'action UP permet de définir un style différent pour l'autre phase du clignotement.

un texte {up text-blink=color:red;background:yellow;text-decoration:underline}clignotant en rouge sur fond jaune{/up text-blink} 

Il suffit d'indiquer le style alternatif comme argument de l'action.
Tous les attributs CSS sont acceptés. Les plus utilisés dans ce contexte sont : color, background, opacity, visibility, text-decoration, border
Les classes ne sont pas autorisées.

Le style du texte variera entre le style actuel et celui indiqué. Le style courant est modifiable avec les options class et style.

un texte {up text-blink=color:red;background:yellow
| style=color:white;background:orange}passant du rouge sur fond jaune au blanc sur orange{/up text-blink} 

Les classes sont autorisées dans les options class et style.

Texte inline ou bloc

Le cas le plus courant étant la mise en évidence d'un mot ou d'une phrase, le texte est retourné dans une balise span. 

Vous pouvez attirer l'attention sur un bloc en modifiant l'option main-tag

{up text-blink=background:khaki; | main-tag=div
 | class=p2;background:moccasin}
  {up lorem=1,decorate| tag=0}
{/up text-blink}

Les arguments pour l'option principale

L'option text-blink accepte 4 types d'argument :

1. rien. le texte va clignoter rapidement
   Exemple : option sans argument
   

   {up text-blink}option sans argument{/up text-blink}

2. des styles CSS. le texte passe du style courant à celui indiqué
   Exemple : texte souligné
   

   {up text-blink=color:indigo;text-decoration:underline}texte violet souligné{/up text-blink}

3. un prefset. Comment programmer les jeux d'options 
   Exemple : texte du bleu au rouge
   

    {up text-blink=red-blue}texte du bleu au rouge{/up text-blink}

   Voir la section du fichier plugins/content/up/actions/text_blink/custom/prefs.ini
4. une classe. L'action propose une classe blink-rainbow dans le fichier text_blink.css que vous pouvez surcharger dans le dossier options de l'action
   Exemple : la classe blink-rainbow
   

    {up text-blink=blink-rainbow}la classe blink-rainbow{/up text-blink} 

   Voir la déclaration de la classe

Les options générales

Ces options sont disponibles lorsque vous passez des styles comme argument principal. 
Elles sont également utilisables pour un prefset

speed : le nombre de secondes que doit durée un cycle de clignotement

{up text-blink=color:red}par défaut 1.5s{/up text-blink}

{up text-blink=color:red | speed=0.5}speed=0.5{/up text-blink}

{up text-blink=color:red | speed=5}speed=5{/up text-blink}

function : ease, ease-in, ease-out, ease-in-out, linear. Voir le site developer.mozilla.org

{up text-blink=color:red}par défaut ease-in-out{/up text-blink}

{up text-blink=color:red | function=linear}linear{/up text-blink}

{up text-blink=color:red | function=cubic-bezier(.68,-0.55,.27,1.55)}cubic-bezier(.68,-0.55,.27,1.55){/up text-blink}

count : infinite par défaut, on peut limiter le nombre de cycle en indiquant un nombre

{up text-blink=color:red}par défaut infinite{/up text-blink}

{up text-blink=color:red | function=linear}count=5{/up text-blink}

.blink-rainbow{
  font-weight: bold;
  padding-left:4px;
  padding-right:4px;
  animation:rainbow 10s linear infinite;}
@keyframes rainbow{
  0% {background: Red; color:#fff;}
  25% {background: Gold; color:#fff;}
  50% {background: Lime; color:RoyalBlue;}
  75% {background: RoyalBlue; color:#eee;}
  100% {background: DarkViolet; color:#eee;}
}

[red-blue]
text_blink="color:red;background:orange"
style="color:blue"