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) : 43
    Kassou
    le Lun 11 Nov 2013 - 13:55
    Merci ^^
    FémininAge : 18Message(s) : 42
    Marion.
    le Mar 12 Nov 2013 - 22:54
    Magnifique °-°' merci ! *°*


    FémininAge : 20Message(s) : 53
    mathou_inu
    le Mer 13 Nov 2013 - 18:39
    Merci !


    MasculinAge : 32Message(s) : 190

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Katsura
    le Jeu 14 Nov 2013 - 1:25
    Super pa o/ Merci beaucoup capitaine ^^
    MasculinAge : 39Message(s) : 80
    fregadeth
    le Jeu 14 Nov 2013 - 14:49
    Super merci beaucoup
    FémininAge : 17Message(s) : 75
    Fleurine
    le Jeu 14 Nov 2013 - 18:15
    merci !!
    FémininAge : 24Message(s) : 93

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Namco
    le Jeu 14 Nov 2013 - 21:37
    merci ! *__*
    FémininAge : 25Message(s) : 97

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Schnappi
    le Ven 15 Nov 2013 - 0:14
    Juste sublimement magnifique *-* wahou *-*
    FémininAge : 28Message(s) : 205

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Looney
    le Ven 15 Nov 2013 - 19:19
    Un énorme merci pour ce code !


    FémininAge : 25Message(s) : 3
    Yukari
    le Ven 15 Nov 2013 - 23:45
    très belle PA, merci!
    FémininAge : 24Message(s) : 173
    swagg
    le Sam 16 Nov 2013 - 16:07
    Merci
    MasculinAge : 33Message(s) : 409
    P'tit loup
    le Dim 17 Nov 2013 - 13:06
    j'adore, merciiiiiiiiiiii \o/


    FémininAge : 20Message(s) : 12
    MlleJohanna
    le Dim 17 Nov 2013 - 13:37
    C'est vraiment superbe et original, merci du partage ♥
    FémininAge : 28Message(s) : 568

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    pizi
    le Lun 18 Nov 2013 - 11:39
    Merci



    FémininAge : 24Message(s) : 66
    Ange09
    le Lun 18 Nov 2013 - 22:46
    Merci !
    FémininAge : 20Message(s) : 15
    Plùmyts
    le Mar 19 Nov 2013 - 20:46
    Superbe page d'accueil !
    FémininAge : 28Message(s) : 108
    Milka
    le Mer 20 Nov 2013 - 12:23
    Sublime, merci Wink
    FémininAge : 18Message(s) : 51
    Bridgess
    le Jeu 21 Nov 2013 - 20:41
    Une Pa trop jolie ! Je trouve ce système d'onglets très sympa :3 Merci du partage :p
    FémininAge : 28Message(s) : 212

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    louha
    le Jeu 21 Nov 2013 - 21:13
    C'est magnifique
    FémininAge : 25Message(s) : 24
    Rose24
    le Ven 22 Nov 2013 - 12:18
    merci !
    FémininAge : 22Message(s) : 85
    Kitty Kat.
    le Ven 22 Nov 2013 - 21:47
    Haaaaaaaaaaaan j'en suis amoureuse !!
    FémininAge : 18Message(s) : 65

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    HeartLessB
    le Sam 23 Nov 2013 - 0:22
    Merci beaucoup
    FémininAge : 16Message(s) : 21
    LimitedTime
    le Sam 23 Nov 2013 - 17:21
    merci!
    FémininAge : 20Message(s) : 14
    YuuNyuu
    le Sam 23 Nov 2013 - 20:15
    Merci !
    FémininAge : 23Message(s) : 79
    Draly
    le Dim 24 Nov 2013 - 14:01
    Thank you.:p
    Contenu sponsorisé
    Aujourd'hui à 22:29

      La date/heure actuelle est Mer 28 Sep 2016 - 22:29