Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Ombreggiare lato di un div con overflow-x

  1. #1
    Utente di HTML.it L'avatar di supermac
    Registrato dal
    Jun 2001
    Messaggi
    1,411

    Ombreggiare lato di un div con overflow-x

    Ho dei div che contengono delle tabelle più larghe del display; il div contenitore ha la proprietà overflow-x impostata su scroll, e tutto funziona bene, ovvero su desktop browser mi permette di scrollare il div a dx e sx per vedere il contenuto e su tablet anche posso fare il panning della tabella a dx e sx per vedere tutti i dati.
    Ora però vorrei aggiungere un'ombreggiatura sul (o sui) lato/i del div quando il contenuto eccede la parte visibile, ovvero se all'apertura della pagina il div contiene una tabella più larga del display vorrei mostrare un'ombrina grigia sul lato dx in modo che l'utente capisca che c'è dell'altro e può scrollare.
    D'altra parte l'ombra sul lato dx dovrebbe scomparire quando, facendo il panning, ho raggiunto l'estremità destra del contenuto e dovrebbe altresì comparire l'ombreggiatura sul lato sx del div.
    Spero di essermi spiegato....
    Si può fare tutto via css? serve scrivere JS?
    Avete esempi da scopiazzare?
    Grazie

    PS ho visto ora il titolo che avevo messo... overscroll LOL
    Ultima modifica di supermac; 08-05-2018 a 17:23
    W la Ferari effetrenavenave!
    il computer è un somaro veloce! (neanche tanto ndr)

  2. #2
    Utente di HTML.it L'avatar di supermac
    Registrato dal
    Jun 2001
    Messaggi
    1,411
    Risolto, trovata questa semplice classe da applicare al div contenitore
    .shadowedbox{
    overflow-x:scroll;
    background-image:
    /* Shadows */
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),

    /* Shadow covers */
    linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
    linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));

    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
    }
    W la Ferari effetrenavenave!
    il computer è un somaro veloce! (neanche tanto ndr)

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,046
    Risolto,
    Bene

    PS ho visto ora il titolo che avevo messo... overscroll LOL
    Ho corretto.
    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.