Questa pillolina serve per capire meglio le proprietà grafiche applicabili ai moduli (form):
- Text - Password
- Textarea
- Checkbox - Radiobutton
- Select
- Button
Esaminerò passo passo ogni form e applicherò stili in formato CSS per facilità d'uso. Per semplicità ometterò gli attributi più classici (name, vale, size, maxlenght, tabindex....).
Text - Password
Il modulo Text è quello a cui si possono applicare un numero di effetti grafici rispetto agli altri.
codice:
<style type="text/css">
.text {
font-family: Arial; // tipo carattere
font-size: 10px; // dimensione carattere
color: #000000; // colore carattere
text-decoration: none; // decorazione carattere
background-color: #0099CC; // colore sfondo
border: 1px solid #FF9900; // tipologia bordo di colore arancione
font-weight: bold; // spessore carattere
font-style: italic; // stile carattere
}
</style>
Questo è lo stile CSS da applicare al modulo Text nel seguente modo:
codice:
<input type="text" class="text">
Le modifiche fatte a questa casella sono riportate nel commento accanto ad ogni riga del codice CSS. Avremo una edit con sfondo rosso, bordo arancione, carattere Arial, dimensione carattere pari a 10px, colore nero, carattere grassetto e italic.
Si può modificare lo sfondo della edit mettendovi un immagine, sostituendo:
codice:
background-color: #0099CC; // colore sfondo
con la riga:
codice:
background-image: url(image.gif); // url dell’immagine di sfondo
Se non vogliamo applicare un particolare specifico allo stile, basta omettere la riga in questione.
Ad esempio, voglio che il carattere non sia grassetto, in questo caso ometterò la riga seguente dal codice CSS:
codice:
font-weight: bold; // spessore carattere
rendendo lo stile CSS in questo modo:
codice:
<style type="text/css">
.text {
font-family: Arial; // tipo carattere
font-size: 10px; // dimensione carattere
color: #000000; // colore carattere
text-decoration: none; // decorazione carattere
background-color: #0099CC; // colore sfondo
border: 1px solid #FF9900; // tipologia bordo di colore arancione
font-style: italic; // stile carattere
}
</style>
All’edit è possibile applicare le tipologie di bordo sotto elencate:
- dotted // punteggiato
- dashed // tratteggiato
- solid // continuo
- double // doppio
- groove // incassato
- ridge // in rilievo
- inset // interno
- outset // esterno
Basta sostituire con il tipo scelto la riga:
codice:
border: 1px dotted #FF9900; // tipologia bordo di colore arancione
Textarea
Alla Textarea possono essere applicate tutte le particolarità grafiche del modulo text. Alla Textarea però si può anche aggiungere la personalizzazione delle barre di scorrimento laterali. Analizziamo il CSS in questione:
codice:
<style type="text/css">
.textarea {
font-family: Arial; // tipo carattere
font-size: 10px; // dimensione carattere
color: #000000; // colore carattere
text-decoration: none; // decorazione carattere
border: 1px solid #FF9900; // tipologia bordo di colore arancione
background-color: #FF0000; // colore sfondo
font-weight: bold; // spessore carattere
font-style: italic; // stile carattere
scrollbar-face-color: #000000; // colore sfondo dei pulsanti freccine
scrollbar-shadow-color: #606060; // colore dell’ombra dei pulsanti freccine
scrollbar-highlight-color: white; // colore ombreggiatura dei pulsanti e delle freccine
scrollbar-3dlight-color: Black; // colore ombreggiatura dei pulsanti
scrollbar-darkshadow-color: #000000; // colore ombreggiatura inferiore dei pulsanti frec
scrollbar-track-color: #8C8C8C; // colore dello sfondo inferiore della barra
scrollbar-arrow-color: #FF0000; // colore delle freccine
}
</style>
In questo modo avremo una Textarea con bordo arancione, fondo rosso e barre di scorrimento laterali con tonalità comprese tra il grigio e il nero.
codice:
<textarea class="textarea"></textarea>
Al bordo si possono applicare le varianti (dotted, dashed…) riportate nella parte Text.
Checkbox – Radiobutton
Ecco che siamo giunti ai pulsanti di scelta, i quali hanno stili tutti particolari loro:
codice:
<style type="text/css">
.caselle {
border: 1px solid #FF9900; // tipologia bordo di colore arancione
background-color: #FF0000; // colore sfondo
}
</style>
codice:
<input type="radio" class="caselle">
<input type="checkbox" class="caselle">
Questi pulsanti di controllo appariranno con lo sfondo rosso e bordo arancione di 1px. I Checkbox e i Radiobutton non consentono di implementare il tipo e le caratteristiche del carattere.
Se vogliamo mettere un carattere particolare dobbiamo affiancare un altro stile e impostare un paragrafo in questo modo:
codice:
<style type="text/css">
.testo {
font-family: Arial; //tipo carattere
font-size: 10px; //dimensione carattere
font-weight: bold; //spessore carattere
font-style: italic; //stile carattere
}
.caselle {
border: 1px solid #FF9900; //tipologia bordo di colore arancione
background-color: #FF0000; //colore sfondo
}
</style>
Impostando il codice HTML in questo modo:
codice:
<input type="radio" class="caselle"><p class=”testo”>Miao</p>
Ovviamente il paragrafo dovrà essere impostato al meglio per mettere in linea la casella radio e il testo miao.
Al bordo si possono applicare le varianti (dotted, dashed…) riportate nella parte Text.
Select
Applichiamo il seguente CSS alla select:
codice:
<style type="text/css">
.select {
font-family: Arial; // tipo carattere
color: #FFFFFF; // colore carattere
font-size: 10px; // dimensione carattere
font-weight: bold; // spessore carattere
font-style: italic; // stile carattere
border: 1px solid yellow; // tipologia bordo di colore giallo
background-color: #990000; // colore sfondo
}
</style>
Impostandolo alla Select:
codice:
<select class="caselle">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
La Select è molto particolare in quanto permette solamente la tipologia, le caratteristiche del carattere e il colore di sfondo. Non permette invece il tipo, lo spessore, il colore del bordo e la personalizzazione della freccia laterale destra anche se mettiamo un altezza superiore a 1.
Button
Al Button è possibile applicare le stesse tipologie grafiche della edit:
codice:
<style type="text/css">
.button {
font-family: Arial; // tipo carattere
color: #FFFFFF; // colore carattere
font-size: 10px; //dimensione carattere
font-weight: bold; //spessore carattere
font-style: italic; //stile carattere
background-color: #990000; // colore sfondo
border: 1px solid #CCCC00; // tipologia bordo di colore giallo
}
</style>
Applichiamo lo stile al bottone:
codice:
<input type="button" class="button">
Oltre lo sfondo, la tipologia e le caratteristiche del carattere, possiamo decidere la tipologia di bordo che deve avere il bottone. Nel caso dello stile Button, il bordo è largo 1px con colore giallo; in questo modo non avremmo però l’effetto tridimensionale del bottone. Se vogliamo lasciare invariato la tridimensionalità del button, omettiamo la riga:
codice:
border: 1px solid #CCCC00; // tipologia bordo di colore giallo
Le tipologie di bordo sono quelle applicabili agli edit, descritte nella prima parte della.
Spero che questa Pillola vi serva nella realizzazione e personalizzazione dei vostri form. Ovviamente se ho tralasciato qualcosa, o volete implementare altre caratteristiche, siete liberi di aggiungerle sotto.
Rispondi quotando
