L’ effetto rollover su un’ immagine o su un testo è l’ effetto che vi permette di cambiarne l’ aspetto al passaggio del mouse.
Il testo può cambiare colore e formattazione, mentre l’ immagine può essere sostituita da un’ altra, simile o completamente diversa.
E’ una delle prime tecniche che si imparano quando si iniziano a studiare i css. Vediamo come fare. Nel mio caso ho un’ icona dei feed rss che vorrei si illuminasse al passaggio del mouse.
Questa è la mia icona rss-icon.png
La schiarisco un pò con Photoshop e ottengo rss-icon-hover.png
inserisco nel template il link ai miei feed in questo modo:
E’ un semplice link come vedete e per poterlo personalizzare e inserire l’ immagine ho aggiunto il tag class=”rss-icon”.
Ora apriamo il nostro foglio di stile e aggiungiamo
.rss-icon {
background-image:url(images/rss-icon.png);
height:29px;
width:29px;
display:block;
}
.rss-icon:hover {
background-image:url(images/rss-icon-hover.png);
height:29px;
width:29px;
display:block;
}
I parametri height e width sono l’ altezza e la larghezza della nostra immagine. Come vedete non c’è nulla di complicato, infatti abbiamo già finito!
Css Menus è un fantastico sito che mette a disposizione quasi 40 esempi di menu in css, tutti pronti per essere scaricati gratis. Tutti i menù sono suddivisi per categorie: menù semplici, dropdown, dropline e flyout.
Sono tutti disponibili in anteprima, compatibili con la maggior parte dei browser e ottimizzati per i motori di ricerca!
Se avete delle belle immagini da inserire nei post, è anche bello inserirle con un effetto tipicamente Web 2.0 come quello dropshadow, ovvero l’ ombra che vedete sui lati inferiore e destro di tutte le immagini di questo blog. Ottenere questo effetto è davvero molto semplice. Tutto quello di cui c’è bisogno è qualche riga di css e l’ immagine ombra.
Scaricate questa immagine: ombra e sistematela nella cartella image del vostro tema.
Poi aprite il file style.css del vostro tema e aggiungete:
.entry img {
background: url(images/shadow.gif) no-repeat right bottom;
padding: 4px 10px 10px 4px;
border-top: #eee 1px solid;
border-left: #eee 1px solid;
}
Già fatto! Semplice e veloce questo trucchetto per aggiungere un bell’ effetto alle vostre immagini!
Chi si sta avvicinando ora al mondo dell’ html, css e javascript troverà in rete, in lingua italiana ed inglese un mare di risorse. Per tutti i gusti. Ma proprio in questo mare diventa, a volte, soprattutto per chi è alle prime armi, un’ impresa trovare un buona guida per iniziare.
In realtà iniziare da una buona guida è molto più importante di quanto si possa credere. Bisogna infatti avvicinarci gradualmente e imparare prima il necessario per uno studio via via più approfondito.
Tra tutti i tutorial trovati in giro mi sento di consigliare tre wikibooks, che potete consultare on line oppure scaricare in formato pdf:
A partire dalla versione 2.5 WordPress integra i gravatar.
Per chi non sapesse cos’è un gravatar: Gravatar.com. Registrandovi al sito e inserendo il vostro avatar, la vostra immagine verrà associata all’ indirizzo email con cui vi registrate e vi seguirà ovunque la funziona gravatar sia supportata.
Belli gli avatar per dare un volto o un’ immagine ai commentatori di un blog ad esempio.
Per aggiungere i gravatar al vostro tema basta aggiungere questa riga di codice in comments.php:
ovviamente laddove volete visualizzare l’ avatar, in genere prima del nome del commentatore, ovvero prima di
Il numero “50″ sta ad indicare la dimensione in pixel dell’ immagine che potete modificare a seconda delle esigenze.
Poi visto che ci siamo diamo un tocco in più ai nostri commenti, aggiungendo non solo l’ avatar ma anche un simpativo effetto mousehover: l’ opacità. L’ avatar sarà opaco ma si schiarirà al passaggio del mouse.
Per ottenere questo effetto, che raramente “stona”, basta aggiungere nel file style.css il seguente codice:
/*stile per gravatar*/
img.avatar {float:left; margin-right:5px; border:solid; border-color:#fff;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
-moz-opacity: 0.4;}
img.avatar:hover {float:left; margin-right:5px; border:solid; border-color:#fff;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;}
Abbiamo così aggiunto un bordino bianco alle nostre immagini e l’ effetto opacità!
Un elenco delle ultime risorse gratuite per webmaster:
- LoadInfo: genera caricatori per effetti ajax e javascript
- MiniAjax: un bel pò di effetti in Ajax pronti da scaricare, alcuni molto belli per le immagini
- CleanCss: un aiuto per ottimizzare il codice css
- Css Creator: un generatore di layout in css, molto utile per creare in maniera semplice e corretta la struttura generale del vostro sito
- CssFly: qui si possono creare on line codici x(html) e css
- Layout-o-matic: un tool per creare automaticamente la struttura del layout
- ActionScript.org: una collezione di 700 script
- AsFusion: Blog su Flash (in inglese)
- Flashtica.com: script in flash open source e molte altre risorse
- FlashVillage: template in flash gratuiti, i template sono molto belli per essere gratuiti, occorre solo registrarsi
- Html Playground: spiega velocemente a cosa servono tutti i tag html ordinati in ordine alfabetico con tanto di esempio
- AnyBrowser: per testare il proprio sito in più browser comtemporaneamente
Tutti o molti sanno come centrare un div nel body di una pagina. E per chi non lo sa è facile cercare e arrivare alla soluzione:
Basta inserire nel tag body: text-align=center; in questo modo:
<body style="text-align=center;">
e nel div:
#tuodiv {
margin: 0 auto 0 auto;
}
Un pò più complicato è centrare un div usando l’ attributo position:absolute;
La soluzione che ho trovato dopo molte ricerche:
#div_da_centrare{
position:absolute;
width:900px;
height:810px;
left:50%;
margin: 0 0 0 -450px;
}
cioè dando un margine left del 50% e impostando l’ altro margine all’ opposto della metà dell’ intera lunghezza del div.
Un hosting che davvero consiglio:
Sondaggio
Loading ...