AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    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.



    avatar
    kiracamus
    FémininAge : 31Messages : 18

    le Dim 20 Sep 2015 - 15:12

    Très belle P.a, merci ^ ^
    avatar
    Zealanders
    MasculinAge : 21Messages : 42

    le Dim 20 Sep 2015 - 17:32

    Petit coup d’œil :)
    avatar
    Kelalin
    FémininAge : 24Messages : 1528

    le Dim 20 Sep 2015 - 22:35

    Merci (*≧▽≦)
    avatar
    Jane Bingum
    FémininAge : 19Messages : 80

    le Sam 26 Sep 2015 - 12:26

    Superbe! *.*
    avatar
    Oupsie
    FémininAge : 26Messages : 9

    le Jeu 1 Oct 2015 - 20:01

    Merci ! =)
    avatar
    Anselm
    MasculinAge : 26Messages : 151

    le Dim 4 Oct 2015 - 16:42

    Merci !
    avatar
    Yuki Kaga
    FémininAge : 17Messages : 261

    le Mar 6 Oct 2015 - 20:04

    Thank you~
    avatar
    Kya-chan
    FémininAge : 21Messages : 90

    le Mar 6 Oct 2015 - 22:44

    Merci pour cette PA ! o/




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

    avatar
    Shaolan
    MasculinAge : 25Messages : 103

    le Sam 10 Oct 2015 - 10:47

    Merci beaucoup
    avatar
    Neya
    FémininAge : 18Messages : 164

    le Jeu 15 Oct 2015 - 20:58

    Merci
    avatar
    Demowee
    MasculinAge : 21Messages : 43

    le Dim 18 Oct 2015 - 4:45

    Un seul mot : J'ADORE ! Merci beaucoup =3
    avatar
    Tristelune
    FémininAge : 26Messages : 15

    le Lun 19 Oct 2015 - 23:08

    Merchi pour cette belle page d'accueil (:
    avatar
    Kuroshiro
    MasculinAge : 21Messages : 14

    le Ven 23 Oct 2015 - 17:53

    Très belle PA
    avatar
    Sakura-chan
    FémininAge : 20Messages : 180

    le Mar 27 Oct 2015 - 23:56

    Très original, merci. ^^
    avatar
    Shanoa
    FémininAge : 19Messages : 64

    le Jeu 29 Oct 2015 - 17:57

    merci beaucoup
    avatar
    Lamire
    FémininAge : 23Messages : 88

    le Sam 31 Oct 2015 - 3:06

    merci
    avatar
    Love_RPG
    FémininAge : 23Messages : 32

    le Dim 1 Nov 2015 - 23:18

    Merci ♥
    avatar
    br4nd0n
    Age : 23Messages : 50

    le Dim 22 Nov 2015 - 19:28

    C'est du beau travail, bravo




    Kit by Adil94
    avatar
    Myrcella Heaven
    FémininAge : 21Messages : 53

    le Dim 29 Nov 2015 - 14:40

    Merci !
    avatar
    Kiki85
    MasculinAge : 22Messages : 389

    le Mer 2 Déc 2015 - 4:03

    Original !
    avatar
    Hancok
    FémininAge : 33Messages : 979

    le Jeu 10 Déc 2015 - 12:53

    Hello, merci pour cette jolie PA :)





    avatar
    Emelyne
    FémininAge : 35Messages : 77

    le Sam 19 Déc 2015 - 13:37

    merci beaucoup !
    avatar
    Raeden Liddell
    MasculinAge : 25Messages : 177

    le Lun 21 Déc 2015 - 19:26

    Merci et bravo
    avatar
    Iguolta
    MasculinAge : 17Messages : 101

    le Mer 23 Déc 2015 - 22:54

    Merci :)




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

    Merci Raeden Liddell Very Happy


    Merci Bubodox Very Happy


    Merci Shoki Very Happy
    avatar
    Ooks
    FémininAge : 23Messages : 12

    le Sam 2 Jan 2016 - 14: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é


      La date/heure actuelle est Sam 19 Aoû 2017 - 20:37