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) : 31638

    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 : 16Message(s) : 24
    Miss Pirate
    le Dim 24 Nov 2013 - 14:28
    J'adore l'idée, vraiment Very Happy Je pique
    FémininAge : 18Message(s) : 166
    Plume'
    le Dim 24 Nov 2013 - 14:51
    Merci beaucoup, c'est magnifique !
    FémininAge : 36Message(s) : 77
    Susan Storm
    le Dim 24 Nov 2013 - 18:23
    Oh, c'est vraiment magnifique! Merci *-*
    MasculinAge : 22Message(s) : 129

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Noob's
    le Dim 24 Nov 2013 - 22:56
    Merci :o
    FémininAge : 23Message(s) : 27
    Swann Calder
    le Lun 25 Nov 2013 - 1:26
    mercii
    FémininAge : 23Message(s) : 69
    Milkiniz
    le Lun 25 Nov 2013 - 10:50
    Merci pour le tuto, toujours aussi cool les tuto proposé par NU *-*
    FémininAge : 25Message(s) : 154

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    G U E R L A I N
    le Lun 25 Nov 2013 - 23:55
    merci


    FémininAge : 15Message(s) : 146

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Eerie Ange's
    le Mer 27 Nov 2013 - 14:33
    Merci (=
    FémininAge : 15Message(s) : 72
    Yukionna
    le Mer 27 Nov 2013 - 14:38
    Merci x3


    FémininAge : 22Message(s) : 92
    Meilia
    le Mer 27 Nov 2013 - 15:22
    Superbe ! Merci
    FémininAge : 24Message(s) : 58
    Titia
    le Jeu 28 Nov 2013 - 15:47
    Merci du partage, j'aime beaucoup la PA


    FémininAge : 17Message(s) : 74
    allcl
    le Jeu 28 Nov 2013 - 20:09
    Merci beaucoup!

    Je peux la prendre?
    FémininAge : 21Message(s) : 129
    Azuriel
    le Ven 29 Nov 2013 - 12:53
    Je m'en vais tester tiens ^^ Merci :3
    FémininAge : 17Message(s) : 299
    CaraDelevngnie
    le Ven 29 Nov 2013 - 23:14
    Oulala je suis un peu perdue moi ^_^ Mais bon, un tout grand merci, je pense pourvoir m'en sortir avec tout se qui m'est donné ici, en tout cas c'est superbe tout ça !!


    FémininAge : 16Message(s) : 86
    Etoile du Virtuose
    le Sam 30 Nov 2013 - 22:42
    Magnifique *-*


    MasculinAge : 21Message(s) : 58
    Abate.7
    le Dim 1 Déc 2013 - 1:10
    merci.
    FémininAge : 24Message(s) : 47
    Joxtop
    le Lun 2 Déc 2013 - 16:29
    Très beau code *o* Merci Very Happy
    FémininAge : 17Message(s) : 23
    Rictus
    le Mar 3 Déc 2013 - 18:52
    Waah, Merci **
    Invité
    le Mer 4 Déc 2013 - 20:21
    Thanks de cette nouvelle beauté Captain' Je suis époustouflée *o*
    MasculinAge : 23Message(s) : 54
    Asaki
    le Jeu 5 Déc 2013 - 13:26
    Merci !
    FémininAge : 24Message(s) : 3
    Yamana
    le Jeu 5 Déc 2013 - 18:02
    Ca a l'air vraiment génial comme PA, j'ai hâte de voir comment elle est constituée :o
    et merci à toi :3
    Invité
    le Ven 6 Déc 2013 - 4:21
    merci :)
    FémininAge : 26Message(s) : 32
    Bowtie
    le Ven 6 Déc 2013 - 22:49
    Merci =)
    FémininAge : 19Message(s) : 32
    Dilun
    le Sam 7 Déc 2013 - 17:25
    Mais c'est quoi ce truc de fifou *.*
    C'est juste trop beau!!!
    Merci mille fois Sparrow (: ♥
    FémininAge : 23Message(s) : 70
    Nightwing
    le Sam 7 Déc 2013 - 21:59
    Merci (:
    Contenu sponsorisé
    Aujourd'hui à 15:58

      La date/heure actuelle est Dim 25 Sep 2016 - 15:58