Tutti i tipi di bordini – border

Ogni volta che tratto l’argomento bordino, poi mi metto a scrivere i dettagli, per ogni tipo di bordo. Così ho pensato di scrivere un post sommario sui bordi che potrete poi usare nei box, nei box immagine, nei post, nelle colonne laterali, dette anche sidebar e in generale su tutti i contenitori a forma di box.

Partiamo con il tiny-tut: mini tutorial, in effetti suona meglio tiny-tut.

border:2px solid #fff;

  • border: corrisponde al bordo;
  • numeropx:  definisce lo spessore, dovrete aggiungere il numero di pixel, più alto è il numero, più spesso sarà il bordino: andrà da 1px in su;
  • color: per definire il colore del bordo, andrà scritto il nome del colore oppure il suo codice #fff; (bianco). Colorpicker.com è un semplice strumento on line, gratuito per trovare il codice.
  • solid: stabilisce invece lo stile del bordo se tratteggiato, solido, doppio etc: controllate sotto i vari bordini nell’immagine equivalente e prelevate il corrispondente codice:

border:4px solid pink;

border:4px dotted pink;

border:4px dashed pink;

border:4px double pink;

border:2px ridge pink;

border:4px inset pink;

border:4px outset pink;

AGGIUNGERE IL CODICE NEI POST BLOG:
Perciò per fare un esempio, se volete aggiungere un bordo all’interno del post, non dovrete fare altro che cliccare sull’editor html e inserire il codice in questo modo:

PER BORDARE SOLO LA PAROLA:  Parolina bordata

<span style=”border:3px inset pink;”>Qui scrivi il tuo testo</span>

CREARE UN BOX CON DIMENSIONI PERSONALI

Box di larghezza 200px, sfondo bianco e testo allineato al centro

In questo caso ho aggiunto l’allineamento del testo e il colore di sfondo, il codice sarà quindi così:

<p style=”border: 2px ridge pink; width: 200px; color: black; background: white; text-align: center;”>Qui scrivi il tuo testo</p>

PER INSERIRE IL CODICE CSS NEL TEMPLATE

Il codice può essere utilizzato nel template direttamente, per modificare le caratteristiche dei box che contengono i post, le immagini o la colonna laterale.

Perciò se vi interessano questi argomenti leggete i tyni-tut:

Cambiare il box sidebar
Cambiare il bordo sidebar – colonna laterale.
Bordino immagine.
Bordino css.
Come aggiungere un bordino immagine su Blogger.
Codice per creare una tabella.

Naturalmente variando lo spessore del bordo, il colore e lo sfondo si possono ottenere risultanti di tutti i tipi e molto belli.

Se volete sapere come applicare questo codice ai vostri pezzetti del blog, leggete i tiny-tut tag blogger! Come il border-radius che è un effetto fortissimo di bordi arrotondati e generatori di codice on line gratuiti.

A presto,

by BLOGGHIDEE

Spread the love

Discussion

  1. francesca
  2. admin
  3. francesca
  4. admin
  5. tizianace

Leave a Reply

This blog is kept spam free by WP-SpamFree.