Ecco a voi un WebTool veramente eccezionale Yaml Builder.
Infatti il seguente tool permette di costruire un intero layout in maniera grafica (drag & drop) , non solo grazie a Yaml avrete un layout costruito interamente con div e stile associati senza l’ausilio quindi di tabelle
Voglio segnalare un’interessante iniziativa per tutti coloro che non amano disegnare e tagliare template.
il portale in questione permette di creare e modificare ed in fine scaricare interi template in stile web 2
Dopo la semplice guida ad ajax, questa volta tocca a Fx.Style, una classe del Framework mootools che permette di animare gli oggetti dom tramite css.
Fare effetti con questa tecnica è molto semplice ad esempio per fare un spostamento da destra a sinistra si procede come segue:
1: var effectchange = new Fx.Style(‘examplex’, ‘left’, {duration:500});
2: effectchange.start(10, 100);
Che sta a significare, prendi l’elemento con id uguale a examplex e modifica il parametro left da 10 a 100 e la transazione durera 500 ms, questo causerà uno spostamento, clicca qui per visualizzare lo spostamento
Come vedete lo spostamento è molto fluido.
Al posto di left è possibile utilizzare anche un altro attributo.
Come opzioni possono essere passate anche altre cose ecco un semplice esempio con le opzioni più utili:
1: var effectchange = new Fx.Style(‘examplex’, ‘left’, {
2: duration:500,
3: onComplete: function(){
4: alert(‘Animazione terminata’);
5: },
6: onStart: function(){
7: alert(‘Animazione iniziata’);
8: }
9: });
10: effectchange.start(0, 100);
In questo post vedremo come simulare il menù di windows.com utilizzando le tre immagini ottenute con il precedente tutorial (nav.gif, selected.gif, hover.gif), questo è il risultato finale.
Continua a leggere »
Si chiama Blueprint non è il primo e non sarà l’ultimo ma sicuramente è uno dei più acclamati frameworks CSS.
Ideato da Olav Bjorkoy, cerca di porre rimedio alla complessità di YUI (il framework di Yahoo!).
Ancora non ho avuto modo di provarlo ma dagli esempi sembra promettere bene:
e in fine un bel tutorial veloce.
Fonte [html.it]
Adesso useremo le immagini realizzate nel precedente tutorial per simulare gli effetti del menù di navigazione, questo è il risultato finale:Demo: Mac style menu
Continua a leggere »