Applications Web et Mobiles

Html5 . Flash . Haxe . Php

18/01/2015

Comment faire des "pictos" et autres dessins simples sans outil vectoriel ? ( tel que Flash, Illustrator, générateur SVG)

... et bien avec des <div> ou <span> et le style css : border-radius !

Voici par exemple un appareil photo très zoli :


le code html correspondant :

      <div class='apixPhotoField_default' style=''>
            <div class='apix_button cameraButton'>
                  <div class='cameraViewFinder'><div class='cameraViewFinderInner'></div></div>
                  <div class='cameraShutter'></div>
                  <div class='cameraBack'>
                        <div class='cameraBar'></div>
                        <div class='cameraObjectif'></div>
                        <div class='cameraObjectifInner'></div>
                  </div>
            </div>
      </div>

et les styles CSS :

      .apixPhotoField_default {
             position:relative;
            left:2em;
            width:10em;
            height:6em;
      }
      .apixPhotoField_default .cameraButton {
            position:relative;
            width:100%;
            height:100%;
            padding:0;
            cursor:pointer;
      }
      .apixPhotoField_default .cameraViewFinder {
            position:absolute;
            left:30%;
            width:25%;
            height:8.5%;
            background-color:#3399dd;
            box-shadow: 2px 2px 8px 3px rgba(0, 0, 0,0.40);
      }
      .apixPhotoField_default .cameraViewFinderInner {
            position:absolute;
            top:14%;
            left:33%;
            width:33%;
            height:45%;
            background-color:#fff;
      }
      .apixPhotoField_default .cameraShutter {
            position:absolute;
            left:80%;
            width:10%;
            height:8.5%;
            background-color:#3399dd;
      }
      .apixPhotoField_default .cameraBack {
            position:absolute;
            top:10%;
            width:100%;
            height:100%;
            border-radius: 18px;
            background-color:#3399dd;
            box-shadow: 2px 2px 8px 3px rgba(0, 0, 0,0.40);
      }
      .apixPhotoField_default .cameraBar {
            position:absolute;
            top:25%;
            width:100%;
            height:2%;
            background-color:#fff;
      }
      .apixPhotoField_default .cameraObjectif {
            position:absolute;
            top:12%;
            left:40%;
            width:45%;
            height:75%;
            background-color:#fff;
            border-radius: 50%;
      }
      .apixPhotoField_default .cameraObjectifInner {
            position:absolute;
            top:22%;
            left:46.55%;
            width:12%;
            height:20%;
            background-color:#c7c7c7;
            border:1em solid #3399dd;
            border-radius: 50%;
      }

... Je me suis "amusé" à faire ça hier pour le bouton d'un champ "photo".
Le code html et css peut donc être optimisé ! (avis aux amateurs et merci d'avance)

Cette technique ne permet peut-être pas de tout faire mais je crois qu'on peut aller assez loin avec elle en utilisant par exemple, les "gradient" CSS et les "shadow" non moins CSS.



 
Plan :
Services (accueil) Liste références Détail réalisations Technologies A propos News Open-source Contact
Travaux récents :
EspritBois21 - Gestion de requêtes Funchfranchise Rexokit - Calepinage d'une construction bois. Campus-channel - Vidéo chat (client/serveur)

Ce site s'adapte à toutes les tailles de téléphone, tablette et écran d'ordinateur.
Mais certaines de ses fonctionnalités sont dégradées ou supprimées quand il tourne sur des navigateurs non-Html5.
Je vous invite donc à tester sa compatibilité Html5 ici.
Si il obtient moins de 300 points, il est recommandé de le mettre à jour. Avec par exemple et dans l'ordre de mes préférences toutes personnelles :
Mozilla Firefox - Google Chrome - Apple Safari - [ ... ...] - Windows IE à partir de sa version 9.