I nuovi CSS3 Border Techniques - dummies

I bordi sono stati una parte del CSS fin dall'inizio, ma i CSS3 aggiungono alcune nuove opzioni davvero interessanti. I browser moderni ora supportano i bordi creati da un'immagine così come gli angoli arrotondati e le ombre dei riquadri. Queste tecniche promettono di aggiungere nuove straordinarie funzionalità ai tuoi progetti.

Bordi immagine

CSS3 consente di utilizzare un'immagine per un bordo elemento. Il meccanismo è abbastanza potente perché rileva i bordi di un'immagine e "seziona" per creare i bordi e gli angoli del bordo dai bordi e dagli angoli dell'immagine.

L'immagine del frame è memorizzata come frame. png nella stessa directory del file HTML. Ha un centro trasparente. Applica il seguente codice per aggiungere un bordo immagine attorno a tutti gli elementi della pagina:

h2 {border-width: 15px; border-image: url ("frame. png") ripetizione del 25%; -webkit-border-image: url ("frame. png") ripetizione del 25%; -moz-border-image: url ("frame. png") ripetizione 25%;}

Ecco come si aggiunge un'immagine di bordo:

1. Acquisisci la tua immagine.

   L'immagine dovrebbe già essere progettata come una sorta di bordo. Tipicamente, avrà una forma attorno ai bordi, con un centro in tinta unita o un centro trasparente.

2. Specifica la larghezza del bordo.

   Dovrai indicare direttamente la larghezza del bordo. Il bordo dell'immagine del fotogramma viene ridimensionato per adattarsi alle dimensioni desiderate.

3. Calcola la parte del bordo dell'immagine che desideri.

   Se si omette il segno di percentuale, il valore viene calcolato in pixel. È possibile aggiungere quattro valori se si preferisce utilizzare quantità diverse dell'immagine originale per ciascun limite.

4. Indica il comportamento che vuoi.

   L'immagine originale non ha quasi mai le stesse dimensioni dell'elemento che si desidera circondare, quindi è possibile fornire un suggerimento per spiegare come il browser deve gestire elementi più grandi dell'originale. Le scelte più comuni sono ripetere (ripetere l'immagine originale) o allungare (per occupare l'intero spazio). Con una semplice immagine come la cornice. png usato in questo esempio, i risultati saranno gli stessi.

   

Come aggiungere angoli arrotondati

I vecchi CSS erano noti per essere molto rettangolari, quindi i web designer hanno cercato di ammorbidire i loro disegni aggiungendo angoli arrotondati. Questo è stato un risultato difficile da raggiungere. CSS3 semplifica enormemente la creazione di angoli arrotondati con la regola del raggio di confine.

È piuttosto facile ottenere angoli arrotondati su quei browser che supportano il tag:

angoli. html h1 {larghezza: 60%; background-color: # 000066; colore: # 9999ff; border: # 9999ff groove 3px; margine: auto; allineamento del testo: centro; raggio di confine:. 5em;}

Demo angoli arrotondati

La regola funziona tagliando un arco da ogni angolo dell'elemento.L'arco ha il raggio specificato, quindi per gli angoli acuti, vorrete un piccolo raggio. È possibile misurare il raggio in una qualsiasi delle misurazioni comuni, ma i pixel (px) e la larghezza del carattere (em) sono quelli più comunemente utilizzati.

Il bordo non è visibile a meno che l'elemento non abbia il colore di sfondo o il bordo definito. Nota che ci sono varianti di ogni tag per supportare angoli specifici. Questo può essere utile se non desideri applicare lo stesso raggio a tutti e quattro gli angoli del tuo elemento. I browser più recenti ora supportano la regola generica del raggio di confine.

È possibile raccogliere un certo numero di browser della generazione precedente utilizzando il prefisso specifico del fornitore. Se il tuo browser non comprende la regola del raggio di confine, creerà semplicemente gli angoli quadrati ordinari.

Come aggiungere un'ombra di riquadro

Le ombre di riquadro vengono spesso aggiunte agli elementi per creare l'illusione della profondità.

L'effetto ombra del riquadro non è difficile da ottenere, ma normalmente viene eseguito come parte di una definizione di classe in modo che possa essere riutilizzato in tutta la pagina. Ecco alcuni esempi di codice:

boxShadow. html. shadow {box-shadow: 10px 10px 10px # 000000; altezza: 200 px; larghezza: 200 px; imbottitura: 1em; bordo: 1px solido nero; border-radius: 5px; background-color: #EEEEEE;}

Box Shadow Demo
Questa casella ha un'ombra

L'aggiunta dell'ombra di una casella è molto più semplice in CSS3 di quanto non fosse una volta. Ecco i passaggi:

1. Definisci una classe.

   Spesso ti consigliamo di applicare le stesse impostazioni a un numero di elementi in una pagina, quindi l'ombra del riquadro viene spesso combinata con altri elementi come il colore di sfondo e il bordo in una classe CSS che può essere riutilizzata in tutta la pagina.

2. Aggiungi la regola di ombreggiatura.

   I browser più recenti supportano la regola standard di ombreggiatura della casella, ma potresti anche voler includere i prefissi del browser per adattarli alle vecchie browser.

3. Specificare l'offset.

   Un'ombra viene generalmente spostata dal rettangolo a cui appartiene. I primi due valori indicano l'offset orizzontale e verticale. Misura usando una qualsiasi delle misure CSS standard (normalmente pixel o em).

4. Determina la sfocatura e diffonde le distanze.

   È possibile modificare ulteriormente il comportamento dell'ombra specificando la velocità con cui l'ombra si sfoca e la distanza in cui si diffonde. Questi sono parametri opzionali.

5. Indica il colore dell'ombra.

   Puoi rendere l'ombra qualsiasi colore che desideri. Il nero e il grigio sono comuni, ma puoi ottenere effetti interessanti selezionando altri colori.

Sono possibili molti altri effetti ombra. Puoi aggiungere più ombre e puoi anche utilizzare la parola chiave inset per produrre un'ombra interna per far sembrare che una parte della pagina sia tagliata.