pulsante rollover

  • Lancio Inkscape
  • Selezioniamo lo strumento rettangolo sulla barra strumenti a sinistra del programma
  • A questo punto disegnamo un rettangolo: basterà premere con il tasto sinistro sull’area di lavoro e tener premuto trascinando il cursore
  • Ora aggiustiamo le dimensioni del nostro rettangolo. Con lo strumento freccia selezioneremo il rettangolo appena disegnato, per poi immettere nella barra strumenti in alto la larghezza e l’altezza del nostro bottone   150x35 px
  • Per poter lavorare meglio, selezionare lo strumento lente per ingrandire fino alla dimensione voluta il rettangolo. Ricordo che con il tasto Shift premuto insieme alla lente, diminuiremo le dimensioni di visualizzazione.
  • Assegneremo quindi un colore al rettangolo. Dal menu Oggetto selezioneremo la voce Riempimento e contorni: si aprirà una nuova finestra. Imposteremo il riempimento con colore unico e sceglieremo il colore dominante del bottone R=10, G=164, B=230, opacità 100
  • Una volta scelto il colore, imposteremo quindi il gradiente lineare come riempimento
  • In un passo solo andremo a sistemare il gradiente lineare e arrotonderemo gli angoli del rettangolo. Per la prima operazione sposteremo i due estremi della linea del gradiente; mentre per aggiungere gli angoli arrotondati sposteremo il pallino in alto a destra del rettangolo
  • Aggiungeremo poi un bordo al rettangolo: sempre dalla finestra Riempimento e contorni imposteremo i bordi su colore unico e definiremo il colore del bordo del bottone 40 82 130
  • Passando alla tab Stile contorno imposteremo quindi il bordo spesso 1 pixel
  • Ora dovremo creare un altro rettangolo arrotondato per conferire l’effetto gloss al bottone. Con il tasto freccia selezioneremo il rettangolo, per poi premere con il tasto destro e selezionare Copia. Dal menu Modifica selezioneremo quindi incolla in origine.
    Il nuovo rettangolo avrà le stesse dimensioni del primo e verrà disposto esattamente sopra.
  • Sempre con la freccia, cliccheremo ripetutamente sul rettangolo fino alla comparsa delle maniglie per ridimensionarlo. Lo renderemo circa la metà dell’altezza originale e un po’ più stretto
  • Ora allineeremo i due rettangoli: con la freccia e il tasto shift premuto li selezioneremo entrambi, per poi cliccare dal menu Oggetto sulla voce Allinea e Distribuisci
  • A questo punto sistemeremo forma e colore del rettangolo per l’effetto gloss. Dalla finestra Riempimento e contorni elimineremo i bordi.
  • Cliccheremo poi ripetutamente sul rettangolo con lo strumento freccia fino alla comparsa della linea di gradiente. Cliccheremo quindi sull’estremo inferiore della linea, impostando il colore bianco. Regoleremo quindi gli angoli arrotondati in modo che si accordino bene con il nostro bottone. Si potranno ora spostare i due estremi della linea di gradiente a piacimento per conferire un’effetto più o meno marcato.
  • Siamo così arrivati all’ultima operazione: regoleremo la trasparenza del rettangolo per l’effetto gloss, impostando sul valore 66% circa il valore dell’Opacità generale della voce Riempimento
  • Ricordo che per poterlo osservare a dimensioni un po’ più realistiche basterà cliccarci sopra con la lente, tenendo premuto il tasto Shift.

    Ora non ci resta che Salvare il nostro lavoro nel formato più conveniente, dal menu File – Salva:

  • Lo esporteremo infine in formato PNG. Dal menu File sceglieremo Esporta bitmap. Sceglieremo quindi di esportare il disegno, e sceglieremo il percorso e il nome del file

Ricordo che è possibile infine cambiare il suo colore globale intervenendo solo sul colore e i bordi del rettangolo più grande, dato che l’effetto gloss dà sempre sul bianco. Da notare inoltre che il file PNG esportato sarà di default semi-trasparente. Se si volesse eliminare la trasparenza, oppure assegnare un altro colore di sfondo, basterà intervenire sul pannello Proprietà documento disponibile nel menu File. È infine possibile regolare le dimensioni del bottone a piacere, per esempio per ottenere un bottone più largo.

 

Un bottone pronto per il rollover con Gimp

  • Una volta ottenuto il nostro bottone gloss con InkScape, ulteriori modifiche e/o elabolazioni risultano più comode con un programma di editing e disegno bitmap, ad esempio Photoshop o Gimp. In questa seconda parte “raddoppieremo” il nostro bottone così da renderlo pronto per il rollover
  • Una volta lanciato Gimp, apriamo il file PNG che abbiamo creato con Inkscape dal menu File, scegliendo la voce Open
  • Ora apriremo un nuovo file che conterrà il nostro bottone, dal menu File -> New, di dimensione 150×70 pixel, ovvero con la stessa larghezza del bottone originale ma altezza doppia
  • Per poter lavorare di precisione dovremo servirci delle griglie. Sulla nuova immagine, impostiamo quindi una griglia 5×5, selezionando la voce Configure Grid dal menu View
  • Sempre dal menu View, selezioneremo Show Grid per mostrare la griglia appena impostata e Snap to Grid per ancorare oggetti e selezioni alla griglia
  • Ora cliccheremo sul file realizzato con Inkscape, e con Select -> All selezioneremo l’intera immagine, per poi copiarla con Edit -> Copy.
  • Torneremo sull’immagine nuova con le griglie, e dal menu Edit sceglieremo Paste per incollarla. La selezione appena incollata andrà quindi spostata in alto. Da notare come la griglia risulti d’aiuto nello spostamento:
  • L’operazione andrà eseguita una seconda volta, incollando il bottone nella parte inferiore
  • Dal pannello strumenti andremo quindi a premere lo strumento di selezione rettangolare, Per poi selezionare il bottone in basso
  • Ora sono moltissime le trasformazioni che potremo effettuare sul bottone in stato rollover, molte delle quali sono disponibili dal menu Image -> Adjustements. Per intervenire sul colore e la saturazione ad esempio, sceglieremo Hue – Saturation, le cui modifiche sono immediatamente visibili sull’immagine spuntando la casella “Preview”
  • Il nostro bottone è così ultimato, vediamo il risultato della trasformazione
  • salvare il lavoro

 

 CSS. Oggi vediamo una tecnica da sempre consigliata per alleggerire le pagine e velocizzare i tempi di caricamento

vediamo come formattare l’HTML.

<a id="contattaci" href="#" title="contattaci"><span>Contattaci</span></a>

Questa sarà la riga HTML che mostrerà il bottone all’interno della pagina. Da notare l’attributo ID” il cui stile verrà poi modificato tramite i CSS. E’ facile notare che la riga qui sopra in realtà non contiene link ad alcuna immagine, è semplicemente un link testuale: “Contattaci“.

Ed ora vediamo come impostare il CSS per trasformare il nostro link in un bottone con effetto rollover del mouse:

#contattaci{
  display: block;
  width: 150px;
  height: 35px;
  background: url("img/bottone.png") no-repeat 0 0;
}

#contattaci:hover{
  background-position: 0 -35px;
}

#contattaci span{
  display: none;
}

 

Occhio a richiamare l’immagine giusta. Io l’ho messa nella directory “img“. Il bottone è molto grande, com’è semplice notare la larghezza è quella iniziale dell’immagine (width: 150px;), mentre l’altezza è esattamente la metà (height: 35px;). Nel caso in cui il mouse non passi sopra al bottone verrà mostrata la metà superiore del bottone (i primi 106 pixel), mentre se vediamo la seconda regola alla voce “background-position” possiamo notare un valore negativo -35px“. Questa regola posizionerà il bottone 35px in alto, facendoci di fatto vedere solo la seconda metà dell’immagine nella stessa posizione in cui si trovava la prima.

La terza regola serve semplicemente a nascondere il testo Contattaci“.

 

---------------------------

https://www.html.it/articoli/bottoni-gloss-con-gimp-e-inkscape/

https://thejoe.it/2010/12/24/rollover-con-una-sola-immagine-usando-i-css/