Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2005
    Messaggi
    282

    come fare un box con ombra?

    vorrei realizzare un box centrato con ombra che dia l'effetto di una immagine sollevata rispetto allo sfondo. vorrei provare a realizzarla in due modi:
    1) sfondo bianco, box centrato con una sottile cornice nera, ombra in basso e a destra sfumata;
    2) sfondo grigio, box centrato bianco con una sottile cornice nera, ombra netta (dovrebbe, nelle mie intenzioni, dare l'effetto di un foglio di carta bianco poggiato su un tavolo grigio...).
    Vorrei realizzare, se possibile, il tutto con i CSS, ma non sono molto pratica. Per il momento leggendo un pò sono riuscita a realizzare solo il box centrale...

    body,html { height:100%;
    margin:0 }
    #box {width:400px;
    height:500px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -175px;
    background-color: #f3df9d;
    }

    mi date una mano?
    grazie

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    i css supportati dai vari browser non consentono ancora di creare box con un'ombra:

    sei costretta ad utilizzare uno o più sfondi trasparenti in formato png (il formato gif non ti consente di creare un ombra sfumata ma ti darebbe un ombra netta) che simulino l'ombra

    puoi pensare di usare un unico sfondo se il box ha dimensioni prefissate, oppure due (parte centrale più terminale) se il box deve espandersi in base al contenuto.

    sul formato png ci sono molte discussioni in questo forum su come poterlo usare anche su IE.
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2005
    Messaggi
    282
    pensavo fosse più semplice...
    il box con la cornice nera è facile da realizzare, e per l'ombra pensavo a qualcosa come nel "layout a due colonne con float e background" nella guida ai CSS. per intenderci, quella specie di ombra grigia che separa la zona bianca da quella celeste, e che incorniciava solo due lati del box.
    credevo in passato di aver visto qualcosa del genere realizzato con i CSS, ma forse mi sono sbagliata.
    grazie cmq

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 © 2025 vBulletin Solutions, Inc. All rights reserved.