Accueil » Formulaire CSS3 sans images

Formulaire CSS3 sans images

486 views

Le 30/10/11 à 18:41 par

Aujourd’hui j’ai fait quelque petits tests des propriétés CSS3 et c’est fou ce que l’on peut faire avec !

 

Voyez par vous-même le formulaire généré :


Formulaire CSS3 sans images

(En passant si vous voulez récupérer ce formulaire css3 pour votre site web, vous pouvez c’est aussi là pour ça).

Les propriétés CSS 3 utilisées sont :

  • border-radius : Permet d’avoir des bords arrondis.
  • box-shadow : Permet de créer des ombres sur des blocs html
  • text-shadow : Permet de créer des ombres sur du texte

les préfixes -moz-, -webkit-,-o- et –ms- permettent une compatibilité sur tous les navigateurs en attendant que le CSS 3 soit totalement reconnu.

 

Voici ci-dessous le code complet.

 

CSS :

  1.  
  2.         .form1 *{padding:0;margin:0;}
  3.        
  4.         .form1{
  5.                 font-family:helvetica;
  6.                 font-size:12pt;
  7.                 width:320px;
  8.                 margin:auto;
  9.                 height:130px;
  10.                 padding:20px;
  11.                 border-radius:10px;
  12.                 box-shadow: 1px 0px 10px #ccc;
  13.                 background: rgb(234,234,234); /* Old browsers */
  14.                 background: -moz-linear-gradient(top,  rgba(234,234,234,1) 0%, rgba(255,255,255,1) 11%, rgba(255,255,255,1) 68%, rgba(232,232,232,1) 100%); /* FF3.6+ */
  15.                 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(11%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,1)), color-stop(100%,rgba(232,232,232,1))); /* Chrome,Safari4+ */
  16.                 background: -webkit-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(255,255,255,1) 11%,rgba(255,255,255,1) 68%,rgba(232,232,232,1) 100%); /* Chrome10+,Safari5.1+ */
  17.                 background: -o-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(255,255,255,1) 11%,rgba(255,255,255,1) 68%,rgba(232,232,232,1) 100%); /* Opera 11.10+ */
  18.                 background: -ms-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(255,255,255,1) 11%,rgba(255,255,255,1) 68%,rgba(232,232,232,1) 100%); /* IE10+ */
  19.                 background: linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(255,255,255,1) 11%,rgba(255,255,255,1) 68%,rgba(232,232,232,1) 100%); /* W3C */
  20.                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#eaeaea’, endColorstr=‘#e8e8e8′,GradientType=0 ); /* IE6-9 */
  21.         }
  22.         .form1 h2{
  23.                 font-family:helvetica;
  24.                 font-size:14pt;
  25.                 color:#000;
  26.                 margin-bottom:10px;
  27.                 text-shadow: 1px 1px 2px #aaa;
  28.                 font-weight:normal;
  29.         }
  30.         .form1 div{
  31.                 margin-bottom:10px;
  32.         }
  33.         .form1 label{
  34.                 display:inline-block;
  35.  
  36.                 background: #7abcff; /* Old browsers */
  37.                 background: -moz-linear-gradient(top,  #7abcff 0%, #4096ee 100%); /* FF3.6+ */
  38.                 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
  39.                 background: -webkit-linear-gradient(top,  #7abcff 0%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
  40.                 background: -o-linear-gradient(top,  #7abcff 0%,#4096ee 100%); /* Opera 11.10+ */
  41.                 background: -ms-linear-gradient(top,  #7abcff 0%,#4096ee 100%); /* IE10+ */
  42.                 background: linear-gradient(top,  #7abcff 0%,#4096ee 100%); /* W3C */
  43.                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#7abcff’, endColorstr=‘#4096ee’,GradientType=0 ); /* IE6-9 */
  44.                
  45.                 width:80px;
  46.                 height:25px;
  47.                 line-height:25px;
  48.                 padding-left:20px;
  49.                 color:#fff;
  50.                
  51.                 text-shadow: 1px 1px 1px #ddd;
  52.                 border-top-left-radius:7px 4px;
  53.                 border-bottom-left-radius:7px 4px;
  54.         }
  55.         .form1 input{
  56.                 display:inline-block;
  57.                
  58.                 width:200px;
  59.                 height:25px;
  60.                 color:#333;
  61.                 padding-left:20px;
  62.                 border:0px solid #09f;
  63.                 background-color:#C4E1FF;
  64.                 border-left:0;
  65.                 padding:0;
  66.                 font-size:12pt;
  67.                 border-top-right-radius:10px 5px;
  68.                 border-bottom-right-radius:10px 5px;
  69.                 outline:none;
  70.         }
  71.        
  72.         .form1 div:hover input,.form1 div:hover label{
  73.  
  74.         outline:none;
  75.  
  76.  
  77.         box-shadow:0px 0px 3px #09f;
  78.  
  79.         }
  80.         .form1 input[type="submit"]{
  81.                 display:block;
  82.                 float:right;
  83.                 background: rgb(213,206,166); /* Old browsers */
  84.                 background: -moz-linear-gradient(top,  rgba(213,206,166,1) 0%, rgba(201,193,144,1) 40%, rgba(183,173,112,1) 100%); /* FF3.6+ */
  85.                 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(213,206,166,1)), color-stop(40%,rgba(201,193,144,1)), color-stop(100%,rgba(183,173,112,1))); /* Chrome,Safari4+ */
  86.                 background: -webkit-linear-gradient(top,  rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* Chrome10+,Safari5.1+ */
  87.                 background: -o-linear-gradient(top,  rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* Opera 11.10+ */
  88.                 background: -ms-linear-gradient(top,  rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* IE10+ */
  89.                 background: linear-gradient(top,  rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* W3C */
  90.                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#d5cea6′, endColorstr=‘#b7ad70′,GradientType=0 ); /* IE6-9 */
  91.  
  92.                 width:100px;
  93.                 height:25px;
  94.                 line-height:25px;
  95.                 color:#fff;
  96.                 text-align:center;
  97.                 cursor:pointer
  98.                 border-radius:0;
  99.                 border-top-left-radius:10px;
  100.                 border-bottom-right-radius:10px;
  101.                 margin-right:20px;
  102.         }
  103.         .form1 input[type="submit"]:hover{
  104.                 background: rgb(211,196,107); /* Old browsers */
  105.                 background: -moz-linear-gradient(top,  rgba(211,196,107,1) 1%, rgba(198,185,111,1) 40%, rgba(181,160,41,1) 100%); /* FF3.6+ */
  106.                 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(211,196,107,1)), color-stop(40%,rgba(198,185,111,1)), color-stop(100%,rgba(181,160,41,1))); /* Chrome,Safari4+ */
  107.                 background: -webkit-linear-gradient(top,  rgba(211,196,107,1) 1%,rgba(198,185,111,1) 40%,rgba(181,160,41,1) 100%); /* Chrome10+,Safari5.1+ */
  108.                 background: -o-linear-gradient(top,  rgba(211,196,107,1) 1%,rgba(198,185,111,1) 40%,rgba(181,160,41,1) 100%); /* Opera 11.10+ */
  109.                 background: -ms-linear-gradient(top,  rgba(211,196,107,1) 1%,rgba(198,185,111,1) 40%,rgba(181,160,41,1) 100%); /* IE10+ */
  110.                 background: linear-gradient(top,  rgba(211,196,107,1) 1%,rgba(198,185,111,1) 40%,rgba(181,160,41,1) 100%); /* W3C */
  111.                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#d3c46b’, endColorstr=‘#b5a029′,GradientType=0 ); /* IE6-9 */
  112.                 cursor:pointer;
  113.         }
  114.  

Et pour ce qui est du html :

  1.  
  2. <form class="form1">
  3.         <h2>Identification</h2>
  4.         <div>
  5.                 <label for="f1Llogin"> Pseudo </label><input type="text" class="f1Llogin" />
  6.         </div>
  7.         <div>
  8.                 <label for="f1Lpass"> Email </label><input type="password" class="f1Lpass" />
  9.         </div>
  10.         <input type="submit" value="valider" />
  11.  
  12. </form>
  13.  
  14.  

Publié dans Ressources

Aucun commentaire [ Laissez un commentaire ]

Pas encore de commentaire.

Laisser un commentaire

 

Please leave these two fields as-is:

Flux RSS des commentaires de cet article.

TrackBack URL

Bienvenue

Bonjour et merci pour votre visite !

Vous pouvez aussi vous inscrire au Flux Rss :o).

 
Catégories
 
Billet récents
 
Mes potes =)
 

Commentaires récents