Programmazione Web » Html » Realizzare tabelle con angoli smussati
Realizzare tabelle con angoli smussati
Difficoltà:
Scritto da Alessandro Alessandrini
Sito Web: http://www.sitoservice.it 
Questo tutorial è stato letto 1596 volte
Vediamo con questo tutorial, come realizzare tabelle con bordi smussati per rendere ancora più professionali i nostri menu di navigazione.
Per realizzare l'effetto smussato abbiamo bisogno di due gif, che rappresenteranno il vertice e la base della nostra tabella.
Per realizzare queste due gif potete utilizzare anche il programma Paint di Windows senza dover necessariamente cercare particolari programmi di grafica.
Ecco allora come procedere:
- Aprite Paint
- Nel menu sulla barra superiore cliccate Immagine
- Dal menu selezionate la voce Attributi
- Inserite come misura 180x180 scegliendo come unità di misura Pixel
Fatto questo ora andiamo a scegliere il colore che dovranno avere i nostri bordi in funzione chiaramente al colore di sfondo della tabella.
Cliccate dal menu sulla barra superiore, l'opzione Colori e definite, cliccandoci sopra, il colore che vi occorre e infine cliccate il pulsante ok.
Se guardate ora in basso a sinistra, nella riga che raccoglie i colori, potete notare il vostro colore appena scelto, in primo piano.
Ora che avete definito il colore, passiamo a creare la forma per poter ricavare poi i nostri bordi.
Nel menu di sinistra cliccate la forma del rettangolo smussato, scegliendo poi, nel menu al di sotto che compare, l'opzione di riempimento totale senza bordi come potete vedere in figura:
Ora tracciate nell'area precedentemente definita, il rettangolo con bordi smussati, facendo attenzione ad arrivare, in larghezza, sui bordi della stessa area.
Realizzato il rettangolo, andiamo a tagliare il bordo superiore e quello inferiore che ci serviranno per la tabella.
Cliccate sul rettangolino tratteggiato posto nella barra dei strumenti a sinistra, per tagliare i due bordi dal rettangolo appena creato, come illustrato in figura:
Una volta selezionata l'area, dal menu superiore aprite Modifica e cliccate su Taglia.
Chiudete Paint e riapritelo, cliccate di nuovo sul menu Modifica e questa volta cliccate Incolla.
Non vi rimane che salvare la vostra immagine e il gioco è fatto.
Procedete con lo stesso criterio per la barra inferiore, così avrete entrambi i bordi smussati per la tabella.
Ora, realizzate una tabella larga 180 pixel a tre righe orizzontali facendo attenzione a non inserire spaziature tra una cella e l'altra.
Colorate ora la cella centrale dello stesso colore dei bordi appena creati.
Inserite i bordi nelle altre due celle e avrete ottenuto la tabella con bordi smussati che vi consentirà di inserire del testo nella cella centrale.
Aggiungi questo tutorial ai preferiti
