Comment code AA Search Bar Créé dans Photoshop

décider comment vous voulez que la barre de recherche à la fonction. Il ya des dizaines de scripts de recherche et des extraits de code disponibles sur l'Internet en utilisant une variété de langues , y compris le javascript , jQuery , PHP et HTML. Vous pouvez utiliser toutes ces choses, mais peut-être trouver la création de la première barre de recherche en HTML avec des styles qui répondent à votre image, puis l'adapter à un script est plus facile que d'essayer de le style d'un script premade pour correspondre à votre image.
< Br > 2

Lancez votre texte préféré ou un éditeur HTML et commencer par l'ajout d'une balise " forme " d'ouverture :

dans la tête de votre document HTML ou dans une feuille de style CSS séparé créer votre déclarations CSS pour chaque élément. Jetez un oeil à votre image Photoshop et déterminer la largeur et la hauteur de la barre de recherche , y compris toute espace au-dessus et en dessous du terrain et touche entrée. Saisissez cette hauteur et la largeur dans le " mainsearch « déclaration d'identité. Autres choses à considérer peut-être le positionnement de la barre , largeur de la bordure et le fond. Si il doit être placé à la droite d'un menu de navigation, par exemple , vous devez entrer un " float: right " . Variables
7

Entrez variables dans la classe qui vous avez l'intention " searchbar . " s'appliquer à toutes les barres de recherche à travers le site. Cela permet de réduire le nombre de déclarations de style répétées, puisque vous pouvez réutiliser l' " . Searchbar " class avec une forme différente ID sur la même page , par exemple. Variables de classe répétées pourraient inclure rembourrage , les marges , la couleur de bordure et le fond .
8

le style de votre champ de saisie à l'aide de la classe barre de recherche suivie par le sélecteur d'entrée . Variables à inclure dans la classe d'entrée sont des choses comme la largeur , la hauteur, la couleur du texte , la police et le style de police , les frontières , fond, remplissage et les marges . Chacune de ces variables doivent correspondre aux dimensions et paramètres d'effet dans le dossier Photoshop, qui peuvent être déterminées en affichant les options de calque et utiliser l'outil de sélection pour mesurer pixels.
9

Ajouter un style pour votre recherche bouton . Vous pouvez obtenir la plupart des styles de boutons en CSS en utilisant une combinaison de frontière et les variables d'ombre portée ou vous pouvez utiliser une image de fond . Les variables importantes à inclure pour votre style de bouton sont sa hauteur et sa largeur . Un exemple d' un style de bouton est le suivant:

searchbar button.btn {
largeur de

: 32px ;
hauteur de

: . 32px ;

texte indent: - 9999px ;

background: # CCCCCC URL ( searchbutton.png ) no-repeat haut à droite ;

}

Ce style correspond à la dimension de l' image de 32 pixels de large par 32 pixels de haut , pousse le «Submit Recherche " texte hors de la vue afin de ne pas superposer le bouton et place le bouton de recherche graphique en haut à droite du réservoir de bouton pour s'assurer qu'il n'est pas coupé.
10

Terminer en mettant en œuvre le script de recherche souhaitée ou d'une fonction dans votre formulaire HTML. Cela se fait généralement en ajoutant le nom ou le chemin du script de "l'action " variable dans la balise form , mais certains scripts peuvent inclure d'autres mesures , telles que l'ajout javascript pour la tête de votre page HTML où la barre de recherche sera placé.