Effetti estetici oltre il bordo senza trasformare il contenitore in scroll
Testo scritto con l’intelligenza artificiale a partire da una fonte citata, senza revisione umana prima della pubblicazione.
Usa overflow: clip con overflow-clip-margin per lasciare uscire ombre e glow senza creare un'area scrollabile.
Vuoi far uscire ombre o glow da un box senza far comparire lo scroll. Imposta overflow: clip sul contenitore e aggiungi un overflow-clip-margin piccolo. Ottieni il margine visivo, non cambi la natura del box: resta non scrollabile1.
Effetti decorativi oltre la padding box: ombre, alone di focus, bagliori. Escludi contenuti da leggere o cliccare1.
Imposta overflow: clip sul contenitore e aggiungi overflow-clip-margin con un valore ridotto. Il browser sposta solo il bordo di clipping della pittura quanto basta per mostrare l’effetto decorativo. Non tocca la geometria, non crea uno scroll container1.
Il contenitore resta non scrollabile. Anche forzare scrollTop da codice non ha effetto. Ombre e glow possono estendersi oltre il bordo fino al valore del clip margin. Il cambiamento riguarda la fase di paint, non quella di layout. Con overflow: auto o scroll il contenitore diventa scrollabile per scelta esplicita1.
Evitalo se il contenuto tagliato serve all’utente. Se va letto, messo a fuoco o cliccato, non nasconderlo dietro un clip. In questi casi crea un contenitore scroll con overflow: auto o scroll, oppure ristruttura il layout. Non usare overflow-clip-margin per “recuperare spazio”: è un permesso ottico di pittura, non un fix di layout1.
Le ombre si disegnano in modo diverso sui motori. Aspettati differenze sottili, specie a varie dimensioni di viewport. Verifica visivamente sui browser target. L’articolo indica che il fixture usato isola il contratto di clipping, ma non sostituisce una verifica completa di accessibilità per focus da tastiera o screen reader1.
Fai prima un test minimo. Un fixture essenziale dimostra tre punti: con clip il box non scorre, con clip più clip-margin la pittura esce senza abilitare lo scroll, passando ad auto nasce uno scroll container. La fonte fornisce un’implementazione di test con un container fissato a coordinate note e una card con un’ombra rossa. In modalità “clip-margin” l’esempio usa 20px per il margine di clipping. Dove il supporto manca, come in alcune build di Chromium, il fixture simula la fuoriuscita spostando l’elemento decorativo a fratello del container, così la pittura appare fuori senza violare il contratto di non scrolling. I test restano deterministici anche quando overflow-clip-margin non è implementato1.
Il server aggiunge l’esempio verificato con il fixture e l’harness di test, poi invita a rivedere visivamente il componente reale prima della messa in produzione1.
Se lo spazio serve davvero al contenuto, nessun clip-margin sostituisce un redesign del layout1.
Fonti
Come è nato questo articolo Scritto da un sistema di intelligenza artificiale, con controlli automatici
Millebit non ha giornalisti che scrivono gli articoli: li scrive un motore editoriale basato su modelli di intelligenza artificiale, a partire dalle fonti elencate qui sopra. Prima di uscire, ogni testo passa questi controlli:
- Rilettura. Un passaggio toglie i tic della prosa generata da un modello, come i contrasti costruiti e le frasi che annunciano invece di informare, senza toccare fatti e fonti.
- Fedeltà alle fonti. Un passaggio dedicato toglie ogni affermazione che le fonti non sostengono. Valutazione su questo pezzo: 10/10.
- Anti-cliché. Un filtro scarta frasi fatte, enfasi e tic della prosa artificiale: superato.
- Giudizio editoriale. Un modello valuta il pezzo su sette criteri (apertura, chiarezza, economia, concretezza, voce, struttura, fedeltà) e sotto 7,8/10 non si pubblica. Questo articolo ha preso 8,2/10.
I controlli riducono gli errori ma non li eliminano: un modello può fraintendere una fonte. Per le decisioni importanti, risali alla fonte originale. Se trovi un errore, segnalacelo.
Per vedere Millebit nelle notizie principali di Google, aggiungilo alle tue fonti preferite. Oppure segui l’edizione di oggi, il feed RSS o La Sintesi.