|
Création d'un menu de papier déchiré en CSS est facile à faire en créant d'abord l'image de papier déchiré , puis en ajoutant l'image au code CSS. Utilisez ces étapes de base pour créer du papier déchiré dans un logiciel graphique qui comprend des couches et d'effets. Logiciel natif , comme la peinture , ne sera pas en mesure de créer l'effet de sa propre mais ne peut à la mise à niveau gratuitement par Paint.NET . D'autres logiciels , comme Snagit, est livré avec un effet de papier déchiré . Instructions
papier déchiré image
1 Ouvrez votre logiciel graphique préféré, comme Paint.NET , gimp ou Photoshop.
2 Créer un nouveau fichier qui représente la taille du menu. Ajouter une nouvelle couche sur le dessus. Remplissez le calque avec du blanc , puis masquer le calque . Ajouter une couche transparente sur le dessus de la couche blanche .
3 Sélectionnez le pinceau et créer une ligne inégale à travers la couche blanche . Fusionner les couches transparentes et blanc et puis double.
4 Ajouter un flou gaussien sur la deuxième couche . Cliquez sur le calque du haut, puis cliquez sur la zone à être montré par l'effet de papier déchiré avec l'outil Baguette magique. Inversez la sélection, puis supprimer.
5 fusionner les deux couches supérieures et cliquez sur la zone à afficher avec l'outil magique. Supprimer la sélection .
6 Enregistrer l'image sous forme de fichier PNG.
7 Créez un nouveau calque et ajouter du texte à l'image comme "Home". Enregistrez le fichier sous un nouveau nom , comme à la maison et répéter au besoin pour les onglets de menu supplémentaires .
Fichier HTML
8 Ouvrez votre fichier HTML et ajouter le code CSS suivant à la section de tête du code.
"
Photos "
Photos 9 Dans la section du corps du code, ajoutez le code suivant . Remplacer " maison", "environ" et "contact" avec les images de papier déchirés que vous avez créées .
"
|
< ;/a> < /div> 