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

    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 - 8: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 : 30Message(s) : 18
    kiracamus
    le Dim 20 Sep - 9:12
    Très belle P.a, merci ^ ^
    MasculinAge : 20Message(s) : 40
    Zealanders
    le Dim 20 Sep - 11:32
    Petit coup d’œil :)
    FémininAge : 24Message(s) : 1353

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Dim 20 Sep - 16:35
    Merci (*≧▽≦)
    FémininAge : 18Message(s) : 70
    Jane Bingum
    le Sam 26 Sep - 6:26
    Superbe! *.*
    FémininAge : 25Message(s) : 9
    Oupsie
    le Jeu 1 Oct - 14:01
    Merci ! =)
    MasculinAge : 25Message(s) : 151

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Anselm
    le Dim 4 Oct - 10:42
    Merci !
    FémininAge : 16Message(s) : 248

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Yuki Kaga
    le Mar 6 Oct - 14:04
    Thank you~
    FémininAge : 20Message(s) : 40

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kya-chan
    le Mar 6 Oct - 16:44
    Merci pour cette PA ! o/



    If I had a hammer...
    I wanna do bad things with you~

    MasculinAge : 25Message(s) : 100
    Shaolan
    le Sam 10 Oct - 4:47
    Merci beaucoup
    FémininAge : 16Message(s) : 130
    Neya
    le Jeu 15 Oct - 14:58
    Merci
    MasculinAge : 20Message(s) : 40

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Demowee
    le Sam 17 Oct - 22:45
    Un seul mot : J'ADORE ! Merci beaucoup =3
    FémininAge : 25Message(s) : 15
    Tristelune
    le Lun 19 Oct - 17:08
    Merchi pour cette belle page d'accueil (:
    MasculinAge : 20Message(s) : 14
    Kuroshiro
    le Ven 23 Oct - 11:53
    Très belle PA
    FémininAge : 19Message(s) : 180

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Sakura-chan
    le Mar 27 Oct - 18:56
    Très original, merci. ^^
    FémininAge : 18Message(s) : 64
    Shanoa
    le Jeu 29 Oct - 12:57
    merci beaucoup
    FémininAge : 23Message(s) : 83

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lamire
    le Ven 30 Oct - 22:06
    merci
    FémininAge : 22Message(s) : 22
    Love_RPG
    le Dim 1 Nov - 18:18
    Merci ♥
    Age : 22Message(s) : 47
    br4nd0n
    le Dim 22 Nov - 14:28
    C'est du beau travail, bravo



    Kit by Adil94
    FémininAge : 20Message(s) : 53
    Myrcella Heaven
    le Dim 29 Nov - 9:40
    Merci !
    MasculinAge : 21Message(s) : 365

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kiki85
    le Mar 1 Déc - 23:03
    Original !
    FémininAge : 32Message(s) : 796

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    1/10  (1/10)
    Hancok
    le Jeu 10 Déc - 7:53
    Hello, merci pour cette jolie PA :)




    FémininAge : 34Message(s) : 77
    Emelyne
    le Sam 19 Déc - 8:37
    merci beaucoup !
    MasculinAge : 24Message(s) : 177

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Raeden Liddell
    le Lun 21 Déc - 14:26
    Merci et bravo
    MasculinAge : 16Message(s) : 101
    Iguolta
    le Mer 23 Déc - 17:54
    Merci :)



    Merci à Cruelly pour le kit Very Happy
    Merci beaucoup ^^:

    Merci Raeden Liddell Very Happy


    Merci Bubodox Very Happy


    Merci Shoki Very Happy
    FémininAge : 22Message(s) : 12
    Ooks
    le Sam 2 Jan - 9:33
    J'ai déjà vu cette PA sur un forum il y a.... longtemps et j'étais tombée amoureuse. Merci beaucoup pour ce travail et ce partage !
    Contenu sponsorisé
    Aujourd'hui à 18:25

      La date/heure actuelle est Lun 26 Sep - 18:25