Partage
  • Partager sur Facebook
  • Partager sur Twitter

Neumorphism ?

    7 janvier 2020 à 1:43:57

    Bonjour,

    Je me demandais à votre avis ca rentre dans le cadre du Neumorphism ou pas ce bouton ?

      <!DOCTYPE html>
      <html>
        <head>
          <!--Import Google Icon Font-->
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
          <title>"test ocr"</title>
          <!--Import materialize.css-->
          <!--
          <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
          <link type="text/css" rel="stylesheet" href="css/style.css">
          -->
    
    
          <!-- my css include -->
          <script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
    
          <!--Let browser know website is optimized for mobile-->
          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
         <!-- <META HTTP-EQUIV="Refresh" CONTENT="5" /> -->
    
          <style type="text/css">
    
          body{
            margin:0;
            background: #8c46f0;
            display: grid;
            place-items:center;
            height: 100vh;
          }
    
          a{
            text-decoration: none;
          }
    
         .btnNeum{
          padding: 1em;
          height: 30%;
          width: 30%;
          border-radius: .5em;
          box-shadow: -12px -12px 12px 1px rgba(145, 79, 240,1),
          12px 12px 12px 5px rgba(0,0,0,.03), inset 5px 5px 15px 0 rgba(0,0,0,.1), inset -5px -5px 15px 0 rgba(0,0,0,.2), inset -25px -25px 8px 0 rgba(152, 48, 255,.03),inset 25px 25px 8px 0 rgba(152, 48, 255,.08);
         }
         .btnNeumint{
          
          /*padding: 1em;*/
          height: 99%;
          width: 99%;
          border-radius: .5em;
            box-shadow: -12px -12px 12px 1px rgba(145, 79, 240,1),
          12px 12px 12px 5px rgba(0,0,0,.03), inset 5px 5px 15px 0 rgba(0,0,0,.1), inset -5px -5px 15px 0 rgba(0,0,0,.2), inset -25px -25px 8px 0 rgba(152, 48, 255,.03),inset 25px 25px 8px 0 rgba(152, 48, 255,.08);
         }
    
         .truc{
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 100%;
          font-size: 2em;
          font-weight: bold;
          text-shadow: 1px 1px 2px #c16ce8, 0 0 1px #5a4b62, 0 0 0.2em #c44af0;
         }
    
         /* HOVER */
    
         .btnNeumint:hover {
          height: 99%;
          width: 99%;
          border-radius: .5em;
          box-shadow: -12px -12px 12px 1px rgb(145, 79, 240), 12px 12px 12px 5px rgba(0,0,0,.03), inset 5px 5px 15px 0 rgba(1, 1, 1, 0.19), inset -5px -5px 15px 0 rgba(194, 151, 230, 0.2), inset -25px -25px 8px 0 rgba(134, 119, 149, 0.1),inset 25px 25px 8px 0 rgba(255, 255, 255, 0.02);
          transition-duration: .5s;
         }
    
         .truc:hover{
          transition-duration: .5s;
          font-size: 1.8em;
          text-shadow: 1px 1px 2px #c16ce8, 0 0 1px #5a4b62, 0 0 0.2em #c44af0;
         }
    
          </style>
    
    
        </head>
    
        <body>
    <div class="btnNeum">
      <div class="btnNeumint"> 
        <span class="truc">
          <a href="#"> Truc </a>
        </span>
      </div>
      
    </div>
    
    
        </body>
      </html>



    • Partager sur Facebook
    • Partager sur Twitter

    Compos sui.

      18 janvier 2020 à 2:21:25

      Salut

      Tuas juste oublié de montrer le bouton lol. Tout ce code pour rien '--. 

      La définition c'est : Représenter la réalité de manière réaliste dans une interface utilisateur.

      À toi de voir. En quoi est-ce utile ?

      • Partager sur Facebook
      • Partager sur Twitter
      Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
        18 janvier 2020 à 2:31:11

        Salut,

        Le bouton c'est le code ;)

        Ce n'est qu'un vulgaire bouton en caoutchouc mauve.

        Après c'est au curieux de tester. :D

        entre temps j'en ai fait de plus sympa, la c'était juste un test.

        L'utilité ? A mon avis on ne va pas tarder à la voir sur la toile.

        Mais en fait le post n'étais pas pour ce forum mais pour celui du Design Thinking à la base mais je n'avais pas envi de faire un doublon.

        -
        Edité par exen 18 janvier 2020 à 2:34:50

        • Partager sur Facebook
        • Partager sur Twitter

        Compos sui.

          18 janvier 2020 à 2:44:26

          Oui je disais juste que tu aurais pu le mettre en capture en plus ^^ . Ils disaient pareil pour le matériel design et avant pour le flat design et d'ailleurs le skeuomorphisme il y en avait sur les premières machine Appel avec ui dans les années 70 donc bon. C'est plus de la branlette de désigner. Perso j'ai un Xiaomi Mi 9t qui est un Android avec une approche design Appel du coup mes icônes sont en plein dans ce courant de design, et qu'en je lance un outil Google je me tape du matériel et quand je lance un outil Facebook je me tape du flat. En gros chaque grosses entité c'est approprié un design distinct pour des raisons de différenciation commerciale plus qu'autre chose. Je regarderai ton bouton la sur mon tél je peux pss.

          • Partager sur Facebook
          • Partager sur Twitter
          Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
            18 janvier 2020 à 3:05:35

            Le bouton n'a rien de spécial après ce que j'ai fait, je te dirais même qui est même pas beau lol

            Ce qui intéressait surtout c'était de voir qui relèverais au mot en lui même, mais comme je t'ai dit à la base c’était dédier au fofo design.

            Et je te rejoins pleinement sur ce que tu viens de dire.

            D'un autre coté je suis très fan de tout ce qui est "branlette de Designer", avec un mec ici ca fait une semaine qu'on planche ensemble sur de l'hexa-neon lol

            [Edit] Et au passage, pas parce que ca peut être utile, mais juste pour dire voila on l'a fait. Et en prime avec le moins de js possible.

            -
            Edité par exen 18 janvier 2020 à 3:10:55

            • Partager sur Facebook
            • Partager sur Twitter

            Compos sui.

              18 janvier 2020 à 3:45:59 - Message modéré pour le motif suivant : Le flood est strictement interdit


              Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
                18 janvier 2020 à 4:16:32 - Message modéré pour le motif suivant : Le flood est strictement interdit


                Compos sui.

                  18 janvier 2020 à 8:33:37 - Message modéré pour le motif suivant : Le flood est strictement interdit


                  Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
                    18 janvier 2020 à 16:56:27 - Message modéré pour le motif suivant : Le flood est strictement interdit


                    Compos sui.

                      20 janvier 2020 à 10:34:56 - Message modéré pour le motif suivant : Le flood est strictement interdit


                      Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
                        20 janvier 2020 à 12:17:33

                        Bonjour,

                        Mauvais forum

                        Le sujet est déplacé de la section HTML / CSS vers la section Design Thinking

                        Au passage je veux bien une copie d'écran, rien ne s'affiche chez moi ...

                        -
                        Edité par Benzouye 20 janvier 2020 à 12:19:44

                        • Partager sur Facebook
                        • Partager sur Twitter
                        Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL
                          20 janvier 2020 à 13:30:12

                          Benzouye a écrit:

                          Bonjour,

                          Mauvais forum

                          Le sujet est déplacé de la section HTML / CSS vers la section Design Thinking

                          Au passage je veux bien une copie d'écran, rien ne s'affiche chez moi ...

                          -
                          Edité par Benzouye il y a environ 1 heure

                          Oui désolé ! ^^

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
                            20 janvier 2020 à 21:06:35

                            Rhoooo on disait presque rien de mal :p
                            C'est vrais chez toi le code passe pas ? c'est une simple page html le code normalement tu la colle dans un éditeur tu l'enregistre en html et ca devrais fonctionner.
                            • Partager sur Facebook
                            • Partager sur Twitter

                            Compos sui.

                              21 janvier 2020 à 13:43:47

                              exen a écrit:

                              c'est une simple page html le code normalement tu la colle dans un éditeur tu l'enregistre en html et ca devrais fonctionner.

                              Oui je sais bien ... mais :

                              Pas glop :(

                              Et pas d'erreur JS ou autre dans la console ... ???

                              -
                              Edité par Benzouye 21 janvier 2020 à 13:44:23

                              • Partager sur Facebook
                              • Partager sur Twitter
                              Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL
                                21 janvier 2020 à 20:38:48

                                Ben non rien de rien ce n'est que deux boites avec deux ou trois sandows;

                                Le .js que tu vois il ne sert à rien c'est la cdn de font-awesome.

                                Je viens même de faire le test j'ouvre une page sur chrome je passe en mode éditeur HTML je supprime ce qu'il y a dedans et je colle le code ca fonctionne.

                                Accroche toi.... ça fonctionne même sous  IE.

                                En MP je vais te passer une url voir si ca le fait encore depuis un serveur.

                                Tu utilise quoi comme navigateur ? Et sur quel OS ?

                                Quoi que je viens de remarquer que sur le code du haut je n'avais pas de charset, ça se trouve ça proviens de çà.

                                Mince alors tu risque de ne pas voir celui-ci aussi : :s

                                Quoique sur le liens que tu as en mp tu rajoute /2

                                Ca te permet d'y accéder.

                                <!DOCTYPE html>
                                  <html>
                                    <head>
                                      <title>"test ocr"</title>
                                      <meta charset="utf-8" />
                                      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                                      <style type="text/css">
                                
                                          html, body
                                          {
                                          background: black;
                                          margin:0;
                                          text-align: center;
                                          height: 100%;
                                          }
                                
                                          .ens1{
                                          width: 100%;
                                          text-align: center;
                                          position: absolute;
                                          margin-top: -80px;
                                          top: 50%;
                                          }
                                          .base{
                                          height: 140px;
                                          width: 140px;
                                          margin: 144px;
                                          display: inline-block;
                                          box-shadow: inset 0 0 35px 5px rgba(0,0,0,0.25), inset 0 2px 1px 1px rgba(255,255,255,0.9), inset 0 -2px 1px 0 rgba(0,0,0,0.25);
                                          border-radius: 8px;
                                          background: #ccd0d4;
                                          position: relative;
                                          
                                          }
                                
                                          .bouton{
                                          height: 68px;
                                          width: 68px;
                                          left: 50%;
                                          top: 50%;
                                          box-shadow: 0 15px 25px -4px rgba(0,0,0,0.5), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2);
                                          border-radius: 68px;
                                          -webkit-filter: blur(1px);
                                          -moz-filter: blur(1px);
                                          filter: blur(1px);
                                          position: absolute;
                                          background: #ccd0d4;
                                          margin-left: -33px;
                                          margin-top: -33px;
                                          display: block;
                                          }
                                          .sign{
                                          height: 100%;
                                          width: 100%;
                                          margin-top: 47px;
                                          margin-left: 2px;
                                          transition: color 300ms ease-out;
                                          text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0,0,0,0.8), 1px 1px 4px #fff;
                                          text-align: center;
                                          position: absolute;
                                          font-weight: 700;
                                          font-size: 42px;
                                          display: block;
                                          opacity: 0.9;
                                          color: rgba(0,0,0,0.4);
                                          }
                                      </style>
                                    </head>
                                  <body>
                                    <div class="ens1">
                                      <div class="base">
                                        <span class="bouton"></span>
                                        <span class="sign">+</span>
                                      </div>
                                    </div>
                                  </body>
                                </html>



                                -
                                Edité par exen 21 janvier 2020 à 23:13:20

                                • Partager sur Facebook
                                • Partager sur Twitter

                                Compos sui.

                                  22 janvier 2020 à 9:14:14

                                  C'est bon, j'ai pu voir la page via le serveur donné par MP.

                                  Sinon, je ne suis pas sûr de voir la référence réelle de ce type de bouton, ce qui un peu le but du Neumorphisme non ?

                                  As-tu des exemples de boutons réels qui ressemble à ça ?

                                  Il manquerait peut-être aussi une animation "onclick" ...

                                  -
                                  Edité par Benzouye 22 janvier 2020 à 9:15:03

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL
                                    22 janvier 2020 à 19:49:22

                                    En fait t'as pas tors la représentation réel de se bouton il n'y en a pas, c'est plus une interprétation de ma part, un mixte de Leroy-merlin et de la matière d'un Fijit.

                                    Mais le second que j'ai fait lui il à un coté bien plus réel

                                    Pour moi de mon coté c'etait de voir surtout ce que je pouvais faire avec les shadows et les alpha, après si je voulais qu'ils soient fonctionnels je devrais coller un input en sous couche et redessiner une couche entière d'ombrage pour le second bouton, pour quand il est enfoncé.

                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    Compos sui.

                                      23 janvier 2020 à 9:15:12

                                      Ah effectivement ces boutons sont déjà plus proches du concept.

                                      Je les avais déjà vus dans un article de 2014 : https://www.blogduwebdesign.com/inspiration-pour-integrateurs-22-les-inputs-sous-toutes-leurs-formes/

                                      Ces boutons sont une création de Justin Windle (visible dans ce CodePen : https://codepen.io/soulwire/pen/bKens), tout le travail de ce dev est impressionnant.


                                      exen a écrit:

                                      Mais le second que j'ai fait lui il à un coté bien plus réel

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        23 janvier 2020 à 15:55:29

                                        C'est sur lui que je me suis basé pour le second

                                        Mais le siens est 100 fois plus beau. Il pousse le truc encore plus loins, il les a carrément rendus fonctionnel il à été jusqu’à coller des transitions, il a rajouté des masques pour creuser la signalétique, ils sont géniaux.

                                        Il en ont pondus pleins d'autres

                                        Oui il est aussi ici https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

                                        Pour ma part j'ai découvert ca il y a deux semaines j'ai halluciné, j’arrête pas de reproduire tout ce que je trouve à ce sujet pour comprendre ce qu'ils font.

                                        Mais le concept permet quand même de faire de petit truc sympa.

                                        -
                                        Edité par exen 24 janvier 2020 à 0:00:49

                                        • Partager sur Facebook
                                        • Partager sur Twitter

                                        Compos sui.

                                        Neumorphism ?

                                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                        • Editeur
                                        • Markdown