Forum di Libera Discussione. Il Luogo di Chi è in Viaggio e di Chi sta Cercando. Attualità, politica, filosofia, psicologia, sentimenti, cultura, cucina, bellezza, satira, svago, nuove amicizie e molto altro

Per scoprire le iniziative in corso nel forum scorri lo scroll


Babel's Land : International Forum in English language Fake Collettivo : nato da un audace esperimento di procreazione virtuale ad uso di tutti gli utenti Gruppo di Lettura - ideato e gestito da Miss. Stanislavskij La Selva Oscura : sezione riservata a chi ha smarrito la retta via virtuale Lo Specchio di Cristallo : una sezione protetta per parlare di te La Taverna dell'Eco: chat libera accessibile agli utenti della Valle

Non sei connesso Connettiti o registrati

 

Tabelle a più colonne con immagine sfondo, scroll e marquee

Condividi 

Vedere l'argomento precedente Vedere l'argomento seguente Andare in basso  Messaggio [Pagina 1 di 1]

1
NinfaEco
avatar
Viandante Ad Honorem
Viandante Ad Honorem
Queste due le ho fatte saltando la gradualità di difficoltà che volevo mantenere nel postare ( da tabelle base a più complesse).
Se notate sparisce la voce bgcolor e c'è background-image:url('----'). Infatti lo sfondo della tabella è un'immagine. Quindi background-image sostituisce bg color nella prima stringa di codice, mentre nelle altre devi solo rimuovere bgcolor.
È importante fare la tabella grande come l'immagine o non viene bene. Un altro effetto che altrove non c'è  una piccola ombra ne testo ( se no si vedeva male): text-shadow. Il marquee si ferma al passaggio del mouse.
Il bordo delle celle l'ho fatto sparire ( border:0px solid) e ho messo l'ombra (box-shadow) in modo da far sembrare l'immagine frammentata in porzioni in rilievo. Poi ci sono bordi arrotondati ( border-radius) e l'ombra su tutta la tabella.
Infine con FastStone Photo Resizer ho applicato una watermark in basso a sinistra ( nome del forum).
La cosa assurda è che mi diverto  

Tabella Gatto
dedicata a Pisellino
 













testo e immagine


testo e immagine  


testo e immagine



testo e immagine



Codice:

<table style="background-image:url('http://i55.servimg.com/u/f55/16/68/87/84/marchi11.jpg');border:0px solid #414d44; border-radius: 12px; width: 500px;box-shadow: 7px 7px 10px 4px #1f2721; margin-left:auto;margin-right:auto; text-align:center; font-family:Comic Sans Ms;font-size: 22px;color: #807027"; cellpadding="5" cellspacing="5" width="500" height="281">  
<tr>
<td colspan="4" style="border:0px solid #414d44; border-radius:8px;box-shadow: 5px 5px 8px 3px #1f2721; height="120" width "120">
<marquee direction="left" scrollAmount="2" scrolldelay="2" height="80" width="400" onmouseover="this.stop()"onmouseout="this.start()"><font style="text-shadow: 2px 2px 2px #000100">testo e immagine</font> </br>
</td> </br>
</marquee>
</td>
<tr>
<td style="font-family:Comic Sans Ms;font-size: 16px;color: #566029;border:0px solid #414d44; border-radius:8px;box-shadow: 5px 5px 8px 3px #1f2721";height="120" width "100"><marquee direction="up" scrollAmount="1" scrolldelay="1" height="100" width="90" onmouseover="this.stop()"onmouseout="this.start()">
<font style="text-shadow: 1px 1px 2px #040b01">testo e immagine</font>   </marquee>
</td>
<td style="font-family:Comic Sans Ms;font-size: 16px;color: #605729;border:0px solid #414d44; border-radius:8px;box-shadow: 5px 5px 8px 3px #1f2721"; height="120" width "160"><marquee direction="up" scrollAmount="1" scrolldelay="1" height="100" width="90" onmouseover="this.stop()"onmouseout="this.start()">
<font style="text-shadow: 1px 1px 2px #040b01">testo e immagine</font></marquee>
</td>
</td>
<td style="font-family:Comic Sans Ms;font-size: 16px;color: #6a4f25;border:0px solid #414d44; border-radius:8px;box-shadow: 5px 5px 8px 3px#1f2721"; height="120" width "130">
<marquee direction="up" scrollAmount="1" scrolldelay="1" height="100" width="90" onmouseover="this.stop()"onmouseout="this.start()">
<font style="text-shadow: 1px 1px 2px #040b01">testo e immagine</font> </marquee>
</td>
</td>
</tr>
</table>

Tab winter
( l'inglese fa figo  SGHIGNAZZARE )
 









testo e immagine

testo e immagine

testo e immagine

testo e immagine  


testo e immagine



Codice:

<table style="background-image:url('http://i55.servimg.com/u/f55/16/68/87/84/giant_10.jpg');border:0px solid #414d44; border-radius: 12px; width: 500px;box-shadow: 7px 7px 10px 4px #142f34; margin-left:auto;margin-right:auto; text-align:center; font-family:Comic Sans Ms;font-size: 24px;color: #fbfdfe"; cellpadding="5" cellspacing="5" width="500" height="331">  
<tr>
<td colspan="4" style="border:0px solid; border-radius:8px;box-shadow: 5px 5px 8px 3px #184a53"; height="60" width "120"><font style="text-shadow: 1px 1px 5px #09222b">testo e immagine</font>
</td>
<tr>
<td style="font-family:Comic Sans Ms;font-size: 18px;color:#fbfdfe; border:0px solid #414d44; border-radius:8px; box-shadow: 5px 5px 8px 3px #184a53; width:120px; height: 180px"> <div style="width:120px; height: 180px;text-align: center; overflow-y: scroll">
<font style="text-shadow: 1px 1px 5px #09222b">testo e immagine</font> </div>
</td>
<td style="font-family:Comic Sans Ms;font-size: 18px;color:#fbfdfe;border:0px solid #414d44; border-radius:8px;box-shadow: 5px 5px 8px 3px #184a53; width:120px; height: 180px"> <div style="width:120px; height: 180px;text-align: center; overflow-y: scroll"><font style="text-shadow: 1px 1px 3px #09222b">testo e immagine</font>
</div>
</td>
<td style="font-family:Comic Sans Ms;font-size: 18px;color:#fbfdfe; border:0px solid #414d44; border-radius:8px; box-shadow: 5px 5px 8px 3px #184a53; width:120px; height: 180px"> <div style="width:120px; height: 180px;text-align: center; overflow-y: scroll"><font style="text-shadow: 1px 1px 3px #09222b">testo e immagine</font>  </div>
</td>
<td style="font-family:Comic Sans Ms;font-size: 18px;color:#fbfdfe; border:0px solid #414d44; border-radius:8px; box-shadow: 5px 5px 8px 3px #184a53; width:120px; height: 180px"> <div style="width:120px; height: 180px;text-align: center; overflow-y: scroll">
<font style="text-shadow: 1px 1px 3px #09222b">testo e immagine</font> </div>
</td>
</td>


</tr>
</table>

Visualizza il profilo dell'utente

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto  Messaggio [Pagina 1 di 1]

Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum