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.


    PA Carousel (4 blocs) - css & html

    Partagez
    MasculinAge : 31Message(s) : 31652

    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 1 Nov 2013 - 13:59
    Rappel du premier message :

    Page d'Accueil en "Carousel"


    Voici une page d'accueil en carousel, comportant donc 4 blocs de texte pouvant donner l'impression de "tourner" lorsque l'on clique sur le suivant. Il sera compliqué d'expliquer ça en détail avec du texte alors une démo sera nettement plus efficace, la voici :

    DEMO CAROUSEL

    Comme vous pouvez le voir, la PA comporte plusieurs blocs, dont un bloc rouge en avant et en grande taille, un bloc bleu et un bloc jaune de part et d'autre et d'une taille réduite. Un quatrième bloc se situe derrière et donc caché par le bloc rouge. Si vous cliquez sur le bloc jaune il prendra la place du bloc rouge qui lui même prendra la place du bloc bleu et vous verrez alors apparaitre ce quatrième bloc (violet) qui prendra l'ancienne place du bloc jaune. Bref, l'idée c'est qu'un clic sur l'un des deux blocs sur le côté le fait venir devant et donne l'impression que les 4 blocs tournent comme sur un plateau avec un effet de profondeur puisque leur taille diminue  s'ils vont derrière et augmente s'ils viennent en premier plan.

    Cette PA est déjà remplie pour vous faciliter la tâche mais vous pouvez facilement changer le contenu des blocs. Leur apparence peut également être modifiée, j'ai mis une couleur différente pour chaque afin que le visuel et le principe de cette PA soit compris plus facilement, mais les 4 blocs peuvent très bien avoir le même aspect.

    Passons à l'installation je vous parlerais de la personnalisation ensuite...

    Un petit "merci" en réponse à ce topic sera nécessaire pour voir le code de cette PA "carousel", et je rappelle que le CREDIT est à laisser dans la page, ou à mettre quoi qu'il en soit sur votre forum en cas d'utilisation de cette PA si vous décidez d'en modifier le contenu.



    Bonne utilisation / personnalisation !

    Un problème sur ce tuto' ?En cas de problème de compréhension, d'application ou de personnalisation de ce tutoriel, posez vos questions en ouvrant un sujet [url=http://www.never-utopia.com/f177-probleme-avec-mon-codedans cette section[/url].
    Ne postez pas vos questions à la suite car elles ne pourront pas être traitées correctement.


    FémininAge : 17Message(s) : 32
    Livoire
    le Mar 17 Fév 2015 - 17:57
    Merci ! ^^
    FémininAge : 25Message(s) : 41
    Velvet-Mist
    le Sam 21 Fév 2015 - 13:21
    Sublime! Merci!
    FémininAge : 15Message(s) : 49
    Redingdom
    le Sam 28 Fév 2015 - 19:22
    C'est magnifique, merci du partage
    FémininAge : 20Message(s) : 16
    Claraaa
    le Mar 3 Mar 2015 - 21:39
    C'est superbe et merci du partage !
    FémininAge : 25Message(s) : 12
    Gryps
    le Jeu 5 Mar 2015 - 20:27
    Merci ! ♥
    FémininAge : 24Message(s) : 125
    Amacky
    le Ven 13 Mar 2015 - 15:40
    Merci :)
    FémininAge : 24Message(s) : 91
    Neilia
    le Ven 13 Mar 2015 - 19:00
    Merci ^^
    FémininAge : 42Message(s) : 191
    Océ
    le Dim 15 Mar 2015 - 15:17
    merci


    Bonjours je rechercher quelque personne pour jouer des pv's sur mon forum voici le lien vers ma demande : http://www.never-utopia.com/t59204-z-nation-a-besoin-de-ses-pv-s
    FémininAge : 23Message(s) : 49

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Costati
    le Dim 15 Mar 2015 - 18:15
    Merci
    FémininAge : 20Message(s) : 8
    SafiraPhoenix
    le Mar 31 Mar 2015 - 23:17
    merci!
    FémininAge : 19Message(s) : 27

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    ATHENA.
    le Jeu 9 Avr 2015 - 17:22
    :captain:
    FémininAge : 24Message(s) : 23

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Champi
    le Lun 13 Avr 2015 - 23:11
    J'aime beaucoup ! Je prend !!


    Spoiler:
    Age : 31Message(s) : 18684
    N-U Game Master
    le Lun 13 Avr 2015 - 23:11
    Le membre 'Champi' a effectué l'action suivante : Chasse aux chocolats sauvages

    #1 'Libre Service' :


    --------------------------------

    #2 'Libre Service' :


    --------------------------------

    #3 'Libre Service' :
    FémininAge : 13Message(s) : 148

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Flaura
    le Mer 15 Avr 2015 - 13:39
    Michi !


    FémininAge : 17Message(s) : 106
    Litonya
    le Mer 22 Avr 2015 - 13:10
    Magnifique !!!!
    FémininAge : 16Message(s) : 23
    Féery
    le Mer 6 Mai 2015 - 18:10
    C'est génial *w*
    FémininAge : 17Message(s) : 49

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Seaphie
    le Ven 8 Mai 2015 - 22:33
    Merci.
    FémininAge : 19Message(s) : 59
    Kira de Shola
    le Sam 9 Mai 2015 - 11:50
    merci
    FémininAge : 21Message(s) : 61
    Slown
    le Sam 9 Mai 2015 - 16:02
    merci :)
    FémininAge : 22Message(s) : 77
    Maxine Evans
    le Ven 15 Mai 2015 - 12:50
    merci :)
    MasculinAge : 18Message(s) : 22
    Keith Sanders
    le Sam 16 Mai 2015 - 17:32
    Très joli :)
    FémininAge : 14Message(s) : 32

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Illusion d'un Rêve
    le Dim 24 Mai 2015 - 15:53
    J'aime n__n
    FémininAge : 31Message(s) : 81
    Mystick
    le Dim 31 Mai 2015 - 22:57
    Super innovant j'adore !
    MasculinAge : 21Message(s) : 61
    Florian Takiya
    le Sam 13 Juin 2015 - 3:50
    Merci beaucoup ♫
    FémininAge : 30Message(s) : 98
    Kripterya
    le Mer 8 Juil 2015 - 0:05
    i love this one!
    Contenu sponsorisé
    Aujourd'hui à 6:59

      La date/heure actuelle est Jeu 29 Sep 2016 - 6:59