AccueilFAQRechercherMembresGroupesS'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.


    Effet "lightbox" pour afficher un élément (CSS)

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Ven 13 Déc 2013 - 11:52

    Rappel du premier message :

    Effet "lightbox" en CSS

    Bonjour,

    Dans ce tutoriel je vais vous expliquer comment créer une sorte de "lightbox" pour y placer un élément de votre choix. Une "lightbox" est un effet crée en javascript qui, lors d'un clic sur une image par exemple, va placer un voile noir sur la page et agrandir l'image au centre. L'élément est alors "au dessus" de la page et celle-ci n'est plus accessible momentanément. Pour fermer l'élément il faut alors cliquer sur un bouton "X" ou "fermer", ou bien directement sur la zone sombre autour de l'image ou de l'élément.
    Un petit exemple vous parlera peut-être d'avantage.

    Puisque nous n'allons ici crée qu'un "effet" lightbox, il n'y aura pas autant de transition (ça serait possible mais nous allons faire simple) et nous allons l'utiliser pour un élément unique et non comme dans l'exemple pour une série d'images type "galerie".

    Pour vous montrer ce que donnera ce tutoriel concrètement, voici quelques screens :


    Le bouton, qui se situe ici dans la PA.


    Au clic sur ce bouton le voile descend sur la page progressivement.


    Au final nous avons notre zone de contenu, isolée du reste par ce voile noir en opacité réduite.

    Commençons !

    Information : j'ai souhaité réaliser ce code en "tutoriel", il y a donc des étapes, une progression, des explications... Si vous voulez utiliser directement le code allez en fin de tuto' où il est récapitulé en entier. Cependant, avant d'aller poster toute demande d'aide en codage le concernant, lisez entièrement ce tutoriel.

    Crédit svp !En cas d'utilisation de ce tutoriel merci de placer un crédit (lien vers Never-Utopia) sur votre forum où est utilisé le code, même modifié. C'est un remerciement simple qui ne coûte pas grand chose Wink


    Pour pouvoir lire le contenu merci de poster un message à la suite Wink



    Un problème sur ce tutoriel ?Si vous avez un problème dans la réalisation de ce tutoriel, merci d'ouvrir un topic dans "Problème avec mon code"l afin que l'aide apportée puisse être efficace.



    alexandre385
    MasculinAge : 15Messages : 25

    le Mer 21 Mai 2014 - 19:49

    Merci ^^
    stefansalvatore
    MasculinAge : 21Messages : 17

    le Dim 25 Mai 2014 - 18:31

    C'est ce que je recherchais, merci :)
    Krolinger
    MasculinAge : 26Messages : 67

    le Mar 24 Juin 2014 - 20:19

    Thanks



    Khaina
    FémininAge : 21Messages : 13

    le Ven 27 Juin 2014 - 17:26

    Merci
    Marwin
    MasculinAge : 24Messages : 47

    le Sam 5 Juil 2014 - 23:16

    merci
    Invité

    le Sam 5 Juil 2014 - 23:36

    Merci :3
    Frosty Blue
    FémininAge : 20Messages : 155

    le Lun 7 Juil 2014 - 15:10

    Merci! C'est exactement ce que je cherchait!
    Eilema
    MasculinAge : 24Messages : 58

    le Mar 8 Juil 2014 - 22:50

    Merci





    Je suis un monstre sodomite <3
    EricSouvaltzis
    MasculinAge : 17Messages : 47

    le Lun 28 Juil 2014 - 1:23

    Merci
    Miss Julie
    FémininAge : 34Messages : 12

    le Lun 11 Aoû 2014 - 3:12

    Merci beaucoup !!!
    Balmung Lynren
    MasculinAge : 28Messages : 133

    le Ven 10 Oct 2014 - 2:10

    merci



    skyfighter
    MasculinAge : 33Messages : 339

    le Jeu 16 Oct 2014 - 12:15

    Curieux ...Je jette un oeil .. thanks :)





    Daydream
    FémininAge : 19Messages : 40

    le Jeu 13 Nov 2014 - 23:37

    Merci !
    sica3
    MasculinAge : 43Messages : 135

    le Sam 29 Nov 2014 - 2:16

    thank's
    Okashi
    FémininAge : 16Messages : 30

    le Mer 10 Déc 2014 - 20:51

    Merci Very Happy
    Hatawai
    FémininAge : 23Messages : 17

    le Mar 16 Déc 2014 - 14:26

    C'est top! Merci!
    Kianda
    MasculinAge : 15Messages : 88

    le Mar 20 Jan 2015 - 18:49

    Merci !



    miss69
    FémininAge : 33Messages : 40

    le Sam 31 Jan 2015 - 9:09

    Merci pour ce tuto :)
    Sacha73
    MasculinAge : 36Messages : 63

    le Sam 14 Fév 2015 - 23:32

    Hello,

    Merci pour le partage.
    Anazera
    MasculinAge : 20Messages : 37

    le Mar 14 Avr 2015 - 23:48

    Merci !
    ho0thoot
    MasculinAge : 24Messages : 4

    le Mer 10 Juin 2015 - 17:01

    Sympa comme tout ça !
    Flitch
    MasculinAge : 27Messages : 35

    le Ven 3 Juil 2015 - 22:21

    Merci :)
    Nevida
    FémininAge : 25Messages : 29

    le Jeu 3 Sep 2015 - 22:20

    merci :)
    CCFlowdia
    FémininAge : 18Messages : 3

    le Sam 7 Nov 2015 - 17:18

    Merciii ça m'a l'air très intéressant ! 'u'
    Elocha
    FémininAge : 66Messages : 255

    le Dim 8 Nov 2015 - 13:36

    merci !



    eLoChA.
    Contenu sponsorisé

    Aujourd'hui à 11:42


      La date/heure actuelle est Sam 10 Déc 2016 - 11:42