Créez des boutons sympas en utilisant CSS3 et RGBa

Eh bien, en voyant ce titre, nous pouvons d'abord ignorer les navigateurs IE.

J'avoue que j'ai une tendance minimaliste et je veux pouvoir faire plus avec le moins de code et d'images.

Bien que CSS3 n'ajoute que quelques nouvelles fonctionnalités, ces propriétés peuvent faire de nombreuses choses utiles et simplifier considérablement notre travail. Les boutons que nous avons créés aujourd'hui exploitent pleinement les coins arrondis, les effets d'ombre de boîte et d'ombre de texte de CSS3, tout en utilisant les couleurs RGBa.

Jetons d'abord un coup d'œil à la démo :

Nous pouvons réaliser ces magnifiques boutons en quatre étapes :

1. Paramètres de base des boutons

Nous devons d'abord définir le style de base du bouton. Ici, nous utilisons la balise a. Bien sûr, vous pouvez également utiliser les balises d'entrée, de bouton, etc. La balise a est utilisée ici car seule la balise a parmi ces trois balises prend en charge la balise a. : survolez la pseudo-classe.

Merci à ytzong Children's Shoes pour sa suggestion. Nous avons changé pour display:inline-block, qui peut enregistrer les lignes de code float et margin. ——[email protected]

2. Image dégradée png semi-transparente

C'est la seule image que nous utilisons ici. Cette image png transparente est utilisée pour réaliser des dégradés de couleurs. On peut appeler cette image un dégradé de transparence monochrome. En CSS, vous pouvez obtenir différents effets de dégradé de couleurs en utilisant une démo d'arrière-plan + une image png comme celle-ci. Bien entendu, ce n'est pas une fonctionnalité de CSS3. À l'exception des navigateurs inférieurs à IE6, tous les navigateurs peuvent obtenir cet effet. Vous pouvez cliquer ici pour voir le fichier png.

3. Coins arrondis

Les coins arrondis (border-radius) sont l'une des meilleures fonctionnalités CSS3 actuellement prises en charge par les navigateurs. En plus des navigateurs IE, tous les navigateurs de niveau A la prennent en charge, bien que la plupart d'entre elles soient implémentées via des attributs privés, au moins, elles sont disponibles. .

4.Ombres et RVBA

Box-shadow et text-shadow sont deux nouvelles propriétés importantes ajoutées à CSS3. Elles peuvent facilement implémenter des ombres d'éléments et des ombres de texte au niveau du bloc. Cependant, ne serait-il pas préférable que la couleur de l’ombre soit semi-transparente ? De cette façon, l’élément se fondrait mieux dans l’arrière-plan. Il est à noter que FF ne prend en charge l'attribut text-shadow que jusqu'à la version 3.5 (actuellement prise en charge par Firefox 3.5beta4).

 .btn {
 ...
 arrière-plan : #222 url(sprites.png) répéter-x ;
 /**Image de fond**/
 -moz-border-radius : 5px ;
 -webkit-border-radius : 5px ;
 rayon de bordure : 5 px ;
 /**coins arrondis**/
 -webkit-box-shadow : 0 1px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow : 0 1px 3px rgba(0, 0, 0, 0.5);
 /**Ombre du bouton**/
 texte-ombre : 0 -1px 1px rgba(0, 0, 0, 0,25) ;
 /**ombre du texte**/
 }

D'accord, maintenant notre bouton est complètement terminé. Notre objectif a été atteint.

Ce bouton est noir, donc des boutons d'autres couleurs sont plus faciles à mettre en œuvre :

Veuillez noter que ces styles doivent être placés après .btn. De cette manière, la couleur de fond de ces boutons vert, bleu, rouge, etc. peut remplacer la couleur de fond du .btn. puis utilisez

Enfin, prenons pitié du navigateur IE. Ces boutons afficheront des angles droits, des couleurs dégradées, pas d'ombres et pas de couleurs transparentes dans les navigateurs IE7 et IE8, mais dans IE6, ils afficheront un fond bleu clair. ne prend pas en charge la transparence png. Si vous souhaitez que cela ressemble à un bouton dans IE6, utilisez simplement les filtres IE après js.