• Texte qui clignote

    Uniquement en CSS .

    Peut s'appliquer aux boutons des menus, aux titres des articles, à vos images, aux avatars des visiteurs, et cetera

     Je clignote.  Pas vous ? 
     ATTENTION 
    « Secouez moi, secouez moi !Image qui tourne en continu »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Mardi 25 Novembre 2014 à 13:23

    Bonjour

    Voilà c'est ce que je cherche un petit avatar écrit " news " à placer sur les boutons du menu quand je poste du nouveau dans cette rubrique:  comment je peux faire ??

    merci de m'aider et de me répondre.

    2
    Mardi 25 Novembre 2014 à 14:29

    Bonjour Marie,

    Le CSS dans cet article sert à faire clignoter des boutons de menu, comme par exemple, les boutons de ton menu horizontal avec "accueil", "mes créations, "mon livre d'or"...
    On peut ne faire clignoter qu'un des boutons ( que tu appellerais "NEW") et dans lequel tu aurais mis un lien vers rubrique "derniers articles"( si c'est ça que tu veux, dis le moi)

    mais ce CSS ne peut pas faire ajouter un "new" qui clignote devant un lien vers un nouvel article, lien/article  qui serait dans ton menu de gauche ou de droite.

    Le plus difficile n'est pas de trouver un "gif" ou une image qui clignote ( regarde chez GinetteD en cliquant sur son new ci dessous, j'espère qu'elle ne sera pas fachée que je mettes son image ici et je pense que tu peux lui demander des conseils...) mais de pouvoir la placer la où tu veux..et donc où voudrais-tu la placer exactement ?

     

    3
    Mardi 25 Novembre 2014 à 20:06

     Bonsoir

    Je te remercie de m'avoir répondue, suis allée chez te toubib cet aprèm c'est pourquoi je réponds que maintenant.

    suis allée faire un tour chez Ginette,  c'est ça ce que je veux, reste à savoir comment le mettre sur le bouton de l'en-tête. Je le mettrais sur celui du " derniers articles " par exemple, peux-tu m'expliquer la manœuvre à faire.

    bonne soirée et merci de ton aide.

    4
    Mardi 25 Novembre 2014 à 22:30

    Essaie en ajoutant ce CSS.
    Je ne peux pas faire mieux ! je n'arrive pas à rapprocher le new de "derniers articles"...
    il faudrait qu'à la place de "derniers articles", tu mettes "articles" seulement ( tu fais le dernier lien du menu en tête en passant par le bouton "lien externe" et en mettant l'url de la page rubrique derniers articles et peut-être que ça rentrerait dans ton image de fond de bouton)

     

    #menu li:nth-child(8):before {
    content: url(http://ekladata.com/wlflVyqoqa--hJt0nfR9XVMjCFQ/nouveau2-2.gif);
    display: block;
    float: left;
        padding-top: 75px;
    margin-left: 50px;}

    5
    Vendredi 28 Novembre 2014 à 07:29

             Bonjour Max

    Merci de ton aide, je suis désolée de mon retard à répondre, pas là hier, je viens de faire la manip pour le

     " NEWS" et ça marche ,  j'ai écrit que " Articles " comme tu le dit et ça rentre bien dans le bouton de l'en-tête.

    Je suis allée chez Ginette et suite à ma demande elle a fait un tutos sur ce sujet que je n'ais pas expérimentée encore ,  mais je pense que c'est pour un bouton de côté ( droite ou gauche ).

    Encore un grand MERCI tu es très gentil et j'apprécie ton aide.

    Passe une bonne journée, bisous.

    6
    Vendredi 28 Novembre 2014 à 12:44

    Bonjour Marie, 

    content de t'avoir aidé mais j'arrivais pas à rapprocher l'image "news" de Ginette du texte "articles" du dernier bouton de ton en tête et je trouvais que ça faisait pas terrible.

    Aujourd'hui, j'ai réussi ce rendu

    dernier bouton en tt

    et mince !!!  En changeant de page pour enregistrer l'image, j'ai perdu  le code CSS que j'ai rajouté pour arriver à  ce positionnement !!

    Si tu veux vraiment cela, je le refais et te le donne prochainement.

    Sinon, on peux aussi essayer plutot de mettre une image "new" plus grande et carrément à la place du "ARTICLE" titre du bouton ( qu'on supprime dans les liens menu en tête) ..

    Tu me dis ce que tu en penses  

    7
    Vendredi 28 Novembre 2014 à 14:09

     Max,  suis désolée que tu es perdue le code,  oui peut-être que c'est mieux de mettre que le gif un peu plus grand ça fera moins bizarre , fait comme tu peux, l'essentiel c'est que ça fonctionne.

    Merci de ton acharnement, je voie que tu aimes les choses bien fini et bien faite, avec de la persévérance on y arrive, je suis comme ça aussi.

    Bon après midi à toi, je vais allée respirer l'air de la mer tantôt, tout près de chez moi...

    A plus.

    8
    Vendredi 28 Novembre 2014 à 14:24

    Okay, je regarde cela un peu plus tard...

    tu as bien de la chance d'habiter près de la mer !

    chez moi, je n'ai que le vent  ( et pas du large !)

    A plus

    9
    Vendredi 28 Novembre 2014 à 17:05

    Re coucou !

    En attendant que tu  trouves un gif qui te plaise
    --- auquel cas, de mettre une image dans le bouton, on repassera avec le CSS donné précédemment---

    tu peux mettre dans un module coté <> code source  le CSS/style qui est en bas de mon comm
    ( pourquoi mettre le CSS dans un module et non dans "ajouter du CSS" ?  parce que dans "ajouter du CSS" on peut pas entrer de @keyframes)

    Et dans le 8ème bouton/ menu en tête , à la place du titre du lien "ARTICLES", tu mets NEW ( en faisant Alt + 15, ça te fait un soleil ☼ et donc ça serait ☼ NEW ☼ par exemple qui clignoterait ) ...

     

    <style type="text/css"><!--
    #menu li:nth-child(8) a{
        color: #e1e3af;
    font-size: 18px;
       
    -webkit-transition: all .6s ease-in;
        -moz-transition: all .6s ease-in;
        -o-transition: all .6s ease-in;
        transition: all .6s ease-in;
       
        -moz-animation-name: glow2;
        -moz-animation-duration: .4s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -moz-animation-direction: alternate;

        -webkit-animation-name: glow2;
        -webkit-animation-duration: .4s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: alternate;
    }

    @-moz-keyframes glow2 {
        from { color: #1C517A; font-size: 12px; letter-spacing: 1px;
        }
        to   {   color:#ffffff; font-size: 22px; letter-spacing: 2px;
        }
    }
    @-webkit-keyframes glow2 {
        from {  color: #1C517A; font-size: 12px; letter-spacing: 1px; }
        to   {   color:#ffffff; font-size: 22px; letter-spacing: 2px;
        }
    }
    --></style>

    10
    Vendredi 28 Novembre 2014 à 18:20

              Rép: suis rentrée de ma balade, il ne faisait pas très chaud...

               ça se complique !!

               Vois chez Ginette dans son tutos pour ça elle a mis des gifs et il y en a un marqué " nouveau " en   jaune qui doit être plus grand donc il devrait bien aller sur le bouton.  peut être plus simple aussi.

               Allez non fin de journée

              

    11
    Vendredi 28 Novembre 2014 à 19:03

    Faut pas avoir peur de la longueur des codes !!

    Bon, j'ai pas vu le gif "nouveau" chez Ginette.. Les trois que j'ai vu sont assez petits..

    J'ai trouvé celui ci en anglais !  

    et donc pour cette image, le CSS à ajouter dans "ajouter du CSS" est ci dessous.

    Penses à supprimer celui que tu as actuellement et
    Si tu trouves un autre gif, tu l'insères dans un article sur ton blog pour récupérer son adresse url et tu la mets à la place de celle de mon  gif . En fonction de la grandeur de ton image, il faudrait peut être un peu jouer sur les deux valeurs mises en padding et margin c'est à dire modifier  45px et 80px pour placer correctement ton image dans l'image de fond de ton bouton)

    Dans le menu en tête, n'oublie pas d'enlever le titre "ARTICLES"

     

    #menu li:nth-child(8):before {
    content: url(http://ekladata.com/p7qwuf-r_S5ie8aXTd8pXkWaOAA.gif);
    float: left;
    padding-top: 45px;
    margin-left: 80px;}

    12
    Vendredi 28 Novembre 2014 à 21:02

              Bonsoir Max

    Ce gif ne fonctionne pas, quand je clic dessus il ne se sélectionne pas pour envoyer la page il reste fixe.

    je voulais t'envoyer celui que j'ai mais je ne sais pas me servir de ton éditeur d'image, là, que doit-on inscrire a " source " et " description image " ??? 

    bon si non je remettrais le premier, on ne vas pas se prendre la tête.

    A demain, bonne nuit à toi.

    13
    Vendredi 28 Novembre 2014 à 21:31

    Bonsoir Marie ou plutot bonjour

    Le new, un peu style feu d'artifice dans mon précédent comm n'est pas animé quand tu le regardes ?

    Si tu veux celui là, il suffit que tu ajoutes dans CSS le bout de code en bas du comm ( dedans, il y a déjà - en violet, l'adresse de ce gif.

    Ton autre gif, il est où ?
    Dans un de tes articles c'est à dire déjà avec une adresse qui commence par http://ekladata ? ou dans ton ordinateur.

    Quoi qu'il arrive, que ce soit pour mettre le gif ici dans un comm ou
    pour le mettre  à la place du "new feu d'articife",
    il te faut son adresse http:// car c'est cette adresse que tu dois mettre dans la case source en passant par l'icone "insérer image" ( pour la case description, tu mets n'importe quoi genre gif new..) ou direct dans le bout de code donné pour que ce soit ton gif qui s'affiche dans ton bouton de menu entête...
    Tu suis

     

    14
    Samedi 29 Novembre 2014 à 08:55

    gif                  Bonjour Max

    Je suis désolée de t'ennuyer de la sorte, voilà j'ai trouvée celui là.

    J'ai hébergée avec Archive-host pour avoir le http, pas facile de tout comprendre, il faut beaucoup d'outils pour arriver à faire quelque chose. Je ne connaissais pas cet hébergeur par lequel on passe pour t'envoyer ce mail.

    Merci à toi

    15
    Samedi 29 Novembre 2014 à 10:57

    Bonjour Marie, 

    Et bien , je vois que tu es plus matinale que moi et que tu te débrouilles très bien toute seule !

    Il ne te reste plus qu'à supprimer "derniers articles".

    PS: lorsque tu insères une image dans un article de ton blog, l'image est hébergée chez ekla. Tu n'as pas besoin de passer par un autre hébergeur; D'ailleurs lorsque tu mets dans un article, une image qui est hébergée ailleurs que chez ekla, une fenêtre s'ouvre sur le blog et te propose de l'importer sur ekla ( car si elle est hébergée chez ekla, elle ne manquera jamais à l'affichage , alors que parfois, hébergée ailleurs, si l'autre site qui l'héberge  la supprime, elle ne s'affichera plus sur ton blog/adresse http invalide).

    Pour exemple:
    j'ai cliqué sur ton gif pour récupérer son adresse actuelle chez A-H .
    j'ai inséré ce gif dans un article en mettant cette adresse http chez A-H.
    la fenêtre "importer image" s'est ouverte et j'ai fait "importer" et donc 
    l'adresse de ton gif chez EKLA est la suivante.

    http://ekladata.com/Cue40yjHXrRC9toZHkxG82K2dvw.gif

     

    Bon week-end

     

     

    16
    Jeudi 30 Juillet 2015 à 12:59

    Bonjour Max

    j'aurai besoin de ton aide , j'aimerai ci cela est possible

    mettre un gif animé dans mon menu entête sur mon bouton

    "new tutos"

    ou faire simplement clignoter le titre de ce bouton

    par avance je te remercie de ta réponse

    amicalement 

     

    17
    Récréation PSP Profil de Récréation PSP
    Lundi 10 Août 2015 à 12:18

    bonjour Max 


    j'ai réussi j'avais mal lu ton code, par contre j'ai l'impression


    d'avoir un petit décalage au niveau de l'animation du texte


    je suis vraiment contente grâce à tes explications


    j'ai réussi , bon peu être pas si bien que toi


    merci encore pour tes conseils , sans toi je n'y serai pas arrivé


    si tu as l'occasion peu tu passer pour me donnez ton avis


    ce serait vraiment gentil de ta part


    amitiés Mickaela

    18
    Dimanche 13 Septembre 2015 à 16:58

    Bonjour Mickaela, 

    désolé du retard dans ma réponse, 

    les reprises sont toujours difficiles pour moi ;-))

    Ton bouton "new tutos" rend bien ,je trouve. peut-être le faire clignoter moins vite, enfin je ne sais pas,.. tu voudrais quelque chose de différent, le modifier ?

    19
    Dimanche 13 Septembre 2015 à 20:48

    Bonjour Max merci d'être passé , ne t'inquiète pas pour le retard je comprend , le modifié tu peu m'expliquer ou me suggérer une idée , je suis à l'écoute.Tes conseils sont les bienvenues , encore merci pour ton aide

    Mickaela 

     



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl