Outline e box-shadow
Aggiungete contorni di focus ed effetti ombra attorno agli elementi utilizzando outline e box-shadow.
Outline e box-shadow è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Proprietà outline
outline disegna una linea all'esterno del bordo. Non influisce sul layout: gli elementi circostanti non si spostano. La sintassi abbreviata rispecchia quella di border: width style color.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset allontana l'outline dal bordo. I valori positivi lo spostano verso l'esterno, mentre quelli negativi lo spostano verso l'interno, creando un effetto di ritaglio.
<button class="focus-demo">Keyboard-focused Button</button>
outline a confronto con border
Differenze principali:
- Outline non influisce sul flusso del layout
- Outline non può essere impostato per lato, perché non esiste outline-top
- Outline può non essere rettangolare e seguire la forma dell'indicatore di focus in alcuni browser
- Outline si trova sempre all'esterno del bordo
:focus-visible a confronto con :focus
È preferibile utilizzare :focus-visible per gli indicatori di focus da tastiera. L'outline viene mostrato solo quando il focus è stato ricevuto tramite tastiera, non con un clic del mouse: in questo modo si evita il rumore visivo per chi usa il puntatore, preservando al contempo l'accessibilità.
<button class="focus-demo">Keyboard focus vs mouse click</button>
Nozioni di base su box-shadow
box-shadow aggiunge un effetto ombra attorno a un elemento. La sintassi abbreviata è: offset-x offset-y blur-radius spread-radius color.
<div class="card">Card with soft shadow</div>
Spiegazione dei valori di box-shadow
Ogni valore di box-shadow:
- offset-x: spostamento orizzontale (negativo = sinistra)
- offset-y: spostamento verticale (negativo = alto)
- blur-radius: morbidezza (0 = nitido)
- spread-radius: aumenta o riduce le dimensioni dell'ombra
- color: colore dell'ombra (si consiglia RGBA)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Ombra interna con inset
Aggiunga la parola chiave inset per disegnare l'ombra all'interno dell'elemento, creando un aspetto premuto o incassato.
<input class="input focus-demo" type="text" value="Focused input" />
Più ombre box-shadow
Separi più ombre con delle virgole. Vengono sovrapposte dalla parte anteriore a quella posteriore:
<span class="badge">3</span>
box-shadow a confronto con filter: drop-shadow
box-shadow considera solo la forma del riquadro. filter: drop-shadow() segue la forma visualizzata, inclusa la trasparenza: è ideale per le icone PNG con sfondi trasparenti.
<div class="icon">★</div>
Sistema di elevazione con box-shadow
Material Design e sistemi simili definiscono diversi livelli di ombra per rappresentare l'elevazione visiva. Mappi le variabili CSS sui valori delle ombre:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
Animare box-shadow in modo efficiente
L'animazione di box-shadow attiva un repaint a ogni fotogramma. Per migliorare le prestazioni, animi opacity di un'ombra generata da uno pseudo-elemento oppure utilizzi filter: drop-shadow(), che può essere gestito dal compositing.
Verifica rapida
Quale parola chiave di box-shadow disegna l'ombra all'interno dell'elemento?
Riepilogo
outline disegna all'esterno del bordo senza influire sul layout: lo utilizzi per gli indicatori di focus. box-shadow aggiunge ombre di profondità con spostamento, sfocatura, espansione e colore. Utilizzi inset per le ombre interne. È possibile sovrapporre più ombre separandole con virgole.
Domande Frequenti
La lezione «Outline e box-shadow» è gratuita?
Sì — il testo completo di «Outline e box-shadow» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Outline e box-shadow»?
Aggiungete contorni di focus ed effetti ombra attorno agli elementi utilizzando outline e box-shadow. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Outline e box-shadow»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Comprendere width, height, margin e padding
- Stili, larghezza e colore dei bordi
- Box-sizing: content-box e border-box
- Outline e box-shadow