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
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    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.



    avatar
    alexandre385
    MasculinAge : 16Messages : 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 :)
    avatar
    Krolinger
    MasculinAge : 27Messages : 67

    le Mar 24 Juin 2014 - 20:19

    Thanks



    avatar
    Khaina
    FémininAge : 21Messages : 13

    le Ven 27 Juin 2014 - 17:26

    Merci
    avatar
    Marwin
    MasculinAge : 24Messages : 47

    le Sam 5 Juil 2014 - 23:16

    merci
    avatar
    Invité

    le Sam 5 Juil 2014 - 23:36

    Merci :3
    avatar
    Frosty Blue
    FémininAge : 21Messages : 161

    le Lun 7 Juil 2014 - 15:10

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

    le Mar 8 Juil 2014 - 22:50

    Merci





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

    le Lun 28 Juil 2014 - 1:23

    Merci
    avatar
    Miss Julie
    FémininAge : 34Messages : 12

    le Lun 11 Aoû 2014 - 3:12

    Merci beaucoup !!!
    avatar
    Balmung Lynren
    MasculinAge : 29Messages : 133

    le Ven 10 Oct 2014 - 2:10

    merci



    avatar
    skyfighter
    MasculinAge : 34Messages : 346

    le Jeu 16 Oct 2014 - 12:15

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





    avatar
    Daydream
    FémininAge : 19Messages : 44

    le Jeu 13 Nov 2014 - 23:37

    Merci !
    avatar
    sica3
    MasculinAge : 43Messages : 135

    le Sam 29 Nov 2014 - 2:16

    thank's
    avatar
    Okashi
    FémininAge : 17Messages : 30

    le Mer 10 Déc 2014 - 20:51

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

    le Mar 16 Déc 2014 - 14:26

    C'est top! Merci!
    avatar
    Kianda
    MasculinAge : 16Messages : 88

    le Mar 20 Jan 2015 - 18:49

    Merci !



    avatar
    miss69
    FémininAge : 33Messages : 40

    le Sam 31 Jan 2015 - 9:09

    Merci pour ce tuto :)
    avatar
    Sacha73
    MasculinAge : 37Messages : 66

    le Sam 14 Fév 2015 - 23:32

    Hello,

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

    le Mar 14 Avr 2015 - 23:48

    Merci !
    avatar
    ho0thoot
    MasculinAge : 24Messages : 4

    le Mer 10 Juin 2015 - 17:01

    Sympa comme tout ça !
    avatar
    Flitch
    MasculinAge : 28Messages : 45

    le Ven 3 Juil 2015 - 22:21

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

    le Jeu 3 Sep 2015 - 22:20

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

    le Sam 7 Nov 2015 - 17:18

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

    le Dim 8 Nov 2015 - 13:36

    merci !



    eLoChA.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 29 Juin 2017 - 7:28