Comment faire pour créer des boutons en utilisant des textures avec CSS3

Dans cet article, nous allons regarder une méthode simple de créer des boutons en utilisant CSS3 et textures. Bien qu'il soit possible de faire beaucoup de style avec le code, vous pouvez vraiment vous geek et créer vraiment cool, mais beaucoup de temps des projets.







Dans cet article, nous allons regarder une méthode simple de créer des boutons en utilisant CSS3 et textures. Bien qu'il soit possible de faire beaucoup de style avec le code, vous pouvez vraiment vous geek et créer vraiment cool, mais beaucoup de temps des projets.

Ma recommandation est d'utiliser le code pour certains effets, puis à un certain point (qui ne vous le concepteur peut déterminer), je recommande d'utiliser l'image d'illustration ou de programmes manipulation de photos tels que: Adobe Photoshop, Illustrator, CorelDRAW, PHOTO-PAINT, Paintshop photo Pro ou GIMP pour créer les composants.

En ce qui concerne les textures, vous pouvez utiliser des textures libres textures en ligne, libres de droits ou créer votre propre, en utilisant le logiciel. Mon programme de choix est Corel PHOTO-PAINT X5 (une partie de l'application CorelDRAW) parce que les options de création de texture sont étonnants et pratiquement illimitée.

Si vous ne l'avez jamais utilisé PHOTO-PAINT, voici un rapide tutoriel pour vous aider à démarrer (ce qui est avec X5 PHOTO-PAINT). Avec le fonctionnement du programme, allez dans Fichier: Nouveau.







Dans la création d'une boîte de dialogue Nouvelle image, utilisez les paramètres suivants:

Résolution: 96 dpi

Mode couleur: 24 bits RVB

, Vous apprendrez ensuite comment créer des textures. Cliquez sur l'outil de remplissage (F) en bas à gauche pour l'activer, puis allez à la barre de menu et cliquez sur l'icône texture bleu. A droite immédiate de c'est l'icône Modifier Fill. Cliquez sur pour ouvrir la boîte de dialogue de remplissage de texture.

Remarque: A droite de l'icône Modifier Fill, vous verrez plusieurs paramètres. Pour l'instant, laissez ceux à la valeur par défaut. Plus tard, lorsque vous avez choisi une texture, vous pouvez expérimenter avec la transparence, la superposition, et plus encore.

C'est là que la magie commence. En haut à gauche, vous avez accès à la bibliothèque Texture, où vous trouverez un riche assortiment de textures. En haut à droite, vous verrez le numéro de texture lorsque vous cliquez sur le bouton Aperçu en bas à gauche. En cliquant sur cela va changer la texture et les couleurs en bas à droite. Vous verrez également le changement de numéro de texture. Vous pouvez maintenant définir les couleurs en bas à droite manuellement. Lorsque vous êtes satisfait de votre texture, cliquez sur OK. Cela vous ramènera à l'espace de travail.

Pour appliquer la texture, placez votre curseur sur l'espace blanc dans le fichier d'image que vous avez créé. Vous verrez qu'il se transforme en une icône de seau de peinture. Cliquez pour appliquer la texture. Après cela, vous pouvez expérimenter avec la tolérance, la transparence et la fusion des modes. Une fois que vous avez commencé, vous trouverez qu'il est assez addictif. Vous serez en mesure de créer des textures vraiment cool pour vos projets.

Une fois que la texture est fait, il est temps de créer un bouton simple avec un vol stationnaire. Notez que pour ce tutoriel, je l'ai utilisé Adobe Dreamweaver CS6 pour tout mettre ensemble.

La première étape consiste à créer une forme de bouton rectangulaire avec l'image d'arrière-plan et du texte à l'intérieur. Dans ce cas, je définir la taille de la texture pour correspondre aux dimensions CSS ci-dessous:







Articles Liés