Aggiungere bordi, angoli arrotondati e ombre.

Incornicia una card, arrotonda gli angoli di una foto o solleva un riquadro dalla pagina con un’ombra. Imposti tutto questo nel pannello Stile dell’elemento, e puoi cambiarlo al passaggio del mouse nel pannello Stile hover. Usalo per far risaltare una card. Per la stessa cornice su un’intera serie di card, una classe condivisa le mantiene simili.

Il video segue la ricetta sotto: trasforma un blocco di testo in una card con un bordo, angoli tondi e un’ombra che si intensifica al passaggio del mouse.

Prima di iniziare

• Apri la pagina in DXPR Builder; indicare un elemento mostra la sua barra di controllo con Altro. È la prima volta che usi il page builder? Vedi La tua prima pagina.
• Salva nella finestra mantiene una modifica nell’editor. Salva nella barra degli strumenti del page builder sopra i tuoi contenuti memorizza la pagina e mostra “Campo salvato”.
• Evidenzia una cosa. Un bordo o un’ombra attira l’occhio su una data chiave, un’offerta o una citazione. Mettilo su tutto e smette di funzionare.
• Mantieni simile una serie. Per la stessa cornice su molte card, salva una card come modello o usa una classe condivisa. Vedi ID HTML e classi.
• Lascia che il tema regoli le ombre. I cinque livelli Ombra esterna sono definiti una volta per l’intero sito. Il tuo tema può ristilizzare un livello, e ogni elemento che lo usa segue.

Ricetta: una card evidenziata

Ottieni un riquadro morbido con un bordo sottile nel colore del tuo brand. Ha angoli tondi e un’ombra che cresce al passaggio del mouse.

1. Passa sopra l’elemento Testo, fai clic su Altro, poi Impostazioni.
2. Apri il pannello Stile. Il box model sta in cima. I suoi lucchetti iniziano aperti; fai clic sul lucchetto accanto a Padding per chiuderlo, così i suoi quattro lati si muovono insieme.
3. Fai clic sul lato superiore di Padding, digita 32 e premi Invio. Tutti e quattro i lati ora dicono 32px.
4. Scegli un colore Sfondo chiaro, come un grigio pallido.
5. Imposta Stile bordo su Solid.
6. Chiudi il lucchetto accanto a Bordo, poi fai clic su uno dei suoi lati, digita 1 e premi Invio.
7. Scegli un Colore bordo, imposta Raggio del bordo su 16 e imposta Ombra esterna su 3.
8. Apri il pannello Stile hover e imposta Ombra esterna su 5.
9. Fai clic su Salva nella finestra, poi Salva nella barra degli strumenti.
10. Scegli Anteprima nel menu di visualizzazione (l’icona dell’occhio) e indica la card. La sua ombra si intensifica.

Cosa vedi

La card ha un bordo sottile nel tuo colore, angoli tondi e un’ombra morbida sotto di essa. In Anteprima, l’ombra si intensifica mentre il puntatore è sopra la card e torna indietro quando se ne va.

Come è costruito un bordo

Un bordo ha bisogno di tre impostazioni, e il pannello le distribuisce. Imposta tutte e tre:

1. Stile bordo sceglie la linea: Solid, Dotted o Dashed. Su Predefiniti del tema, la maggior parte degli elementi non ha alcun bordo. None rimuove un bordo disegnato dal tuo tema.
2. L’anello Bordo del box model imposta la larghezza di ogni lato, da 0 a 50 px. Se lo lasci vuoto, il browser usa la sua larghezza di circa 3 px.
3. Colore bordo imposta il colore. Se lo lasci vuoto, il bordo prende il colore del testo.

Raggio del bordo arrotonda tutti e quattro gli angoli, da 0 a 100 px. Arrotonda anche lo sfondo e l’ombra. Su un’Immagine arrotonda l’immagine stessa.

Per un cerchio, rendi l’elemento quadrato. Poi imposta Raggio del bordo a metà della sua larghezza in pixel: 100 per un elemento largo 200 px. Per qualsiasi cosa più larga, aggiungi la classe Circolare (raggio 50%) sotto Classi HTML. Su un’Immagine questa classe arrotonda la cornice intorno all’immagine, non l’immagine, quindi usa Raggio del bordo lì.

Livelli ombra esterna

Questi sono i livelli predefiniti. Ogni livello è uno stile condiviso, non un valore memorizzato nella tua pagina, quindi un tema può ritarare un livello per l’intero sito. Per il tuo sviluppatore di temi: i livelli sono le variabili CSS --dxb-box-shadow-1 a --dxb-box-shadow-5.

Nel pannello Stile hover, Ombra esterna imposta il livello mentre il puntatore è sopra l’elemento. La nuova ombra sfuma in entrata in 0,15 secondi. Un livello più alto al passaggio del mouse fa sembrare una card sollevata.

Classi HTML offre più forme: Ombra esterna sollevata, Ombra esterna rialzata, Ombra 3D e Ombra esterna orizzontale curva. Ha anche Ombra piccola, Ombra predefinita e Ombra grande di Bootstrap. Usa un’ombra per elemento. Le classi ombra di Bootstrap battono il cursore Ombra esterna.

Se non vedi il bordo, gli angoli o l’ombra che hai impostato

• Il bordo non appare. Stile bordo è su Predefiniti del tema o None. Scegli Solid, Dotted o Dashed.
• Il bordo è più spesso di quanto vuoi. Nessuna larghezza è impostata, quindi il browser usa circa 3 px. Imposta i lati Bordo nel box model.
• Il bordo ha il colore sbagliato. Un Colore bordo vuoto prende il colore del testo. Scegli un Colore bordo.
• Gli angoli restano quadrati. Una classe come Nessun angolo arrotondato (rounded-0) sotto Classi HTML, o una regola del tema con !important, vince. Rimuovi il chip, o chiedi al tuo webmaster della regola del tema.
• Gli angoli si arrotondano ma non appare alcun cerchio. Il cursore si ferma a 100 px. Usa la classe Circolare (raggio 50%).
• Ombra esterna non cambia niente. Una classe ombra Bootstrap come Ombra grande sotto Classi HTML vince. Rimuovi il suo chip. Anche il livello 1 è tenue, quindi prova il livello 3 per testare.
• L’ombra non cresce al passaggio del mouse. Imposta Ombra esterna nel pannello Stile hover, non in Stile, e scegli un livello più alto di quello a riposo.
• Solo un lato è cambiato. Il lucchetto accanto a Padding o Bordo era aperto. Chiudilo e inserisci di nuovo il valore.
• L’ombra hover non si mostra mai su un telefono. I touch screen non hanno puntatore, quindi un aspetto hover si mostra solo dopo un tocco.

Passi successivi

• Spaziatura: dai al contenuto spazio dentro il bordo.