Ciao a tutti,
avrei bisogno di un aiuto con il parametro box-shadow. Non capisco come posso ottenere l'ombra radiale solo sulla parte centrale del box e non sui lati. Per intenderci, vorrei ottenere l'effetto presente sotto le foto su questo sito http://www.apollosuites.it/
Grazie!
usa una immagine
come hanno fatto in quel sito
Socmel grazie, ma in realtà volevo sapere se è possibile riprodurre quell'effetto in css
Potresti ottenerlo con la proprietà radial-gradient di background-image, ma il supporto dei browser non è dei migliori. Consiglio anch'io l'immagine.
CODENCODE \ Branding \ Design \ Marketing
www.codencode.it
Quello che farei io:
- creo un elemento dopo l'immagine.
- voglio che stia sotto l'immagine e abbia la larghezza dell'immagine
- border-radius al 100%, un ovale.
- box-shadow (non sono sicuro funzioni bene con il radius, ma dovrebbe)
- gioco con altezza e margine per avere un aspetto simile
Utilizzare un markup del genere aiuterebbe:
<div>
<img />
<div></div>
</div>
Se ho tempo provo a realizzarlo.
#simo22 dover inserire un elemento vuoto per fini estetici mi sembra troppo e poi dovrebbe giocare con position e z-index appesantendo markup e css
e tutto senza poter avere compatibilità con i browser meno recenti
la soluzione di codencode sarebbe stata la più elegante e ragionevole se avesse avuto un buon supporto
Grazie ragazzi,
alla fine ho risolto con un immagine
Non vedo che problema ci sia, e comunque basterebbe anche usare uno pseudo elemento. Non deve necessariamente giocare con z-index.Originariamente inviato da ac_socmel
#simo22 dover inserire un elemento vuoto per fini estetici mi sembra troppo e poi dovrebbe giocare con position e z-index appesantendo markup e css
e tutto senza poter avere compatibilità con i browser meno recenti
la soluzione di codencode sarebbe stata la più elegante e ragionevole se avesse avuto un buon supporto
In realtà non sarebbe compatibile solo con le prime versioni di IE.
In oltre, non appesantisce il css di molto e risparmi il download di un'immagine, cioè un sito più veloce.
Permessi di invio
Rispondi quotando