Pubblicato il 01/09/15e aggiornato il

Come personalizzare lo stile dei bordi in dimensioni, colori e forma con il CSS.

Come creare dei bordi con stile, colore e spessore determinato utilizzando i tag CSS e HTML.
I bordi sono un elemento grafico presente in moltissime pagine web e per inserirli ci sono dei tag ben codificati. I bordi possono essere inseriti con un CSS inline a un singolo elemento per esempio un paragrafo con questa sintassi <p  style="border: groove #003366; 4px;">Questo paragrafo sarà contornato da un bordo</p> oppure a una immagine con un codice simile a questo

<img style="border: dotted #f00; 4px;" src="http://lorempixel.com/400/200"/>

I parametri colorati di rosso sono quelli che determinano lo stile del bordo. I codici dei colori ne determinano ovviamente il colore mentre 4px è lo spessore del bordo; dotted e groove sono gli stili e significano rispettivamente punteggiato e bordo a rilievo

Un altro modo per inserire dei bordi è quello di operare nei CSS vale a dire per inserire una proprietà in tutti gli elementi cha abbiano un determinato selettore. Se per esempio volessimo inserire un bordo in tutte le immagini pubblicate sul nostro blog di Blogger dovremo aggiungere nel modello un codice come il seguente o modificare quello già esistente nella sezione <b:skin>

.post-body img {border: ridge #047 2px;}

PROPRIETÀ SINGOLE DEI BORDI


Si può configurare singolarmente un solo lato del bordo con i seguenti tag:

border-top-color, border-top-style, border-top-width, border-bottom-color,
border-bottom-style, border-bottom-width, border-right-color, border-right-style,
border-right-width, border-left-color, border-left-style, border-left-width

che per chi conosce anche solo un po' di inglese non hanno bisogno di ulteriori precisazioni. Mi limito a ricordare che color è il colore, style è lo stile e che width è lo spessore.  In genere però si utilizzano dei tag più sintetici visto che non c'è quasi mai l'esigenza di creare dei bordi con aspetti e stili diversi per ogni lato. 

PROPRIETÀ ABBREVIATE DEI BORDI


border, border-bottom, border-top, border-right, border-left, border-color,
border-style, border-width

che prendono in considerazione più aspetti del bordo. Il tag più utilizzato è il primo cioè border ed è quello che si usa per creare un bordo identico in tutti e quattro i lati dell'elemento.

STILE DEI BORDI


Abbiamo già visto due stili di bordi cioè dotted e groove. Ecco la tabella pressoché completa

Stile del bordo Descrizione del suo aspetto
none Non è presente nessun bordo
hidden Il bordo è nascosto, equivalente a none
dashed Bordo tratteggiato
dotted Bordo punteggiato
solid Bordo con linea continua
double Bordo solido, continuo e doppio
groove Bordo in rilievo
ridge Diverso tipo di bordo in rilevo
inset Bordo incastonato
outset Bordo sbalzato

Per rendere più chiari i singoli stili del bordo ecco un'altra tabella esplicativa

border: groove #036 4px;


border: double #036 4px;


border: ridge #036 4px;


border: dashed  #036 4px;


border: dotted  #036 4px;


border:inset  #036 4px;


border:outset  #036 4px;


border: solid  #036 4px;

Gli attributi in rosso sono i vari stili dei bordi, quelli in blu sono i codici dei colori e quelli in viola determina lo spessore del bordo. Nel prossimo articolo vedremo una applicazione di questi codici. 




2 commenti :

  1. Salve Ernesto, e grazie mille perché col tuo blog mi hai insegnato tantissimo per gestire il blog e personalizzarlo.
    Sto attuando le ultime modifiche per tornare pubblicamente online dopo un periodo in cui non scrivevo più. Mi sono accorta che per riprendere ho bisogno di modificare un po' la pelle di quello spazio.
    E allora mi chiedevo, e ti chiedo: come faccio a creare delle cornici/bordi per le miniature del widget dei post più letti, su blogspot? Ho cercato un po' di info sul tuo blog, per mezzo degli articoli passati, ma non mi riesce assolutamente. Vero è che sono fortemente impedita.
    Spero tu possa aiutarmi.
    Buona giornata e grazie ancora ;)

    RispondiElimina
    Risposte
    1. Prova a vedere se in questi tre post ci sono delle info che possano aiutarti
      http://www.ideepercomputeredinternet.com/2010/09/come-personalizzare-il-widget-dei-post.html
      http://www.ideepercomputeredinternet.com/2013/01/miniature-post-popolari-blogger.html
      http://www.ideepercomputeredinternet.com/2012/12/popupar-post-blogger-resize-thumbnails.html
      Si tratta di un widget ufficiale di Blogger e quindi la sua personalizzazione è piuttosto complicata
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.