Cookie

Attention


Cet article a été publié il y a plus d'un an, il peut y avoir des développements été.
S'il vous plaît prendre en compte.

Dans l'article d'aujourd'hui, nous voyons comment transformer un simple formulaire, Un bouton n'est pas formatée sous une forme aussi simple avec un bouton en forme. Toutes les couleurs, dégradés et des ombres seront “bâti” en utilisant les règles CSS pour la version 3. Ces quelques règles simples sont à prendre un certain’ avec des pinces, parce qu'ils fonctionnent parfaitement avec le navigateur basé sur Webkit (Safari, Konquerror, iPad / iPhone) e Gecko (Firefox e simili), mais elles sont inutiles sur toutes les versions

Internet Explorer avant 9.

Commençons par le code HTML. Nous allons également connecter le fichier “style.css”:

<html>
<tête>
  <link rel ="stylesheet" href ="style.css" type ="text / css" charset ="utf-8" />
</tête>
<corps>
  <former action ="#">
    <tableau>
      <tr>
        <td>Nom:</td><td><input type ="texte" name ="Nom" value =""></td>
      </tr>
      <tr>
        <td>Courrier:</td><td><input type ="texte" name ="courrier" value =""></td>
      </tr>
      <tr>
        <td colspan ="2" align ="centre"><bouton id ="bouton">Envoyer</bouton></td>
      </tr>
    </tableau>
  </forme><!--fin forme ->
</corps>
</html>

Sans la mise en forme proposée par CSS ce serait le résultat “noeud et brut”.

form_non_formattata

1. Home Style

Nous commençons à entrer à l'intérieur de notre “style.css” les lignes de code suivantes pour donner du style à la touche:

bouton{
  largeur: 100px;
  contour: aucun;
  curseur: aiguille;
  text-align: centre;
  text-decoration: aucun;
  font: gras 12px Arial, Helvetica, sans-serif;
  couleur: #fff;
  rembourrage: 10px 20px;
  frontière: 1px solid # 0076a3;
  fond: #0095cd;
}

En attendant, nous donnons une taille fixe, texte allineamo dans le centre sans décorations, elle est définie la police (font), la couleur (couleur) et les distances par rapport aux autres éléments (rembourrage). Ensuite, nous avons mis la couleur de fond du bouton et la couleur de la bordure. Ceci est le résultat:

1

2. Fond dégradé

Nous pourrions alors ajouter un dégradé à la couleur de fond, à envoyer un à trois dimensions. Nous ajoutons les lignes suivantes à l'élément “bouton” la nostro “style.css”:

fond: -webkit-gradient(linéaire, en haut à gauche, bas à gauche, à partir de(#00services), à(#0078a5));
fond: -webkit-linear-gradient(supérieur,  #00services,  #0078a5);
fond: -moz-linear-gradient(supérieur,  #00services,  #0078a5);
fond: -ms-linear-gradient(supérieur,  #00services,  #0078a5);
fond: -o-linear-gradient(supérieur,  #00services,  #0078a5);

Parmi ces lignes il y a peu d'expliquer, ajouter un dégradé vertical à l'arrière-plan. Ceci est le résultat:

2

3. Arrondir les angles

Selon vos préférences, nous pouvons vouloir arrondir les angles de la touche. Nous ajoutons les lignes suivantes à l'élément “bouton” la nostro “style.css”:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Il peut être utile de comprendre comment ces valeurs. Vous devez jouer un peu’ pour trouver le résultat souhaité. Ci-dessous est le résultat:

3

4. Ombre

Pour donner la touche finale de la tridimensionnalité est nécessaire de donner un léger ombrage. Nous ajoutons ces derniers éléments lignes “bouton” la nostro “style.css”:

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Ceci est le résultat:

4

Et maintenant que nous avons un bouton avec un style que vous avez juste à définir l'action classique sur la souris et cliquez sur. Les lignes suivantes pour ajouter le fichier “style.css”:

bouton:planer {
  fond: #0095cd;
  fond: -webkit-gradient(linéaire, en haut à gauche, bas à gauche, à partir de(#0078a5), à(#00services));
  fond: -webkit-linear-gradient(supérieur,  #0078a5,  #00services);
  fond: -moz-linear-gradient(supérieur,  #0078a5,  #00services);
  fond: -ms-linear-gradient(supérieur,  #0078a5,  #00services);
  fond: -o-linear-gradient(supérieur,  #0078a5,  #00services);
  fond: gradient linéaire-(supérieur,  #0078a5,  #00services);
}

bouton:actif{
  poste: par rapport;
  supérieur: 1px;
}

Et ceci est le résultat de la course:

Pas assez?


TheJoe

Je garde ce blog comme un hobby par 2009. Je suis passionné de graphisme, la technologie, logiciel Open Source. Parmi mes articles ne sera pas difficile de trouver de la musique, et quelques réflexions personnelles, mais je préfère la ligne directe du blog principalement à la technologie. Pour plus d'informations me contacter.

0 commentaires

Laisser un commentaire

Votre adresse email ne sera pas publiée. les champs requis sont indiqués *

Ce site utilise Akismet pour réduire le spam. Découvrez comment vos données de commentaire est traité.