Changer l'apparence d'un élément en CSS3

En utilisant les styles par défaut des navigateurs

Ce tutoriel va vous apprendre à changer l'apparence d'un élément HTML grâce à une propriété CSS3.

17 commentaires Donner une note à l'article (4.5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Changing Appearance Of Element With CSS.

II. Introduction

Chaque navigateur possède ses propres styles par défaut. Par exemple un bouton sous Chrome n'aura pas le même style qu'un bouton sous Internet Explorer.

Pour pouvoir manipuler ces styles par défaut, il faut utiliser la propriété CSS3 -appearance. Grâce à cette propriété, vous pouvez appliquer un style par défaut à n'importe quel élément HTML. Vous pouvez par exemple donner à un lien <a> le style d'un bouton, ou encore faire en sorte qu'un paragraphe ressemble à une textbox.

Cette propriété est actuellement supportée par les navigateurs Webkit et Firefox, vous avez donc besoin de préfixer la propriété dans votre code CSS.

III. Les différents styles par défaut

Il existe un grand nombre de style par défaut. Nous n'allons nous intéresser qu'à certain d'entre eux pour l'exemple.

 
Sélectionnez
.lookLikeAButton{
     -webkit-appearance:button;
     -moz-appearance:button;
}
.lookLikeAListbox{
     -webkit-appearance:listbox;
     -moz-appearance:listbox;
}
.lookLikeAListitem{
     -webkit-appearance:listitem;
     -moz-appearance:listitem;
}
.lookLikeASearchfield{
     -webkit-appearance:searchfield;
     -moz-appearance:searchfield;
}
.lookLikeATextarea{
     -webkit-appearance:textarea;
     -moz-appearance:textarea;
}
.lookLikeAMenulist{
     -webkit-appearance:menulist;
     -moz-appearance:menulist;
}

Puis vous pouvez utiliser ces classes CSS dans votre page HTML.

 
Sélectionnez
<p class="lookLikeAButton">This is a paragraph
<p class="lookLikeAListbox">This is a paragraph
<p class="lookLikeAListitem">This is a paragraph
<p class="lookLikeASearchfield">This is a paragraph
<p class="lookLikeATextarea">This is a paragraph
<p class="lookLikeAMenulist">This is a paragraph

IV. Conclusion

Nous avons vu dans ce tutoriel comment changer l'apparence d'éléments HTML en utilisant les styles par défaut de chaque navigateur.

V. Liens

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

Vous pouvez également consulter la liste des éléments impactés par la propriété -appearance.

VI. Remerciements

Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également Torgar pour sa relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.