AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -23%
EVGA SuperNOVA 650 G6 – Alimentation PC 100% ...
Voir le deal
77.91 €
Le Deal du moment : -10%
PC Portable Gamer ASUS TUF Gaming F15 | 15,6″ ...
Voir le deal
599.99 €

    Fond en transparence - opacité (fond en couleur ou en image)

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mer 14 Mai 2014 - 10:00





    Faire un fond en transparence


    Je pense que le titre est assez clair pour que vous imaginiez ce que l'on veut faire, malgré tout, voilà ce que je vais vous montrer comment faire.



    Le texte ici présent est dans un div de couleur blanche, avec un fond d'opacité de 80%;


    Le texte ici présent est dans un div et a une image de fond d'opacité 60%.



    Pour une couleur


    Pour une couleur, le code est extrêmement simple! En effet, il suffit d'utiliser le fait que le background-color peut être exprimée en rgba, le a étant l'opacité de la couleur. Il suffit alors de connaître le code RGB de la couleur que l'on veut utiliser, et de lui donner comme dernier élément l'opacité que l'on veut.

    Voici donc les codes:

    Si on a accès à la feuille CSS du forum



    Dans le HTML:
    Code:
    <div class="fond_transparent_blanc">Ceci est un texte, làlàlà!</div>

    Dans le CSS:
    Code:
    .fond_transparent_blanc {
    /* N'hésitez pas à mettre d'autres style ici */
      background-color: rgba(255, 255, 255, 0.8); /* Donc 0.5 = 50%, 0.8 = 80%, etc */
    }


    Si on est membre, à poster dans un message


    Code:
    <div style="background-color: rgba(255, 255, 255, 0.8); ">Ceci est un texte, làlàlà!</div>



    Pour une image


    Pour une image, c'est un tout petit peu compliqué! En effet, on doit ajouter une div supplémentaire, et utiliser le pseudo-élément ":before". Cependant, je vais tetner de vous explique au mieux ce qui se passe ici!

    Voici déjà le code HTML:
    Code:
    <div class="conteneur"><div class="contenu">Ceci est un texte, làlàlà!.</div></div>
    Vous voyez donc qu'il y a un div qui entoure notre texte. C'est très important, car sinon, ça ne va pas marcher! La structure est, comme vous le voyez, pas très difficile: la partie la plus difficile réside vraiment dans le CSS!


    Si on a accès à la feuille CSS du forum


    Voici le code à mettre:
    Code:
    .contenteur {
      /* Le position relative permet de contrôler le positionnement absolu de l'élément before. */
      position: relative;
     /* N'oubliez pas ici de mettre la hauteur et la largeur de l'élément, ainsi que tout autre effet de style voulu! */
    }
    .contenteur:before {
      content: ""; /* Obligé de le mettre ou rien ne s'affichera */
      /* Mettre un positionnement absolu et ensuite les 4 option de positionnement (top, bottom, left et right) à 0, permet de faire en sorte que cet élément prenne toute la LARGEUR et toute la HAUTEUR de l'élément parent, dans notre cas, le contenteur! */
      position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     /* L'image de fond, bien sûr! */
      background-image: url('URL_DE_L'IMAGE_ICI');  
      /* Le z-index est la position sur l'axe des z (donc de la profondeur) de cet élément. Ici, on le met à un pour qu'il soit derrière notre contenu. */
      z-index: 1;
     /* Ici on règle l'opacité d el'image de fond. 0.8 = 80%, 0.5 = 50%, etc. */
      opacity: 0.6;
    }

    .contenu {
      /* Mettre une position est obligatoire pour utiliser le z-index. Vu qu'on ne veut pas de positionnement absolu de notre texte, on le met en relatif. */
      position: relative;
      /* On veut bien sûr notre texte au-dessus de l'image de fond, dans ce cas, on met un z-index plus grand que celui de l'élément before */
      z-index: 2;
    }


    Si on est membre, à poster dans un message :


    Il est cependant possible que vous n'ayez pas accès à la feuille de style du forum où vous voulez poster un tel élément!

    Dans ce cas il va falloir utiliser les balises style. Cependant, si vous mettez le message tel quel, vous verrez rapidement que FA prend tous les retour à la ligne en compte! Vous devez alors retirer tous les retours à la ligne.

    Voilà la façon de faire :
    Code:
    <style type="text/css"> CODE ICI SANS RETOUR À LA LIGNE</style>


    Et voilà! =D J'espère que ce tuto vous a été utile et si vous avez la moindre question, n'hésitez pas à poster ici : https://www.never-utopia.com/f177-probleme-avec-mon-code !

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par NyoTheNeko le Mar 3 Mar 2015 - 10:20, édité 2 fois



    Neva
    Neva
    FémininAge : 32Messages : 18565

    Jeu 5 Juin 2014 - 17:59

    Et donc merci Nyo, je déplace !



     
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Jeu 12 Juin 2014 - 10:45

    Merci beaucoup ^^
    Glow
    Glow
    FémininAge : 24Messages : 94

    Mar 24 Juin 2014 - 17:29

    Merci, ça va m'être très utile c:
    Valinwë
    Valinwë
    FémininAge : 32Messages : 120

    Lun 30 Juin 2014 - 23:04

    Ah ! voilà qui m'intéresse. Merci beaucoup pour ce tuto !



    Fond en transparence - opacité (fond en couleur ou en image) Bangba10
    DaZeli
    DaZeli
    FémininAge : 28Messages : 377

    Mer 16 Juil 2014 - 0:30

    Merci!
    Zeroo
    Zeroo
    FémininAge : 29Messages : 76

    Mer 16 Juil 2014 - 21:36

    Merci pour ce tuto très clair & très pratique o/
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Dim 3 Aoû 2014 - 14:47

    Super tuto, ça être utile ! Merci beaucoup !
    Natsumi13
    Natsumi13
    FémininAge : 28Messages : 64

    Mar 12 Aoû 2014 - 13:32

    Arigato!
    Diabolik
    Diabolik
    FémininAge : 27Messages : 18

    Sam 16 Aoû 2014 - 18:00

    Merci beaucoup Nyo ! :3
    Klemmeria
    Klemmeria
    FémininAge : 24Messages : 147

    Mar 19 Aoû 2014 - 0:35

    merci!



    Fond en transparence - opacité (fond en couleur ou en image) Btqy
    Kora
    Kora
    FémininAge : 22Messages : 45

    Jeu 21 Aoû 2014 - 23:11

    merci
    Dimanche
    Dimanche
    FémininAge : 31Messages : 2

    Lun 25 Aoû 2014 - 17:04

    merci ! j'espère que je vais comprendre enfin ses codes x)
    Tine
    Tine
    FémininAge : 25Messages : 37

    Jeu 28 Aoû 2014 - 20:17

    Merchi !
    Sam-sam
    Sam-sam
    MasculinAge : 31Messages : 40

    Ven 29 Aoû 2014 - 20:37

    Merci
    Daydream
    Daydream
    FémininAge : 26Messages : 44

    Sam 30 Aoû 2014 - 14:01

    Merci !
    Dydy
    Dydy
    FémininAge : 33Messages : 493

    Sam 20 Sep 2014 - 22:17

    merci



    Fond en transparence - opacité (fond en couleur ou en image) 27978_signature_never_utopia_dydy_2
    Pee-Boo
    Pee-Boo
    FémininAge : 31Messages : 28

    Sam 27 Sep 2014 - 8:27

    Merci !
    Mr Yo
    Mr Yo
    MasculinAge : 49Messages : 37

    Dim 28 Sep 2014 - 12:15

    merci cheers
    Kacernetra
    Kacernetra
    FémininAge : 24Messages : 26

    Dim 5 Oct 2014 - 20:31

    merci beaucoup ! ^^
    andril
    andril
    FémininAge : 34Messages : 42

    Mar 21 Oct 2014 - 19:24

    merci !
    Anonymous
    Invité

    Ven 24 Oct 2014 - 15:03

    Merci ! :)
    sica3
    sica3
    MasculinAge : 50Messages : 135

    Sam 29 Nov 2014 - 2:11

    thank's
    Kianda
    Kianda
    MasculinAge : 23Messages : 88

    Lun 1 Déc 2014 - 18:46

    mekii :)



    Fond en transparence - opacité (fond en couleur ou en image) 1416416855-kandiasigna
    Hatawai
    Hatawai
    FémininAge : 30Messages : 17

    Mar 16 Déc 2014 - 14:27

    Oh! Merci!!
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 6:21