domenica 27 Settembre 2020

Download in corso

Softwareone.it

07-01-2019

CSS3 WebKit Un’alternativa a Javascript

WebKit è un motore di rendering per browser web utilizzato per il rendering delle pagine web.

Originariamente sviluppato da Apple, nel 2005 è stato reso open source.

Pubblicità

Esso viene utilizzato oggi da vari browser come Safari , Google Chrome e Firefox.

WebKit è un progetto che nasce dalla combinazione di componenti del sistema grafico KDE e di tecnologie Apple.

Ha introdurre i concetti come transizione , trasformazione ed animazione nell’ambito dei CSS è stata Apple in particolare il team di sviluppo che lavora sul progetto WebKit .

WebKit è stato creato per dare un’alternativa a Javascript ma sopratutto a Flash per quanto riguarda i sistemi mobili in quanto ne sono state aggiunte sopratutto le animazioni anche tra i moduli W3C CSS3, si tratta infatti di qualcosa di più complesso e avanzato rispetto alle transizioni perché entra in gioco l’idea di animazione sviluppata su una sorta di timeline a partire da una serie di keyframe.

Tutte le animazioni WebKit funzionano solo su Browser che utilizzano questa tecnologia: a parer mio la maggior parte dei browser si adeguerà a WebKit.

Ma vediamo alcune delle proprietà di WebKit.

Con CSS3, siamo in grado di aggiungere un effetto quando si passa da uno stile all’altro, senza l’utilizzo di animazioni Flash o javascript.

CSS3
-moz-transform: rotate(360deg) /*firefox*/
-webkit-transform: rotate(360deg) /*safari*/
-o-transform: rotate(360deg)/*opera*/
transform: rotate(360deg) /*standard*/ 

CSS3 transizioni sono effetti che consentono di passare gradualmente da uno stile all’altro per fare questo è necessario specificare due cose : Specificare la proprietà che si desidera usare per l’effetto desiderao e specificare la durata dell’efetto.

div {
        transition: width 2s;
        -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

Nota: se non si specifica la durata, la transizione non avrà alcun effetto.

Alcune proprietà di transizione CSS3

ProprietàDescrizione
transitionScorciatoia per settare le quattro proprietà di transizione in una singola proprietà
transition-propertySpecifica il nome della proprietà CSS a cui viene applicata la transizione
transition-durationDefinisce il periodo di tempo che una transizione prende. default 0
transition-timing-functionDescrive come sarà calcolata la velocità durante la transizione. Predefinito “facilità”

I commenti sono chiusi.

Pubblicità