PapyClic - Design

PapyClic - Design

Création de boutons en CSS

https://static.blog4ever.com/2012/06/704535/artfichier_704535_3534793_201403160659507.gif

Présentation du menu du haut en boutons, à l'aide des bordures gérées par le CSS.

 

 

Dans le code  vous remarquerez que la différence de style de la bordure et de la couleur, au survol de la souris, en rouge.

 

.diz-barre-navigation{
  background: transparent;
}
.diz-barre-navigation a {
  background: #16A5A2;
  padding: 2px 10px;
  color: #FFFFFF;
  border: 1px ridge #F0F0F0;
}
.diz-barre-navigation a:hover {
  color: #000000;
  border: 1px groove #606060;
}

 

Deuxième présentation, mais en faisant remonter le menu sur le logo. 

 

 

Ce qui change dans le code, c'est la marge négative de la barre, en rouge.

 

.diz-barre-navigation{
  background: transparent;
  margin-top: -40px;
}
.diz-barre-navigation a {
  background: #16A5A2;
  padding: 2px 10px;
  color: #FFFFFF;
  border: 1px ridge #F0F0F0;
}
.diz-barre-navigation a:hover {
  color: #000000;
  border: 1px groove #606060;
}

 

Dans cette troisième présentation, boutons arrondis et ombrés, avec le CSS3. 

 

 

Le code en rouge pour les coins arrondis et en vert  pour l'ombre.

 

.diz-barre-navigation{
  background: transparent;
  margin-top: -40px;
}
.diz-barre-navigation a {
  background: #16A5A2;
  padding: 2px 10px;
  color: #FFFFFF;
  border: 2px ridge #F0F0F0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 4px 12px #666;
  -moz-box-shadow: 2px 4px 12px #666;
  box-shadow: 2px 4px 12px #666;
}
.diz-barre-navigation a:hover {
  color: #000000;
  border: 2px groove #101010;

 

 Les codes ci-dessus sont à coller dans la zone de personnalisation du CSS de l'assistant du DizPerso.

 

Espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → CSS personnalisé.

 

Exemple de code collé dans la zone.

 

 

Si votre espace de gestion est ouvert, cliquez sur : lien

 

N'oubliez pas, après visualisation dans l'assistant de cliquer sur "Appliquer"en bas de la colonne.

 

Propriétés que vous pouvez utiliser dans la même règle :  .diz-barre-navigation a
ou .diz-barre-navigation a:hover

 

Taille des caractères : font-size: 12px;
Italique : font-style: italic;
Gras : font-weight: bold;
Petites capitales : font-variant: small-caps;
Minusucules : text-transform: lowercase;
Majuscules : text-transform: uppercase;
Première lettre de chaque mot en majuscule : text-transform: capitalize;
Pour que le texte  reste comme il est saisi : text-transform: none;

 

Exemple de code pour centrer le texte du lien, comme ci-dessous.

 

.diz-barre-navigation a {
   text-align : center;
}
.diz-barre-navigation a:hover {
   text-align : center;
}

Code pour les 3 alignements :

Alignement  centré : text-align: center;
Alignement à droite : text-align: right;
Alignement à gauche : text-align: left;

 

 

Cliquez pour ouvrir une page où vous pourrez tester le code CSS >>> lien
Et même le modifier si vous connaissez le CSS. 

 


Si cet article vous a été utile, un petit J'aime me fera plaisir.

N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait. 
Pour plus d'explications poster sur le forum

 

 

HautPrécédente

 



20/05/2013
10 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 150 autres membres