Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.
PREMESSA: le regole di stile, negli esempi, vengono indicate "inline", ma è sottointeso che possano essere inserire in un file css esterno con le corrette modalità (vedi: Il foglio di stile).
L'inserimento in un file esterno è sempre consigliata, anche per il completamento con i vendor prefixes necessari (non riportati negli esempi per motivi di spazio e chiarezza).
I parametri da personalizzare sono quelli in rosso, in questo modo:
widht:100px= corrisponde alla larghezza del rettangolo, potete inserire il valore che ritenete opportuno, a seconda del testo che inserirete.
height:50px = corrisponde all'altezza del rettangolo, anche qui, potete mettere il valore che credete. Se non mettete l'altezza, il box si espandera` automaticamente.
border:1px = questo valore indica lo spessore della cornice, più è alto, più la cornice sarà spessa. Se desiderate una cornice trasparente, impostate il valore su 0.
solid = solid è lo stile della cornice,ce ne sono diversi tra cui scegliere. Li ho riportati, tutti, più sotto.
blue = blue è il colore della cornice. Potete mettere il colore che preferite, purchè il suo nome sia sempre scritto in lingua inglese o col suo codice web ().
Cambiando il modello e il colore, potete creare altre cornici. Vi metto, sotto, gli esempi, con i relativi codici. I parametri che si possono variare, sono sempre quelli descritti sopra.
Tutti gli stili delle cornici
solid
dotted
dashed
double
groove
ridge
inset
outset
Con alcuni stili, è necessario un minimo di spessore del bordo di 3-4px, per poterne vedere l'effetto.
È possibile impostare stili diversi per i diversi lati usando questa regola:
border-style: dotted solid dashed double;
Ciao
Le regole seguono l'ordine stabilito (top, right, bottom, left). Per approfondimento leggi anche: "Margin e padding"
<div style="border: 1px solid black; outline: 5px dotted red;">
Cornice doppia con stili differenti
</div>
Outline
Una outline è una linea che viene disegnata attorno agli elementi, al di fuori dei bordi.
Lo scopo, per definizione, è quello di metterli in evidenza.
Le caratteristiche vengono impostate come per il bordo, ma non può avere angoli arrotondati.
Cornice con sfondo colorato
Giallo
Se volete mettere uno sfondo colorato alla cornice dovete aggiungere il parametro background: yellow;, cambiando il colore secondo i vostri gusti, ma sempre con il nome in inglese, o col suo codice web (). Il parametro può essere inserito, nella posizione che vedete sotto, in ognuno dei codici precedenti:
I parametri modificabili, sono quelli in rosso, in questa maniera:
border: 2px = larghezza in pixel della cornice.
double green = colore della cornice, come per le cornici precedenti, i nomi dei colori vanno inseriti in lingua inglese, o col codice web (). Volendo, è possibile cambiare il tipo di cornice (double), con quelle degli esempi precedenti.
color: red = è il colore del Titolo in alto.
font-family:papyrus = è il font del titolo.
Titolo = al posto di Titolo, dovete scrivere il titolo che volete dare. E' possibile decidere se deve essere in grassetto, o no, lasciando, o togliendo i tag <b></b> tra cui è scritto (se si lasciano, sarà in grassetto).
Testo = Il testo nella cornice.
Casella di testo con scrollbar
Casella di testo con scrollbar verticale. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
green = colore della cornice (nome inglese, o codice ")"
font:12px = dimensione del testo
Arial = carattere del testo
testo = può essere inserito anche successivamente in modalità editor
Lo scrollbar appare solo se la lunghezza del testo supera la dimensione del box.
Cornice per div responsive
Data l'attuale necessita` di ottimizzare il sito per il mobile, credo sia interessante creare un contenitore che possa adattarsi, in automatico, alle varie dimensioni dello schermo.
Il metodo per ottenere questo risultato è il seguente:
Come vedete, la larghezza è indicata al 100%, con limpostazione di una larghezza massima. Non e` indispensabile indicare l'altezza.
Cornice responsive con angoli arrotondati
Testo
<div style="width:100%;max-width:300px;border-radius:10px;border:1px red solid;overflow:hidden">
<div style="background-color:#eeeeee;padding:5px"> Testo
</div>
</div>
Modificate i prametri come indicato in precedenza.
Border radius
La regola border-radius è determina l'arrotondamento degli angoli. Modificando il valore in px associato, modificherete l'ampiezza della curvatura.
Impostando il valore al 50% otterrete il cerchio, oppure l'ovale a seconda che il contenitore, o l'immagine di partenza siano quadrati oppure rettangolari.
Come mettere una cornice ad una intera pagina
Per incorniciare tutta la pagina, il codice è questo:
Va inserito in alto, al primo posto, nel codice html della pagina.
I parametri che potete cambiare, sono quelli in rosso, secondo le indicazioni date in precedenza
Il comando: box-sizing: border-box; serve ad indicare al browser che il bordo deve essere contenuto nella larghezza totale. Omettendolo, la cornice risulterebbe tagliata.
Nella "membership" potete trovare moltissime risorse in più da scaricare liberamente