Pagina 1 di 6 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 57
  1. #1

    [Federix Pillola 1] Grafica dei moduli

    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.

    FEDERIX.IT - [Pillola] GRAFICA DEI FORM

    ...ho ancora quella forza che ti serve, quando dici "Si comincia!"

  2. #2
    Bravo Frederix !!

    Ottima pillola.. molto utile per la personalizzazione e formattazione degli input !!

    Aggiungo che nella select non si possono mopdificare la freccetta e la selezione che sono di default grigi e non possono essere modificati...

    Inoltre potevi aggiungere il tasto :
    codice:
    <input type="file" name="sfoglia">
    Al quale non si pèuò dare un value e sarà di default sfoglia o browse.

    Cmq ottima !! :metallica :metallica

    La aggiungo subito ai preferiti !! :metallica

  3. #3
    Quello della freccetta della select l'ho scritto. Il modulo file l'ho tralasciato in quanto riprende gli stili delle edit e dei bottoni.

    FEDERIX.IT - [Pillola] GRAFICA DEI FORM

    ...ho ancora quella forza che ti serve, quando dici "Si comincia!"

  4. #4
    Originariamente inviato da Federix
    Quello della freccetta della select l'ho scritto. Il modulo file l'ho tralasciato in quanto riprende gli stili delle edit e dei bottoni.

    Non lo avevo visto

    Cmq complimenti !

  5. #5
    Reale_Augello
    Guest

    I...

    ... miei complimenti, Federix.

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2002
    Messaggi
    370
    ma il text non si può allineare a destra?

  7. #7
    codice:
    text-align: right;
    FEDERIX.IT - [Pillola] GRAFICA DEI FORM

    ...ho ancora quella forza che ti serve, quando dici "Si comincia!"

  8. #8
    Utente di HTML.it
    Registrato dal
    Feb 2002
    Messaggi
    370
    rimane sempre a sinistra

  9. #9
    Controlla bene che sicuramente hai sbagliato qualcosa. Ti assicuro che il comando è quello.
    FEDERIX.IT - [Pillola] GRAFICA DEI FORM

    ...ho ancora quella forza che ti serve, quando dici "Si comincia!"

  10. #10
    grande Federix era proprio quello ke mi seviva!!!


Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.