Oggi vi propongo un post basato sul precedente "ereditarietà dei CSS". La soluzione è piuttosto banale, ma spesso capita che uno non ci pensi. I vostri css menu saranno stra contenti, pronti ad arricchirsi di nuovi effetti rollover.

I principi base sui cui basarsi sono due: l’ereditarietà e lo stato dei link. Sappiamo benissimo infatti che i link sono l’unico elemento nel CSS standard che sono dotati di una definizione in base al loro stato. In particolare lo stato hover che definisce quando il vostro mouse è sopra (gli altri stati sono link, visited, active [...] che in realtà sono pseudo classi).

Leggi tutto…

Molto tempo fa avevo già presentato un menù fatto in javascript e css, sfruttando la possibilità di interagire tramite javascript con il DOM dei CSS e dell’HTML.

Il sistema si basava sul sotto oggetto style di un oggetto HTML, modificando gli attributi dei sotto elementi: colore, bordo, altezza…

Sappiamo tutti però che la potenza dei CSS è proprio quello di staccare la struttura HTML dalla definizione degli stili, e di gestire gli stili in modo centralizzato. Se noi andiamo a ridefinire delle proprietà di visualizzazione nella pagina via JS, andiamo a spu**anare tutto quello per cui abbiamo progettato il sito in CSS.

Avremo bisogno di un metodo per gestire il cambio della classe di un oggetto, tramite Javascript. Questa non è altro che una proprietà degli oggetti HTML, chiamata className.

Usarla è davvero banale:

document.getElementById("mioOggetto").className = "bordazzurrogrosso"

Come avete sicuramente capito abbiamo assegnato all’oggetto mioOggetto al classe bordazzurrogrosso. Se vogliamo spingerci un po’ oltre possiamo anche fare un effetto tipo questo:

<script type="text/javascript">
function divOn(o){
o.className = "classeDelDivOn";
}
function divOff(o){
o.className = "classeDelDivOff";
}
</script>
<div id="mioDiv" onmouseover="divOn(this);" onmouseout="divOff(this);">...</div>

Ora tocca a voi giocare… intanto grazie a techpatterns.

Grunge definisce uno particolare stile musicale. Qualcuno sostiene che inizialmente indicasse i gruppi di Seattle. Qualcun’altro sostiente che si tratti di musica senza uno stile definito, caotica. Il termine stesso significa sudicio disordinato.

Quanto si dice Grunge, si pensa ai Nirvana. Volete disegnare Grunge… piazzatevi un bel CD di Kurt e compagni e iniziamo il nostro piccolo viaggio alla scoperta di questo nuovo stile. Le keyword sono: casino, confusione, tristezza, dark, impulso, urlo, …

Gli stili cambiano nel tempo, e anche il web subisce l’influenza dell’arte in generale e delle mode. Ci sono stati i periodi minimali, i periodi flashosi, i periodi 3d… in ultima il periodo web2.0, con tutti quei loghini riflessati, colori tenui etc… ora arriva il Grunge! Lentamente gli elementini ordinati che contraddistinguono il web2.0 stanno iniziando a sparire.

Arrivano nuovi elementi, più disordinati, più fatti a mano e meno regolari. Più sporchi, più rivolti all’utente e ai contenuti.

Dedica un completo articolo a questo neo-movimento smashinmagazine, che presenta esempi di grunge web design, grunge free font, grunge icon, texture e un bel po’ di tutorial a disposizione con quanti vogliano approcciare questo nuovo stile.

Come nella moda tradizionale esistono gli eccessi. Siti di riferimento che portano all’esasperazione le tendenze. Secondo me il buon web designer deve capire le esigenze del suo cliente, ma soprattutto deve capire le esigenze del target dei navigatori di quel cliente e deve riuscire al meglio a trasferire le proprie senzazioni, fatte di soul & study al cliente (uno dei momenti più difficili).

Anche i media tradizionali stanno cavalcando la nuova tendenza. Se qualcuno di voi in questi giorni ha visto il nuovo spot della Renault che presenta la prozione sulla Clio (mi pare fino a marzo) la parte iniziale è in pieno stile grunge: un po’ disordinato, in movimento, approssimativo, un po’ ruvido!

Io sono per gli stili puliti, per lo spazio alle informazioni e per l’ottimizzazione dell’usabilità… ma forse lo sono troppo. Dovrei puntare più sull’emozionalità dei siti. Forse sono troppo tecnico, troppo programmer e reprimo il mio soul!