come si ottiene questo effetto?

[Sandro M.]

salve sapete come si fa a riprodurre in css l'effetto della scritta porfolio in questo sito?
http://www.irishstu.com/portfolio/default.htm

[mexican]

rollover??? è un'immagine

[pierofix]

Mi ero soffermato anche io l'altro giorno sulla stessa pagina. Non riesco a capire come abbia raggiunto l'effetto (non ho qui FF per scorticare il codice) ma ho notato una stranezza: se selezionate il testo e fate tasto destro appare una tendina simile a quella che compare quando si svolge la stessa operazione sugli input text. :master:

[nuky]

L'immagine di sfondo viene spostata in modo da essere evidenziata solo sul passaggio del mouse.

[nuky]

Vedete qui:
http://www.irishstu.com/img/Mportfolio.gif

[keratox]

<div id="topmenu">
	<ul>
		<li id="mi1">Home
		<li id="mi2">About

		<li id="mi3">Services
		<li id="mi4">Portfolio
		<li id="mi5">Blog
		<li id="mi6">Contact
		<li id="mi7">Colophon
	[/list]

	
	[img]../img/version3.gif[/img]
	
</div>

e i css

#topmenu { background-image: url(../img/topmenuBG.gif); height:35px; padding:0 0 0 10px; }
#topmenu ul { float:left;  list-style-type:none; }
#topmenu ul li { float:left; margin:0 14px 0 0; }
#topmenu ul li a { display:block; text-indent: -9000px; width:57px; height:35px; text-decoration:none; }

#topmenu #mi1 a { background: url(../img/Mhome.gif) no-repeat; width:57px; }
#topmenu #mi2 a { background: url(../img/Mabout.gif) no-repeat; width:57px; }
#topmenu #mi3 a { background: url(../img/Mservices.gif) no-repeat; width:69px; }
#topmenu #mi4 a { background: url(../img/Mportfolio.gif) no-repeat; width:73px; }
#topmenu #mi5 a { background: url(../img/Mblog.gif) no-repeat; width:48px; }
#topmenu #mi6 a { background: url(../img/Mcontact.gif) no-repeat; width:68px; }
#topmenu #mi7 a { background: url(../img/Mcolophon.gif) no-repeat; width:75px; }

#topmenu #mi1 a:HOVER, #topmenu #mi2 a:HOVER, #topmenu #mi3 a:HOVER, #topmenu #mi4 a:HOVER, #topmenu #mi5 a:HOVER, #topmenu #mi6 a:HOVER, #topmenu #mi7 a:HOVER { background-position:0 -35px; }
#topmenu #mi1 a.on, #topmenu #mi2 a.on, #topmenu #mi3 a.on, #topmenu #mi4 a.on, #topmenu #mi5 a.on, #topmenu #mi6 a.on, #topmenu #mi7 a.on { background-position:0 -35px;   }

Vi invito a guardare le immagini

http://www.irishstu.com/img/Mhome.gif

E' la stessa immagine: il rollover si ha perchè si cambia la posizione dello sfondo ( background-position:0 -35px



Ciauuu

[Sandro M.]

no veramente intendevo il titolo della pagina non la voce nel menù (anche se l'effetto rollover tramite css è uno spettacolo) cmq ho visto che si ottiene tramite un sistema chiamato sifr
http://pro.html.it/articoli/id_584/idcat_31/pro.html