Non posso non condividere con voi questo bellissimo slideshow realizzato con jQuery.
E poi, non posso non condividere con voi pure questo esempio di utilizzo di CSS3 per realizzare il logo di Opera. (via italianwebdesign)
http://desandro.com/articles/opera-logo-css/
Buon lavoro!
In questo periodo sto lavorando molto con CSS3, colpa del porting is un sito in versione iPhone.
Se avrò tempo scriverò un articolo riguardante le animazioni fatte con webkit. Dato invece il poco tempo, adesso, vi lascio un link di Web Designer Wall che mostra alcuni esempi realizzati con le nuove regole di CSS3.
Buona lettura e buona sperimentazione!
Creare un sito progettato per iPhone non è così complesso come molti credono, basta creare un’interfaccia adeguata e stare dietro ad alcune linee guida. Diciamo che un buon Web Designer non troverà molte difficoltà.
Ma creare un’applicazione Web per iPhone invece può diventare un lavoro veramente duro. Ricreare i bottoni, le navigation e tutte quelle parti dell’interfaccia che hanno reso famoso iPhone, non è semplice, per niente.
Voi vi chiederete, ma non si devono mica creare per forza?, certo, è vero.. ma Apple ha speso anni di sviluppo e ricerca per creare un’interfaccia funzionante e veramente ottima, perchè allora doverne creare un’altra in tempi sicuramente stretti e sapere che il risultato non sarà comunque ottimo? (perchè si, per chi non lo sapesse, creare una UI che funziona non è così semplice e veloce..).
Per fortuna ci viene incontro JQTouch, un framework basato su JQuery che promette di ricreare tutta l’interfaccia di iPhone.
Include la possiblità di far creare l’icona sulla Springboard di iPhone e pure di avviare l’applicazione in modalità FullScreen.
Buon lavoro quindi!
Uno dei problemi che troviamo quando andiamo ad utilizzare degli elementi in Float è quello di avere successivamente il contenitore senza altezza predefinita e quindi avere un layout semi-spaccato.
Un esempio classico è un box con sfondo e al suo interno due elementi in float. Il box risulterà alto pochi pixel invece di racchiudere gli elementi al suo interno.
Per ovviare a questo problema una tecnica era quella di usare un <div>, o uno <span> o addirittura un <br /> con una classe che conteneva la regola:
clear: both;
Il risultato era ottimo, ma diciamoci la verità, il markup lo rovinava e ci trovavamo degli elementi in più che proprio ci stavano male.
Adesso (anche se in verità, da un bel po’) si può usare solo una classe CSS da assegnare al contenitore, che contenga queste regole:
.clear:after {
clear : both;
display : block;
content : “.”;
height : 0;
visibility : hidden;
}
.clear {display:inline-block;}
.clear {display:block;}
* html .clear {height: 1%;}
Ma che cosa fa?
Seplicemente indicano di aggiungere un carattere ‘.’ (il punto) alla fine dell’elemento, con altezza 0 pixel poi lo nasconde e cancella il float (clear: both).
Crea quindi via CSS quell’elemento in più che tanto dava noia prima al markup.
Le altre regole sono dei fix per i browser poco compatibili.
Di seguito un’esempio dell’html:
<div style=”background: #ccc” class=”clear”>
<div style=”float: left; padding: 5px”>
Sinistra
</div>
<div style=”float: right; padding: 5px”>
Destra
</div>
</div>
Stamani ho fatto un salto su un’articolo di Italian Web Design che parlava di testi con gradiente in css.
Questa tecnica fa uso di PNG, ma cosa succede con IE6 e IE5.5? Questo browser non supporta le PNG a 24bit trasparenti.
Mi sono ricordato però che io solitamente utilizzo un metodo per le png su IE che fa uso di un file .htc, e perchè non usare questa tecnica per rendere compatibile il tutto conIE 6 e 5.5?
Il risultato potete vederlo qui e adesso due parole su come realizzarlo.
I file necessari per la buona riuscita sono:
A questo punto il gioco è quasi fatto. Una volta installato tutto nelle rispettive directory andiamo a creare un file Javascript dove inseriamo una funzione per far attivare il fix per IE:
function addPNGRule() {
if (document.all && document.styleSheets && document.styleSheets[0] &&
document.styleSheets[0].addRule) {
document.styleSheets[0].addRule('.png', 'behavior: url(c/iepngfix.htc)');
}
}
Cosa fa questo funzione? Semplice, aggiunge una regola globale al CSS dove, in caso esista la classe .png gli applica un behavior, in questo caso il fix delle png. Ovviamente lo fa solo per IE.
Poi con mootools (io uso mootools, ma poi siete liberi di usare ciò che volete) avvio la funzione alla fine del caricamento della pagina:
// Initialization Function
function init() { addPNGRule(); }
// Set DOMReady Events
window.addEvent('domready', init);
Questo per quanto riguarda il fix PNG, il codice invece del gradient è molto simile a quello originale, tranne l’applicazione della classe .png al tag span:
<h1 class="gradient"><span class="png">This is a PNG test</span></h1>
Et voilà! Il tutto funziona con i seguenti browser:
Safari 2
Safari 3
IE 5.5
IE 6
IE 7
Firefox
Opera 9