avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur

Avoir une image transparente sous forme de code et non sous forme d'image

Créé par: ASTRIONES | Validé par: Reine des Ténèbres | Difficulté: Facile | Navigateur(s): Il me semble que cette astuce marche pour tous | Version: Euh, tous ?


Rendu

Spoiler:
Il n'y a pas vraiment de rendu, tout est dans le titre du tuto :)

Présentation du tutoriel

Bonjour, j'ai vu que beaucoup de personne ne connaissait pas cette astuce qui demande à être connue, alors je viens offrir mes maigres compétences en codage pour vous filer un coup de main :) Pour ceux et celles qui n'aurait aucun logiciel de graphisme sous la main -ou qui ont la flemme d'en ouvrir un-, cette astuce est géniale. Elle consiste à faire croire à votre navigateur que vous avez mit une image transparent alors qu'en fait, il n'y en a pas.

Explications




Un petit merci rendra les explications visibles !
Si vous avez une question sur ce tuto, cette section est disponible.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 707

Fiche Membre
Lots gagnés:
Maxi-Codeur en stage
Voir le profil de l'utilisateur
Coucou :3

Je m'excuse du temps que ça a pris pour te répondre.
D'abord, merci pour ta proposition de tuto.

J'ai une petite remarque concernant le titre au fait, j'ai plus l'impression que ton tuto traite les bannières aléatoires que l'image transparente, puisque la partie est bonus a l'air d'occuper plus de place

C'est vrai qu'on déjà un tuto sur les bannières aléatoires mais vu que ta méthode est différente, on peut le nommer Bannières aléatoires 2 ou un truc du genre.

Maintenant passons au contenu :

background-image: url('#');
background-repeat: no-repeat, repeat;
background-color: transparent, transparent;
background-attachment: scroll, scroll;
background-position: top center;

Pour la répétition horizontale on utilise plutôt repeat-x.
Mais on a pas forcément envie de faire répéter une bannière horizontalement, dans ce cas on mets no repeat et on ajoute width à 100% pour qu'elles prennent toutes la largeur.

Pour la position, la valeur est juste mais il est plus commun de spécifier la valeur horizontale avant la valeur vertical, ça sera donc center top.

Sinon tu n'as pas à mettre deux fois transparent et scroll.

J'ai une petite question : que veux tu dire par la description du forum ?
Je te laisse examiner et modifier tout ça déjà :3



Merci à Aed pour la zoulie signa ♥️ Et à Bora. pour le beau vava ♥️


Merci à Eskimo pour le joli vava :
Spoiler:
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
Coucou :) Pas de soucis pour le temps, ce n'est pas un problème ^^ Concernant le "no-repeat,repeat," en fait je n'avais pas pensé à mettre le "width:100%" donc le code ne fonctionnait pas sauf si je mettais le "no-repeat,repeat" XD Merci du coup de m'avoir fait remarquer ma bourde o/ -et de l'avoir corrigé aussi :P-


Voilà qui est tout corrigé :) Et j'ai aussi décrit pour le "Description du forum". J'imagine que dans ma cervelle, c'était évident XD Mais ça ne l'est peut-être pas pour tout le monde.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 707

Fiche Membre
Lots gagnés:
Maxi-Codeur en stage
Voir le profil de l'utilisateur
Bonsoir,

ça semble parfait pour les corrections, tu as juste oublié la 1ère bannière
Ne t'inquiète pas ça arrive souvent, c'est pourquoi perso je mets mes propriétés en commun une seule fois et je mets les noms de class et id en séparant par une virgule, c'est plus pratique :)

Pour la description, au fait c'est exactement ce que j'avais en tête sauf que quand j'ai essayé ça n'a pas fonctionné sur mon forum de test. D'habitude je mets ça dans les templates ou sur une page JS.

Tu es sûr que ça fonctionne dans la description ?



Merci à Aed pour la zoulie signa ♥️ Et à Bora. pour le beau vava ♥️


Merci à Eskimo pour le joli vava :
Spoiler:
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
Ah oui je viens de faire le test, sur mon forum ça marche et sur le forum test ça ne fonctionne pas, je crois qu'une fois sur deux ce code ne fonctionne pas, problématique o/ Voilà qui est changé dans le premier post :) Au lieu de la description du site, le mettre tout simplement dans une feuille de JS o/
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 707

Fiche Membre
Lots gagnés:
Maxi-Codeur en stage
Voir le profil de l'utilisateur
Je pense que c'est parce que tu l'as déjà dans tes templates sur ton forum.

Sinon ça fonctionne avec la feuille JS ? J'ai la flemme de vérifier, je vais tester ça demain :)



Merci à Aed pour la zoulie signa ♥️ Et à Bora. pour le beau vava ♥️


Merci à Eskimo pour le joli vava :
Spoiler:
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
Oui en JS ça fonctionne et non j'ai vérifié deux fois, il n'y a rien dans mes templates concernant les header aléatoires :)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 707

Fiche Membre
Lots gagnés:
Maxi-Codeur en stage
Voir le profil de l'utilisateur
Coucou :3

Désolée du retard :(

Je valide ton tuto :)



Merci à Aed pour la zoulie signa ♥️ Et à Bora. pour le beau vava ♥️


Merci à Eskimo pour le joli vava :
Spoiler:
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
Pas de soucis ^^ Merci beaucoup :)
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum