January 2
Prima browser cominciarono ad aggiungere CSS3, o Cascading Style Sheets livello 3, il supporto, la creazione di un pulsante non predefinita dell'apertura richiesta di un editor di grafica e progettazione del tasto come prima immagine utilizzando il codice complicato. In CSS3, è possibile creare pulsanti con angoli arrotondati, gradienti e ombre senza immagini necessarie. Anche se questo metodo utilizza un bel paio di righe di codice CSS, sarà ancora rendere le pagine web più velocemente di quanto se si è utilizzato immagini.
1 Aggiungere un paio di "<button>" tag per il codice HTML per la pagina Web e dare loro un nome di classe. Posizionare il testo del pulsante tra di loro:
<Class = tasto "noimage"> My Button </ button>
2 Aprire il foglio di stile CSS per la pagina Web. Se non ha ancora uno, salvare un file vuoto come "miostile.css" e aggiungere questo codice dopo il "<title>" tag nella pagina Web:
<Link rel = "stylesheet" href = "miostile.css" type = "text / css" />
Salvare il file CSS nella stessa cartella come pagina Web o cambiare "href" per abbinare il percorso del file.
3 Creare una nuova regola di stile per la classe del pulsante:
.nessuna immagine {
}
4 Lo stile del tasto con un colore di sfondo e la nuova frontiera:
.nessuna immagine {
background-color: # ff0061;
border: 1px solid # a70040;
border-radius: 10px;
}
Questo esempio crea un tasto hot-rosa con un bordo singolo pixel di larghezza-scuro. I "border-radius" curve di proprietà della frontiera; valori più grandi in questa struttura indicano più di arrotondamento.
5 Creare un gradiente per il pulsante. Questo aiuta a dare il pulsante di un aspetto tridimensionale:
background-image: linear-gradient (in alto, # ff0061, # b90047);
background-image: -webkit-linear-gradient (in alto, # ff0061, # b90047);
background-image: -moz-linear-gradient (in alto, # ff0061, # b90047);
Hai bisogno di tre versioni del codice pendenza, tutti loro lo stesso codice, ma a due con diversi prefissi del browser. Il prefisso "-webkit" colpisce Chrome e Safari, mentre "-moz" colpisce Firefox. Questo esempio crea un gradiente di base top-to-bottom.
6 Aggiungere un'ombra dietro il pulsante con la proprietà "box-shadow":
box-shadow: 2px 2px 10px rgba (0,0,0,0.2);
I primi due valori di offset dell'ombra da sinistra e la parte superiore. Il terzo valore indica la quantità di ombra sfocatura. Un codice colore RGBA assume valori rosso, verde e blu per i colori, più un valore da 0 a 1 per l'opacità. L'esempio mostra nero con un'opacità del 20 per cento.
7 Lo stile del testo all'interno del pulsante. Cambiare il colore, il carattere e lo stile del carattere, se necessario. Aggiungere un'ombra esterna al testo usando "text-shadow":
colore: #FFFFFF;
font-style: Georgia, serif;
font-weight: bold;
text-shadow: 1px 1px rgba 3px (0,0,0,0.2);
La proprietà "text-shadow" funziona allo stesso modo come "box-shadow".
8 Lascia la tua tasto qualche imbottitura a misura che rispetto al testo:
padding: 15px 10px;
Il primo valore è padding orizzontale, mentre il secondo valore è verticale. Ecco il codice del pulsante finito:
.nessuna immagine {
background-color: # ff0061;
border: 1px solid # a70040;
border-radius: 10px;
background-image: linear-gradient (in alto, # ff0061, # b90047);
background-image: -webkit-linear-gradient (in alto, # ff0061, # b90047);
background-image: -moz-linear-gradient (in alto, # ff0061, # b90047);
box-shadow: 2px 2px 10px rgba (0,0,0,0.2);
colore: #FFFFFF;
font-style: Georgia, serif;
font-weight: bold;
text-shadow: 1px 1px rgba 3px (0,0,0,0.2);
padding: 15px 10px;
}