Creare menù e pulsanti
Le molteplici potenzialità dei CSS possono aiutarci a realizzare degli splendidi pulsanti e menù che potremo inserire con incredibile facilità all'interno delle nostre pagine web. I consigli esposti in questo articolo vi porteranno in fine ad essere in grado di creare dei professionalissimi effetti cross-browser di rollover.
La proprietà "cross-browser" è fondamentale affinchè il nostro menù sia navigabile con i principali browser in circolazione (Firefox, Internet Explorer, Opera).
Iniziamo: da dove partiamo?
Non stupitevi della semplicità: il nostro pulsante non è altro che un semplice link a cui applichiamo una classe.
Stupendo vero? Un banalissimo ipertesto può dare un grande tocco di classe alle nostre pagine.
Definiamo la classe.
Ora non ci resta altro da fare che pensare quale potrebbe essere un bel effetto di rollover da applicare al nostro link (ovviamente sono sempre effetti di testo, se cercate effetti particolari dovrete per forza ricorrere al flash ma questo è un altro discorso...)
Vediamo quali sono le proprietà che possono tornarci utili per il nostro pulsante:
background-color: #000 lo sfondo del pulsante: vuole il colore espresso in esadecimale;
background-image:url(../img/bg.gif) applica un'immagine di sfondo;
border: 1px solid #000 applica un bordo intorno al nostro link, possiamo anche, eventualmente, scegliere quale bordo vogliamo far apprire: border-top, border-right, border-bottom, border-left (provate anche un bordo puntinato sostituendo "solid" con "dotted");
color: #fff è il colore del testo, vuole un valore esadecimale;
display: block per un bel effetto consigliamo di settarlo su "block" in modo da dare finalmente vita al nostro pulsante. Con questa proprietà, infatti, il nostro link diventa un rettangolo di cui possiamo settare la larghezza e l'altezza in pixel rispettivamente con le seguenti proprietà: width e height;
font-family: Verdana, Arial, Helvetica, sans-serif specifica quale famiglia di font usare (n.b. conviene sempre offrire alternative nel caso in cui quel font non sia presente nel computer del nostro navigatore. Tuttavia sconsiglio vivamente di usare caratteri diversi dal: verdana, arial, tahoma, times, courier)
font-size: 9px è la grandezza del font;
font-weight: bold specifichiamo la grossezza del font;
letter-spacing: 5px specifica la distanza tra le lettere;
line-height: 20px specifica l'altezza della linea di testo. Consiglio di usare questa proprietà assiema a height con lo stesso valore e display: block;
margin:1px specifica lo spazio con altri oggetti. Con la dicitura precedente applichiamo un margine di 1 px in tutte le direzioni. Se vogliamo modificare diversamente i margini in base alla direzione possiamo scrivere, per esempio, margin: 1px 3px 2px 8px; che sarebbe l'equivalente di:
margin-top: 1px;
margin-right: 3px;
margin-bottom: 2px;
margin-left: 8px;
(le direzioni vanno lette in senso orario partendo da "top");
simile a margin come concetto ma non come risultato è il:
padding: 1px solo che lo spazio è tra i bordi dell'oggetto e il contenuto (in questo caso il testo del link). Anche per il padding abbiamo le seguenti diciture:
padding: 1px 3px 2px 8px; che sarebbe l'equivalente di:
padding-top: 1px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 8px;
(le direzioni vanno lette in senso orario partendo da "top");
text-align: left è l'allineamento del testo del link e può essere:
left: a sinistra;
right: a destra;
center: al centro;
justify: giustificato;
text-decoration: underline è la decorazione del testo e può essere:
none: nessuno;
underline: sottolineato;
line-through: tagliato da una linea;
text-transform: lowercase trasformazione del testo e può essere:
capitalize: rende maiuscola la prima lettera;
lowercase: tutto minuscolo;
uppercase: tutto maiuscolo;
Credo di aver elencato tutte le principali proprietà che possiamo utilizzare per il nostro pulsante ora spetta a te trovare le combinazioni più giuste da inserire nella classe.
Le proprietà fisse le inseriamo nella classe del link, mentre l'effetto rollover viene applicato quando siamo sopra al link col mouse quindi nella proprietà hover della classe.
Ad esempio, supponiamo di volere creare un semplice link che con il passaggio del mouse viene sottolineato:
A.stragulp { text-decoration:none;}
A.stragulp:hover { text-decoration:underline;}
per il pulsante usiamo il codice riportato sopra:
tutto qui!
Ora, per impratichirvi, potete analizzare i codici di questi esempi che adesso dovrebbero risultarvi facilissimi da interpretare.
Centinaia di ragazzi e ragazze ti stanno aspettando.
Vai su Lovebits, la sezione incontri gratis di Stragulp!, e vota l'utente piú affascinante.
E se fossi proprio tu a vincere la classifica?