Sfondo sfumato

Se stai imparando a costruirti il tuo template qui trovi consigli e risposte ai tuoi dubbi sull'HTML

Moderatori: Moderatori iobloggo, Moderatori HTML & Grafica

Sfondo sfumato

Messaggioda Lucretia » 8 ottobre 2004, 13:18

c'è qualcuno che sa dirmi come fare ad avere lo sfondo di una pagina sfumato?

come in questa pagina, per capirci:

http://www.thedside.it/

ho provato a sbirciare nel codice della pagina, ma non ho trovato nulla di significativo...

:)
Immagine. pretend to love my imperfection at least for a minute .

// . reflection .
// . readthefuckingmanual . guida . faq . search
Avatar utente
Lucretia
Admin
Admin
 
Messaggi: 5121
Iscritto il: 15 marzo 2004, 16:45
Località: home is where the heart is

Messaggioda Mac » 8 ottobre 2004, 13:19

usando un'immagine sfumata come sfondo:
http://www.thedside.it/grafica/dx.jpg
Mac
amministratore
amministratore
 
Messaggi: 2094
Iscritto il: 3 marzo 2004, 14:30
Località: Lugano (Svizzera)
Indirizzo blog: http://www.iobloggo.com

Messaggioda Lucretia » 8 ottobre 2004, 13:21

ottimo.

rubo l'idea *immediatamente*!

:P
Immagine. pretend to love my imperfection at least for a minute .

// . reflection .
// . readthefuckingmanual . guida . faq . search
Avatar utente
Lucretia
Admin
Admin
 
Messaggi: 5121
Iscritto il: 15 marzo 2004, 16:45
Località: home is where the heart is

Messaggioda Mac » 8 ottobre 2004, 13:25

devi fare l'immagine abbastanza grande (600-800 pixel), ma per farla ripetere solo in orizzontale loro l'hanno inserita come sfondo di una tabella, come sfondo della pagina devi usare il colore più in basso della sfumatura

spero sia abbastanza chiaro :)
Mac
amministratore
amministratore
 
Messaggi: 2094
Iscritto il: 3 marzo 2004, 14:30
Località: Lugano (Svizzera)
Indirizzo blog: http://www.iobloggo.com

Messaggioda AngelCage » 8 ottobre 2004, 15:11

oh che idea geniale *.* basta mettere di ripetere l'immagine no?Xò qualcuno sa cm si fa a far ripetere l'immagine in orizzontale invece che in verticale?Oppure funziona sempre il solito codice?
AngelCage
abituale
abituale
 
Messaggi: 72
Iscritto il: 1 ottobre 2004, 10:08
Località: MyHome

Messaggioda lozioric » 8 ottobre 2004, 15:57

AngelCage ha scritto:oh che idea geniale *.* basta mettere di ripetere l'immagine no?Xò qualcuno sa cm si fa a far ripetere l'immagine in orizzontale invece che in verticale?Oppure funziona sempre il solito codice?


Allora: nel caso in questione, l'immagine va ripetuta solo in orizzontale, altrimenti alla fine della sfumatura in viola ricomincia di colpo il nero e ciò non è bello.

Si fa così:
Codice: Seleziona tutto
<style type="text/css">
body { background: #xxxxxx url(http://miosito/immagine.jpg) repeat-x; }
</style>


dove #xxxxxx è il colore di fondo (uguale al colore più in basso nell'immagine).
Il codice va messo all'interno del tag head, ad esempio appena prima di </head>.
Ovviamente se hai gli attributi bgcolor e background nel tag body devi toglierli.
Avatar utente
lozioric
dipendente
dipendente
 
Messaggi: 935
Iscritto il: 2 settembre 2004, 9:19

Messaggioda Lucretia » 8 ottobre 2004, 16:02

aspettavo proprio te, ric! :)

nel mio caso è un po' più complicato.

io infatti, come ricorderai, in alto ho l'header con lo sfondo nero. quindi dovrei far partire la parte sfumata da sotto l'header? e per farlo dovrei inglobare il tutto entro l'ennesima tabella?

o ci sono altre soluzioni che, nella mia ignoranza, appunto, ignoro?! :-)

Mac mi ha consigliato di fare così. tu che mi dici?

te la ricordi l'url del blog di prova?
Immagine. pretend to love my imperfection at least for a minute .

// . reflection .
// . readthefuckingmanual . guida . faq . search
Avatar utente
Lucretia
Admin
Admin
 
Messaggi: 5121
Iscritto il: 15 marzo 2004, 16:45
Località: home is where the heart is

Messaggioda lozioric » 8 ottobre 2004, 16:10

Lucretia ha scritto:aspettavo proprio te, ric! :)

nel mio caso è un po' più complicato.

io infatti, come ricorderai, in alto ho l'header con lo sfondo nero. quindi dovrei far partire la parte sfumata da sotto l'header? e per farlo dovrei inglobare il tutto entro l'ennesima tabella?

o ci sono altre soluzioni che, nella mia ignoranza, appunto, ignoro?! :-)

Mac mi ha consigliato di fare così. tu che mi dici?

te la ricordi l'url del blog di prova?


Io farei un div con l'header e uno che racchiuda tutto il resto. Lo sfondo sfumato lo assegnerei al secondo div. Ovviamente imposterei i margini di entrambi i div a zero.
Per essere precisini, entrambi i div dovrebbero avere larghezza pari a quella dell'immagine header.

Ora sono di corsa, ma se vuoi stasera impasto un po' di codice e te lo passo appena sfornato. ;)
Avatar utente
lozioric
dipendente
dipendente
 
Messaggi: 935
Iscritto il: 2 settembre 2004, 9:19

Messaggioda lozioric » 8 ottobre 2004, 16:16

Mi sono ricordato or ora che tu hai anche il problema di mettere i post parzialmente sovrapposti all'header.

La faccenda è leggermente più complicata, ma si può fare ugualmente. Basta fare DUE div "esterni" con due z-index diversi, così header e sfumatura restano sullo sfondo e il resto gli si spennella sopra con garbo. Viene più semplice ed elegante a farlo che a dirlo.
Stasera (notte :D ) faccio una prova e ti mando il risultato. Saluti alla contrada tutta. ;)
Avatar utente
lozioric
dipendente
dipendente
 
Messaggi: 935
Iscritto il: 2 settembre 2004, 9:19

Messaggioda Mac » 8 ottobre 2004, 21:15

lozioric ha scritto:
Codice: Seleziona tutto
<style type="text/css">
body { background: #xxxxxx url(http://miosito/immagine.jpg) repeat-x; }
</style>

era il repeat-x che non conoscevo, ora so qualcosa in più pure io, grazie :-)
Mac
amministratore
amministratore
 
Messaggi: 2094
Iscritto il: 3 marzo 2004, 14:30
Località: Lugano (Svizzera)
Indirizzo blog: http://www.iobloggo.com

Messaggioda Lucretia » 8 ottobre 2004, 23:24

lozioric ha scritto:Mi sono ricordato or ora che tu hai anche il problema di mettere i post parzialmente sovrapposti all'header.

La faccenda è leggermente più complicata, ma si può fare ugualmente. Basta fare DUE div "esterni" con due z-index diversi, così header e sfumatura restano sullo sfondo e il resto gli si spennella sopra con garbo. Viene più semplice ed elegante a farlo che a dirlo.
Stasera (notte :D ) faccio una prova e ti mando il risultato. Saluti alla contrada tutta. ;)


grazie mille, sei un tesoro!

il colore dovrebbe sfumare dal nero a #5B0A32 con il nero che comincia a schiarire abbastanza in alto, qualcosa tipo 3/4 cm sotto l'header, in modo che ci sia un po' di contrasto con lo sfondo dei post che rimane nero. insomma, molto simile alla pagina di dside che ho linkato sopra.

quando hai voglia e tempo. non c'è assolutamente fretta.

e poi, per favore, dimmi cos'è che mi blocca la colonnina di sinistra appiccicata alla sinistra dello schermo... non riesco a spostarla, la maledetta!

la Nobil Contrada del Bru'o ringrazia e ricambia i saluti!

:)
Immagine. pretend to love my imperfection at least for a minute .

// . reflection .
// . readthefuckingmanual . guida . faq . search
Avatar utente
Lucretia
Admin
Admin
 
Messaggi: 5121
Iscritto il: 15 marzo 2004, 16:45
Località: home is where the heart is

Messaggioda lozioric » 9 ottobre 2004, 14:11

Lucretia ha scritto:grazie mille, sei un tesoro!

il colore dovrebbe sfumare dal nero a #5B0A32 con il nero che comincia a schiarire abbastanza in alto, qualcosa tipo 3/4 cm sotto l'header, in modo che ci sia un po' di contrasto con lo sfondo dei post che rimane nero. insomma, molto simile alla pagina di dside che ho linkato sopra.

quando hai voglia e tempo. non c'è assolutamente fretta.

e poi, per favore, dimmi cos'è che mi blocca la colonnina di sinistra appiccicata alla sinistra dello schermo... non riesco a spostarla, la maledetta!

la Nobil Contrada del Bru'o ringrazia e ricambia i saluti!

:)


Meno male che non c'era fretta... perché sono abbastanza bloccato da un paio di casini che è meglio non specificare. Comunque sei in cima alla lista ;)

La colonnina, ehm, sarebbe tutto più semplice con i CSS... comunque alla peggio aggiungi una colonna larga qualche pixel e lasciala vuota. Metodo della nonna :P ma se funziona checcefrega...
Avatar utente
lozioric
dipendente
dipendente
 
Messaggi: 935
Iscritto il: 2 settembre 2004, 9:19

Messaggioda Lucretia » 9 ottobre 2004, 14:29

lozioric ha scritto:
Meno male che non c'era fretta... perché sono abbastanza bloccato da un paio di casini che è meglio non specificare. Comunque sei in cima alla lista ;)

La colonnina, ehm, sarebbe tutto più semplice con i CSS... comunque alla peggio aggiungi una colonna larga qualche pixel e lasciala vuota. Metodo della nonna :P ma se funziona checcefrega...


davvero, non preoccuparti! :)

pensavo che mi avresti ripresa con un "polpettone tecnico", ma pare di no. farò come dici tu allora...

/me adora i "metodi della nonna"! :P
Immagine. pretend to love my imperfection at least for a minute .

// . reflection .
// . readthefuckingmanual . guida . faq . search
Avatar utente
Lucretia
Admin
Admin
 
Messaggi: 5121
Iscritto il: 15 marzo 2004, 16:45
Località: home is where the heart is

Messaggioda AngelCage » 11 ottobre 2004, 10:54

Ooooohhh grazie a tutti nn so se ve l'hanno ancora detto ma siete ILLUMINANTI ^___^ <e nn montatevi troppo la testa ^_->
AngelCage
abituale
abituale
 
Messaggi: 72
Iscritto il: 1 ottobre 2004, 10:08
Località: MyHome

Messaggioda AngelCage » 11 ottobre 2004, 12:40

T.T xò a me non viene sfumata e non riesco a capire xchè >.<
AngelCage
abituale
abituale
 
Messaggi: 72
Iscritto il: 1 ottobre 2004, 10:08
Località: MyHome

Prossimo

Torna a HTML, CSS e Javascript

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite

cron