BLOG PENNA CALAMAIO®

Giochiamo con i bordi delle immagini all'interno del post.

apete che nei post del blog le immagini possono essere inserite con un bordo?
Per farlo, è sufficiente utilizzare le funzioni già fornite dall'editor del blog. Precisamente, quando attraverso il tasto immagini presente nell'editor del blog, noi inseriamo un'immagine nei nostri post, si apre una finestra ripartita in due sezioni: Generale ed Aspetto. Cliccando Aspetto possiamo decidere di contornare l'immagine con un Bordo, inserendo anche un valore numerico che indichi la dimensione del bordo stesso. Ad es. le immagini inserite in questo post hanno tutte un valore 10, ovvero un bordo della dimensione di 10 px.
Senonchè il bordo inserito dall'editor di Libero alle nostre immagini è rigorosamente nero (o di un colore predefinito in relazione al template del blog) ed esso è costituito da una linea solida e continua. Esiste tuttavia la possibilità di intervenire sul codice html del post per modificare sia il colore sia l'aspetto dei bordi. Chiarisco subito che non  si tratta di un'operazione difficile e complessa; essa richiede semplicemente un pò di attenzione e che si sappia a priori il colore da adottare ed il nome del bordo che vogliamo inserire.

Cominciamo quindi a scoprire come si chiamano i bordi nel linguaggio html.

1) - Il primo che vedete è il classico bordo a linea fissa. Si ottiene con l'attibuto solid;
2) - Il secondo è un bordo a linea doppia che si ottiene con l'attributo double;
3) - Il terzo è un bordo tridimensionale che si ottiene con l'attributo inset;
4) - Il quarto bordo è anch'esso tridimensionale e si ottiene con l'attributo outset;
5) - Il quinto bordo si ottiene con l'attributo groove;
6) - Il sesto bordo è un bordo tratteggiato che si ottiene con l'attributo dashed;
7) - Il settimo bordo si chiama ridge;
8) - Ed infine l'ultimo bordo è a puntini e si chiama dotted.

La tabella con i codici dei colori invece si trova qui.

Come dobbiamo procedere per inserire ed abbellire il bordo della nostra immagine?
Basta seguire questa procedura:
Clicchiamo nell'editor il tasto immagine ed inseriamo l'indirizzo dell'immagine. Poi clicchiamo Aspetto e scegliamo la posizione dell'immagine (ad es. a destra del testo) e la dimensione del bordo ad es. 5
L'editor del blog scriverà automaticamente il codice html. Noi dobbiamo semplicemente cliccare il tasto dell'editor "Visualizza html" e modificare il nome ed il colore del bordo.
L'editor avrà scritto questo codice:

border: 5px solid black

Il numero 5, come detto indica la dimensione del bordo, la parola solid qualifica il bordo predefinito che è quello a linea fissa e black indica il colore predefinito del bordo, ovvero il nero. Se noi volessimo un bordo celeste a linea doppia dovremmo solo sostituire la parola solid e la parola black. Al posto di solid scriveremo quindi dooble che è il nome del bordo a linea doppia, mentre al posto di black scriveremo 3366ff avendo cura di far precedere il codice colore dal simbolo del cancelletto # che si trova sulla tastiera del computer accanto alla A accentata (à) e che si ottiene premendo contemporaneamente il tasto ALT GR più à.
Scriveremo in sostanza:

border: 5px groove #3366ff

Clicchiamo il tasto "Aggiorna" ed il gioco è fatto! Dovete solo provare. E' facilissimo!