AccueilRechercherS'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.


    Street Dance is an Art (transition)

    A-Lice
    A-Lice
    FémininAge : 26Messages : 4939

    le Sam 14 Mar 2015 - 11:58


    Street Dance is an Art


    Suite à ma participation au deuxième "Y a de l'ambiance" voici la version avec transition.

    Je précise que l'arrière plan blanc correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www et au passage de la souris ~ phpBB2


    Et le code :
    HTML :
    Code:
    <link href="http://fonts.googleapis.com/css?family=Keania+One|Expletus+Sans:400italic|Warnes" rel="stylesheet" type="text/css" />
    <div class="fiche">
                      
       <div class="titre">
                  Le titre du forum       
       </div><br />       
       <div class="banniere">
                         
       </div><br />       
       <div class="bloc">
                       
          <div class="soustitre">
                 Contexte   
          </div><br />   
          <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non varius lectus, et euismod enim. Fusce dui sem, congue nec quam vel, aliquet rhoncus nulla. Phasellus efficitur justo sit amet eros fringilla, nec porta dolor ultricies. Donec at felis tincidunt, sodales neque at, tincidunt ipsum. Maecenas imperdiet dui magna, in dignissim elit eleifend a. Aliquam et magna a enim elementum pulvinar ut vel magna. Nulla est justo, luctus vitae diam eu, commodo venenatis orci. Pellentesque non semper ipsum, aliquam dignissim risus. Pellentesque sodales nunc eget dui hendrerit imperdiet.   
          </p>
               
       </div>
                      
       <div class="bloc">
                       
          <div class="soustitre">
                 News   
          </div><br />   
          <p>
               00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br /> 
          </p>
               
       </div><br /><br /><a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <br /><br /><a href="http://www.never-utopia.com" class="credit">A-Lice | Never-Utopia</a><br /><br />
    </div>


    CSS :
    Code:
    .fiche {
    width: 750px;
    padding: 10px;
    border-radius: 100px;
    background: #f1f1f1;
    margin: auto;
    border: 2px dotted white;
    transition: all 0.5s;
    }

    .fiche:hover {
    border-radius: 0px;
    background: black;
    border-top: solid 2px #4833b5;
    border-bottom: solid 2px #bb1846;
    border-left: none;
    border-right: none;
    transition: all 0.5s;
    }

    .titre {
    text-align: center;
    font-size: 25px;
    height: 30px;
    padding: 10px;
    transition: all 0.5s;
    color: white;
    font-family: 'Expletus Sans', cursive;
    text-shadow: 0px 0px 5px white;
    }

    .fiche:hover .titre {
    transition: all 0.5s;
    font-family: 'Keania One', cursive;
    font-size: 25px;
    letter-spacing: 2px;
    }

    .banniere {
    width: 700px;
    height: 200px;
    border-radius: 100px;
    margin: auto;
    border: 2px dotted white;
    transition: all 0.5s;
    overflow: hidden;
    background-image: url(http://nsa33.casimages.com/img/2015/03/01/150301022241788998.png);
    }

    .fiche:hover .banniere {
    border-radius: 0px;
    transition: all 0.5s;
    border-top: solid 2px #4833b5;
    border-bottom: solid 2px #bb1846;
    background-image: url(http://nsa33.casimages.com/img/2015/03/01/150301022244568300.png);
    }

    .bloc {
    display: inline-block;
    width: 350px;
    height: 165px;
    border-radius: 80px;
    border: 2px dotted white;
    margin-right: 7px;
    margin-left: 7px;
    background: #f8ceda;
    font-size: 13px;
    text-align: justify;
    transition: all 0.5s;
    }

    .fiche:hover .bloc {
    border-radius: 0px;
    border-top: solid 2px #4833b5;
    border-bottom: solid 2px #bb1846;
    transition: all 0.5s;
    background: #94908f;
    border-left: none;
    border-right: none;
    width: 354px;
    opacity: 0.5;
    }

    .partoch { 
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 30px;
    margin-left: 7px;
    transition: all 0.5s;
    }

    .fiche:hover .partoch {
    border-radius: 0px;
    transition: all 0.5s;
    }

    a.credit {
    text-decoration: none;
    color: #f8ceda;
    transition: all 0.5s;
    text-align: center;
    display: inline-block;
    font-size: 11px;
    text-shadow: 0px 0px 5px pink;
    font-family: 'Expletus Sans', cursive;
    }

    .fiche:hover a.credit {
    transition: all 0.5s;
    color: white;
    text-shadow: 0px 0px 5px white;
    font-family: 'Warnes', cursive;
    }

    .soustitre {
    text-align: center;
    font-size: 22px;
    height: 25px;
    transition: all 0.5s;
    color: white;
    padding: 5px;
    margin-bottom: -10px;
    font-family: 'Expletus Sans', cursive;
    }

    .fiche:hover .soustitre {
    transition: all 0.5s;
    font-family: 'Keania One', cursive;
    font-size: 20px;
    letter-spacing: 2px;
    }

    p {
    height: 100px;
    width: 300px;
    margin: auto;
    overflow: auto;
    }

    Les autres versions :


    Version avec transition
    Version Light
    Version Dark

    Merci à Dakota qui a été ma muse pour cette page d'accueil puisque la seconde image vient de lui !

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.

    Dark Fairy
    Dark Fairy
    FémininAge : 22Messages : 242

    le Sam 4 Avr 2015 - 11:21

    Merci!
    Tatia38
    Tatia38
    FémininAge : 31Messages : 308

    le Sam 4 Avr 2015 - 12:32

    Merci beaucoup
    mackay
    mackay
    MasculinAge : 32Messages : 124

    le Mer 8 Avr 2015 - 19:44

    thnaks
    Carlotta Besascar
    Carlotta Besascar
    FémininAge : 19Messages : 26

    le Dim 24 Mai 2015 - 15:17

    Je prend j'aime beaucoup :)
    Madras
    Madras
    FémininAge : 35Messages : 282

    le Dim 21 Juin 2015 - 10:45

    Merci
    mon-etoile
    mon-etoile
    FémininAge : 32Messages : 140

    le Mar 11 Aoû 2015 - 15:36

    Merci
    En ligne
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2320

    le Mar 11 Aoû 2015 - 16:18

    Merci O(≧∇≦)O
    Argy
    Argy
    FémininAge : 22Messages : 98

    le Ven 6 Nov 2015 - 17:41

    Mici ♥
    Deed01
    Deed01
    MasculinAge : 42Messages : 341

    le Dim 22 Mai 2016 - 15:49

    merci Very Happy
    Lealily
    Lealily
    FémininAge : 29Messages : 20

    le Lun 27 Fév 2017 - 16:14

    Merci
    Onlyo
    Onlyo
    FémininAge : 23Messages : 24

    le Lun 13 Mar 2017 - 23:54

    Merci !
    Nord
    Nord
    MasculinAge : 20Messages : 169

    le Lun 17 Avr 2017 - 16:07

    Merci, c'est très sympa ! Very Happy
    Chadot
    Chadot
    FémininAge : 32Messages : 230

    le Lun 8 Mai 2017 - 7:12

    Merci



    Street Dance is an Art (transition) 2mo6y5k
    Steel Block
    Steel Block
    MasculinAge : 25Messages : 34

    le Dim 18 Juin 2017 - 21:44

    merci
    INHA
    INHA
    FémininAge : 21Messages : 6

    le Jeu 22 Juin 2017 - 12:44

    merciiiiii
    Roronoa
    Roronoa
    MasculinAge : 28Messages : 4

    le Mar 4 Juil 2017 - 18:40

    Merci
    Rebekaah
    Rebekaah
    FémininAge : 25Messages : 51

    le Mer 5 Juil 2017 - 1:31

    merci !
    defenrir
    defenrir
    MasculinAge : 37Messages : 76

    le Mar 10 Avr 2018 - 14:13

    merci o/
    ninouee
    ninouee
    FémininAge : 39Messages : 143

    le Mer 5 Aoû 2020 - 19:36

    Merci beaucoup



    Street Dance is an Art (transition) Robert12
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Oct 2020 - 15:55