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

    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.


    Invité
    le Ven 20 Déc 2013 - 22:53
    C'est dommage que le target fasse bouger la page mais c'est quand même bien pratique pour du CSS uniquement, donc je suis curieux de voir ce tuto ! Merci. ^^
    FémininAge : 18Message(s) : 134

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Ema Skye
    le Sam 21 Déc 2013 - 17:17
    Merci ! **
    FémininAge : 19Message(s) : 41
    Igorette.
    le Dim 22 Déc 2013 - 16:31
    merci
    FémininAge : 17Message(s) : 61
    Choko
    le Lun 23 Déc 2013 - 0:35
    Merci encore !
    FémininAge : 16Message(s) : 22
    RainOrigami
    le Lun 23 Déc 2013 - 11:24
    Merci du partage ! **
    FémininAge : 20Message(s) : 54
    Artémis Walker
    le Lun 23 Déc 2013 - 13:26
    Merki ♥


    FémininAge : 22Message(s) : 40
    Dezaia
    le Lun 23 Déc 2013 - 20:28
    Merci elle est juste superbe, je pouvais pas rêver mieux quoi ;w;


    FémininAge : 19Message(s) : 174
    Piratress
    le Mar 24 Déc 2013 - 11:35
    *_* j'adore cette Pa ^^
    FémininAge : 17Message(s) : 33
    Geen
    le Mar 24 Déc 2013 - 17:47
    Merci ♥
    FémininAge : 24Message(s) : 39
    ♦ Mari-Jane
    le Jeu 26 Déc 2013 - 16:21
    Merci :)
    FémininAge : 21Message(s) : 132

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Afterglow.winter
    le Jeu 26 Déc 2013 - 18:21
    C'est original et jolie, j'adore, merci du partage


    How do you get up from an all time low?
    FémininAge : 28Message(s) : 320
    Edward Speleers
    le Jeu 26 Déc 2013 - 21:58
    Je l'emprunte, merci beaucoup


    MasculinAge : 36Message(s) : 40
    hurudy
    le Jeu 26 Déc 2013 - 23:04
    Le rendu est vraiment sympa, merci
    FémininAge : 31Message(s) : 48
    Elyade
    le Ven 27 Déc 2013 - 0:28
    Du beau boulot, comme à chaque fois ! Merci pour le partage et le travail fourni !
    FémininAge : 23Message(s) : 20

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    0pium
    le Ven 27 Déc 2013 - 0:31
    J'aime beaucoup merci Very Happy
    FémininMessage(s) : 30
    Mako
    le Dim 29 Déc 2013 - 17:07
    Merci :)
    MasculinAge : 22Message(s) : 62
    giannismoll7
    le Dim 29 Déc 2013 - 19:32
    Merci
    FémininAge : 24Message(s) : 102
    LyN[ss]
    le Mar 31 Déc 2013 - 13:08
    Meurshi beaucoup !


    ❝Y.O.U G.E.T L.Y.N.[.S.S.].'.E.D❞
    how could you hate me? When all I ever wanted to be was you ? How could you love me? When all you ever gave me were open wounds ? Tell me why you broke me down and betrayed my trust in you ?
    FémininAge : 23Message(s) : 197
    Stitch56
    le Mar 31 Déc 2013 - 14:04
    Merci
    FémininAge : 28Message(s) : 101
    TUC
    le Mar 31 Déc 2013 - 16:39
    merci (: (:


    FémininAge : 20Message(s) : 64
    Natsumi13
    le Mer 1 Jan 2014 - 1:15
    Merci!! C'est vraiment trop beau *o*
    FémininAge : 17Message(s) : 47
    Waphy's
    le Mer 1 Jan 2014 - 14:24
    Merci ♥
    FémininAge : 19Message(s) : 25
    AlyssYui
    le Mer 1 Jan 2014 - 19:01
    Wow. Très joli PA. ^^
    FémininAge : 19Message(s) : 14

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Ohkawa
    le Mer 1 Jan 2014 - 21:36
    On a du le dire souvent mais... Merci pour cette PA ! Elle est vraiment... cool ! ^^ (J'imagine même pas la longueur du codage comment elle doit être ! oO Enfin quoique, je m'y connait pas trop trop non plus ^^' )


    FémininAge : 20Message(s) : 161
    Lestrange
    le Jeu 2 Jan 2014 - 10:40
    SU-PER ! Merci beaucoup du partage Cap'tain Very Happy
    Contenu sponsorisé
    Aujourd'hui à 3:58

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