Come fare un più interessante Tasto di ricerca in CSS

February 16

Come fare un più interessante Tasto di ricerca in CSS


Se si desidera attirare l'attenzione su un pulsante di ricerca sul tuo sito web, non c'è bisogno di farlo lampeggiare colori rosso brillanti per catturare l'attenzione di un visitatore del sito. tasti di ricerca - usati per trovare i contenuti all'interno di un sito web o su Internet - appaiono spesso in posizioni di rilievo nella parte superiore di una pagina. Per trasformare pulsanti di ricerca comuni in interessanti opere d'arte, aggiungere attributi CSS per i pulsanti e farli apparire come più ti piace.

istruzione

1 Aprire un documento di una pagina Web che contiene un pulsante di ricerca. Individuare la sezione corpo del documento, e trovare il tag input che crea il pulsante. Quella prima parte del codice del tag sarà simile al codice riportato di seguito:

<Input type = "button"

Aggiungere il seguente testo dopo "bottone":

class = "newSearchButton"

Dopo aver aggiunto questa classe, il codice apparirà come segue:

<Input type = "button" class = "newSearchButton" value = "Ricerca" />

2 Passare alla sezione head del documento e incolla il codice CSS indicato di seguito a quella sezione:

<Style type = "text / css">
.newSearchButton
{
Altezza: 50px; width: 100px; padding: 4px;
colore rosso; background-color: Giallo;

Questo codice crea la classe CSS newSearchButton e definisce alcuni attributi. Questi attributi influenzano l'aspetto del pulsante in modi diversi. I valori di altezza e larghezza controllare le dimensioni del pulsante. I valori riportati sono in pixel. altezza del pulsante, per esempio, è di 50 pixel. L'attributo imbottitura determina quanto il testo del pulsante viene visualizzato dai bordi del pulsante. Gli attributi di colore e di background-color impostati primo piano e il colore di sfondo del pulsante.

3 Aggiungere il testo riportato di seguito dopo il testo mostrato nel passaggio precedente:

border-style: tratteggiate; border-width: 3px; border-color: Blu;
font-weight: bold; font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}
</ Style>

Questo codice aggiunge attributi aggiuntivi. I tre attributi sulla prima riga impostare lo stile del bordo del pulsante, la larghezza e il colore. Gli attributi sulla seconda riga definiscono carattere del pulsante. In questo esempio, lo spessore del carattere è in grassetto e il suo stile è in corsivo. L'ultima riga definisce i nomi dei caratteri che si desidera il pulsante da utilizzare. Specificare più di un nome per l'attributo font-family. Se il browser di un utente non può rendere il primo carattere della lista - Arial, in questo caso - il browser tenta di utilizzare uno degli altri tipi di carattere nella lista.

4 Salvare il documento e lanciare il browser per vederlo come una pagina Web. Il tuo nuovo pulsante apparirà sulla pagina che mostra gli attributi definiti nel CSS.

Consigli e avvertenze

  • Il numero di possibili stili di pulsanti è quasi infinita a causa del numero di attributi che è possibile impostare. Modificare il valore del border-style di incasso e il border-width per 10px e l'aspetto del pulsante cambia drasticamente. Si acquista un bordo di spessore tridimensionale con una leggera ombra sui bordi superiore e sinistro. Continuare per assegnare valori diversi a diversi attributi e visualizzare le modifiche in un browser. Si può scoprire accidentalmente un effetto sorprendente che aggiunge solo il tocco finale a destra si sta cercando.