Tutoriel CSS : Card UI

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 50

  • @ArnaudKadur
    @ArnaudKadur 9 років тому +10

    Je suis le seul a m'inquiéter de l'évolution de ton style Grafikart ?
    :D

    • @nicwalle-tuto
      @nicwalle-tuto 9 років тому +1

      Pareil ahah ^^

    • @KroceBow
      @KroceBow 9 років тому +4

      ***** avec un crochet on dirait un pirate :D !

    • @WhatTheGuiz
      @WhatTheGuiz 9 років тому +4

      ***** C'est le côté hipster qui surgit :D

  • @SugarCoatedDesign
    @SugarCoatedDesign 9 років тому

    Petite remarque pour la date, pourquoi ne pas tout mettre dans un et le mois dans le span ? Cela permettrait une accessibilité accrue pour la lecture via les navigateurs vocaux.

  • @ChristophePONSINET
    @ChristophePONSINET 9 років тому

    Super source d'inspiration comme toujours. Merci.

  • @ClementPeuch
    @ClementPeuch 9 років тому

    SUPERBE vidéo ! elle va vraiment me servir pour la refonte de mon portfolio

  • @GnesisBe
    @GnesisBe 9 років тому

    Bon tuto, je cherchais ce système pour mon site, merci !

  • @aomo5293
    @aomo5293 8 років тому

    Super tuto, merci beaucoup...

  • @jordanduc
    @jordanduc 9 років тому

    Super vidéo, explication très clair comme d'habitude.
    Je suis tombé sur un petit bug sur ton site par hasard je ne sais pas si ça a déjà était signalé :
    Quand on passe sur la loupe pour recherché une tutoriel. Si l'espace entre premium et s'inscrire est trop petit pour afficher la barre de recherche complete (avec le css pour ordinateur classique) elle clignote en mode psychédélique.
    Merci pour tout !
    PS : Tu peux me MP si mon explication n'est pas très clair x').

  • @leopng
    @leopng 9 років тому

    La prochaine fois que je vois un truc sur Dribbble j'essaierai plutôt de le faire moi même ! :D Excellente vidéo...comme d'hab' ;) biz

  • @AmitMali
    @AmitMali 9 років тому

    this is the best example i found on UA-cam after search a lot keyword for UI ,
    but sadly its not in english :( , still whatever i learn from watching good is useful, sadly i cant understand tips and guidelines u gave

  • @ValentinDosimont
    @ValentinDosimont 9 років тому +7

    Nice!!! Par contre je te recomande d'utiliser des icones genre font-awesome, c'est beaucoup plus joli et tu peux les customiser plus facilement!
    Puis si jamais tu fais un peu de scss, tu peux faire pleins de raccourcis avec les &:, notamment sur les hover et compagnie!
    Super design en tout cas, gg à toi et au graphiste! :)

  • @icesaiyan3522
    @icesaiyan3522 6 років тому

    Question si on veux utiliser ceci mais dans un carrousel on fais comment? T'as vidéo sur le sujet fonctionnerais?

  • @watevaa1234567
    @watevaa1234567 2 роки тому

    Bonjour, comment puis-je compiler du scss en css sur Atom? merci les tutos sont vraiment impecables.

  • @devenirdev
    @devenirdev 8 років тому

    salut a tous,
    quelqu'un pourrait me dire pourquoi on utilise des div et pas des balises de titres?
    c'est une pratique courante ou c'est au feeling?

  • @lennylouis
    @lennylouis 9 років тому

    j'ai du louper une partie mais je n'ai pas d'animation sur l'image quand je passe dessus sa me zoom l'image en brut et c'est impeu degueu c'est quelle transition qu'il faut faire ?

  • @itsme-gp3ce
    @itsme-gp3ce 7 років тому

    pour moi la class card__category a disparu ...j'ai changer le z-index pour voir où elle est devenue mais en vain..elle n'apparait que quand je mette top : 0..mais elle se disparaitera dès que lui mette une valeur négative

  • @tristanesnault3125
    @tristanesnault3125 9 років тому

    la tu utilise un preprocesseur mais esque c est possible de faire sa avec un editeur simple comme notepad++ par exemple ? si oui sa impliquera des changement ? si non pourquoi ? en tous cas tres bonne video

  • @kakashiran
    @kakashiran 8 років тому

    est ce que c'est une bonne idée prendre cet tuto card ui pour mon project? salutations du Mexique!

  • @damaniamine4032
    @damaniamine4032 7 років тому

    Amazing Tuto (y) Thank You

  • @steeven1162
    @steeven1162 9 років тому +3

    Comment a tu fait pour quand tu ecrit par exemple div.test ca te mette bien le bloc de div avec la class test ?

    • @sambio2122
      @sambio2122 9 років тому

      Xoto je me pose aussi cette question

    • @steeven1162
      @steeven1162 9 років тому

      Samuel BIO je suis pas seul alors j'espere que l'on aura une reponce

    • @mrjbgo
      @mrjbgo 9 років тому +2

      Xoto C'est une autocomplétion proposée par la plupart des IDE maintenant (mais aussi SublimeText par exemple). Tu tape div.test par exemple et tu tapes la touche alinéa, ça marche pour pleins de trucs :) (a#test, tr*3>td*8 et css mt pour margin-top par exemple)

    • @grafikart
      @grafikart  9 років тому +2

      Xoto Cette autocomplétion s'appelle emmet et est disponible pour de nombreux éditeurs : docs.emmet.io/

    • @kaporos
      @kaporos 6 років тому

      Emmet , une extension ( et oui , je viens du futur :) )

  • @done38150D
    @done38150D 8 років тому

    pourquoi SCSS et pas CSS j'ai dû mal à comprendre, le changement si je fais ton tutos sur un dossier full CSS marchera-t-il ?

  • @eliseeassinou1348
    @eliseeassinou1348 7 років тому

    Na c'est pas possible. J'apprécie raiment ton aide. Je pense meme soutenir en web avec tes design

  • @abehsoussou
    @abehsoussou 5 років тому

    Bonjour,
    merci pour ce tuto ! au top.
    Parcontre, si l'on veut intégrer cet élément dans un site et en avoir plusieurs les unes à coté des autres, comment peut on faire ? j'ai tenter d'en mettre plusieurs dans une div et d'appliquer un display flex mais rien n'y fait...
    Un petit coup de main serait le bienvenu :) ...

    • @watevaa1234567
      @watevaa1234567 2 роки тому

      il faut enlever le position absolute, et le mettre en relativ, display flex etc...

    • @abehsoussou
      @abehsoussou 2 роки тому

      @@watevaa1234567 ahah merci pour cette réponse même si 3 ans plus tard, ... ^^

  • @capou73
    @capou73 9 років тому

    bonjours la vidéo git bitbucket sera toujours d'actualité ?

  • @Maniac058
    @Maniac058 9 років тому +1

    Au moins, j'ai bien fait de revenir sur la chaîne ^^

    • @grafikart
      @grafikart  9 років тому +1

      Maniac058 Oh, pourquoi tu étais parti ? :(

    • @Maniac058
      @Maniac058 9 років тому

      Non, juste que il y avait 5min, j'avais regarder une vidéo après je suis partie et quand je suis revenue pour regarder du POO (php), j'ai vue cette vidéo :)

  • @saidanielyas3016
    @saidanielyas3016 6 років тому

    l'animation ne marche pas pour moi
    ps: je n'utilise pas de préprocesseur.

  • @maz4962
    @maz4962 7 років тому

    Hi, i have two questions.
    1) What is the font in your editor text? :3
    2) What is the plugin for the colours?

    • @grafikart
      @grafikart  7 років тому

      If i recall correctly the font is Source Code Pro semibold with the plugin Material but I'm not 100% sure

  • @MuhammadAdnan-gx6rd
    @MuhammadAdnan-gx6rd 7 років тому

    How to use this hover with bootstrap card ???

  • @lifeatweb
    @lifeatweb 6 років тому

    Muito bem! Excelente Tutorial. Parabéns!

  • @SamWereb
    @SamWereb 8 років тому +1

    This is good. How I wish it was in English.

  • @kriticals9474
    @kriticals9474 7 років тому +1

    Sa me fait penser a peu au style Pinterest !

    • @MuhammadAdnan-gx6rd
      @MuhammadAdnan-gx6rd 7 років тому

      .hell{background:red; .kill{ its not workig with this type css } }

  • @suprajeu8511
    @suprajeu8511 9 років тому

    Je m'abonne ta vidéo est trop bien je rencontre un problème lorsque je mets les variables, je ne comprends pas ?
    pourtant c'est bien ça : $color: #EF5A31;
    si tu veux bien m'aider ?

    • @itsme-gp3ce
      @itsme-gp3ce 7 років тому

      informe toi sur sass...le préprocesseur sass

  • @chadrackruhara3427
    @chadrackruhara3427 7 років тому +1

    Je suis fun de toi # Mais quand tu ne nous reponds A nos commentaire ,cela ne fait pas bien du tout !!!
    To be in touch with your funs , try answer us what we asking for or suggesting for !!!!

  • @MehdiGlz
    @MehdiGlz 8 років тому

    et on m'a dit que c'était mieux d'apprendre l'allemand pour l'informathique et l'ingenierie! mais voilá, je trouve beaucoup plus matériel en francais!