Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    MasculinAge : 31Message(s) : 31699

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Ven 13 Déc 2013 - 11:52
    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.


    MasculinAge : 26Message(s) : 277

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Deadpoolio
    le Sam 14 Déc 2013 - 10:52
    Prems mon capitaine + merci :)
    FémininAge : 21Message(s) : 61

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pony62
    le Sam 14 Déc 2013 - 11:50
    Ouuuh ! voilà qui me semble bien intéressant!MERCI beaucoup ♥


    Underconstruction ♫
    FémininAge : 17Message(s) : 43
    Kassou
    le Sam 14 Déc 2013 - 17:29
    Merci **
    MasculinMessage(s) : 17
    Etakine
    le Lun 16 Déc 2013 - 17:24
    Merci, enfin je vais savoir !
    MasculinAge : 26Message(s) : 4

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    SellsDreamsTV
    le Lun 6 Jan 2014 - 23:25
    Mercii beaucoup !
    MasculinAge : 21Message(s) : 25

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    rhino
    le Ven 17 Jan 2014 - 0:34
    Merci ! Very Happy
    FémininAge : 26Message(s) : 117
    [W]endy
    le Mar 18 Fév 2014 - 21:58
    Merci pour ce tuto ! (:
    MasculinAge : 22Message(s) : 142

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Databar
    le Jeu 20 Fév 2014 - 22:39
    merci
    MasculinAge : 25Message(s) : 39
    Enidech
    le Sam 22 Fév 2014 - 16:06
    Merci Sparrow, je suis curieux de voir ce tutoriel Very Happy
    MasculinAge : 25Message(s) : 39
    Enidech
    le Dim 23 Fév 2014 - 0:25
    Alors, c'est superbe, je me suis servi de cet effet pour une iframe centrée en lightbox, en revanche, j'ai juste question, est-il normal qu'à l'ouverture de "la lightbox", la page descend un peu, et qu'à sa fermeture, le forum retourne automatiquement en haut de page?

    C'est dommage, en soi, ça gâche un peu l'effet, quelqu'un sait-il comment éviter ce défilement de la page en arrière de la lightbox?

    Cordialement.
    FémininAge : 25Message(s) : 92
    x_Titia
    le Mer 26 Fév 2014 - 13:01
    Ca m'interresse beaucoup! Merci! Very Happy
    FémininAge : 27Message(s) : 101
    Lady Doll
    le Sam 1 Mar 2014 - 17:36
    merci =)
    FémininAge : 20Message(s) : 121

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Isalia
    le Mar 4 Mar 2014 - 20:15
    Je cherchais ! Merci ♥
    MasculinAge : 23Message(s) : 56

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Choubakawa
    le Mer 5 Mar 2014 - 21:30
    Merci :)


    FémininAge : 17Message(s) : 60
    Ailou ~3
    le Mar 11 Mar 2014 - 15:26
    Merci du partage ! :DD
    FémininAge : 23Message(s) : 26
    -Mishirame-
    le Lun 17 Mar 2014 - 15:34
    merci
    FémininAge : 22Message(s) : 37
    Minze
    le Mer 19 Mar 2014 - 18:39
    Merci !


    FémininAge : 25Message(s) : 72
    Aya Hanazawa
    le Lun 7 Avr 2014 - 23:10
    Han je le rechercher ce code, mille merci
    MasculinAge : 22Message(s) : 20
    Darsey
    le Sam 26 Avr 2014 - 12:05
    Merci :)
    FémininAge : 26Message(s) : 39
    Faraday
    le Lun 28 Avr 2014 - 18:48
    Thank's a lot!
    FémininAge : 38Message(s) : 66
    bibi0712
    le Ven 2 Mai 2014 - 13:32
    Merciiii  :love: 
    FémininAge : 24Message(s) : 74

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    2/10  (2/10)
    Makuro
    le Lun 12 Mai 2014 - 10:54
    *.*

    Exactement le genre d'effet que je recherchais pour mon forum. Thank you, Captain.
    FémininAge : 25Message(s) : 69
    Elora Hanta
    le Jeu 15 Mai 2014 - 11:19
    Merci  Very Happy 
    FémininAge : 25Message(s) : 26
    Canibal
    le Ven 16 Mai 2014 - 16:47
    Merciii!
    Contenu sponsorisé
    Aujourd'hui à 7:07

      La date/heure actuelle est Dim 4 Déc 2016 - 7:07