Il presente articolo è stato tradotto automaticamente.
Creazione di applicazioni HTML5
Effetti, transizioni e animazioni CSS3
Come Web developer, si hanno tre strumenti che si possono usare per prendere la vostra visione e renderlo realtà: HTML, CSS e JavaScript. Questo non era sempre il caso. In passato, apparentemente semplici effetti come ombre testo o gradienti espulso per separare i redattori di immagine invece di usando CSS e HTML. E anche se avete JavaScript, rendendo il fluido di applicazione Web e vivo di solito necessaria una considerevole quantità di codifica. Non solo ha fatto queste tecniche complicare la costruzione dell'applicazione inizialmente, ma eventuali piccoli cambiamenti erano costose.
Per fortuna, CSS3 e HTML5 eliminano la necessità per l'immagine e la ginnastica JavaScript del passato. È possibile costruire interazioni lisce e belle esperienze con semplice markup dichiarativo.
Ora, se siete come me, potrebbe avere appena ridacchiò un po'. Solo perché si tratta di HTML e CSS non significa che sia semplice. Ma come si vedrà, imparando alcune nuove proprietà CSS e provarli fuori in qualche demo cool, potrai risparmiare innumerevoli ore di sviluppo — per non parlare delle ore trascorse a negoziare la necessità di un particolare effetto con il tuo client.
Shadows
Let's start off facile e guardare alcuni effetti di ombreggiatura base. Per me, gli effetti sono tutti di alterare la percezione di un oggetto. Ad esempio, date un'occhiata al testo ombre shadow e box in Figura 1.
.jpg)
Figura 1 effetti di ombreggiatura
Questo effetto fornisce l'illusione di una sorgente di luce direzionale, colpendo un oggetto e l'oggetto a sua volta getta un'ombra sugli oggetti intorno ad esso. Questo aiuta a dare la percezione della profondità e alcuni potrebbero anche dire aiuta l'oggetto sembra galleggi.
Aggiunta di un'ombra non è difficile, quindi cerchiamo di aggiungere un'ombreggiatura testo in un'intestazione:
h1 {
text-shadow: black 2px 2px 12px 2px;
}
Qui ci sono le diverse proprietà text-shadow:
- Shadow colore (opzionale). È possibile specificare un colore con nome, o è possibile utilizzare le denominazioni di colore HSL o RGBA.
- Offset orizzontale (obbligatorio). Questo indica la posizione orizzontale dell'ombra. I valori positivi spostare l'ombra a destra dell'oggetto; i valori negativi si sposta a sinistra.
- Offset verticale (obbligatorio). Questo imposta la posizione verticale dell'ombra. I valori positivi spostare l'ombra sul fondo; i valori negativi e spostare verso l'alto.
- Raggio di sfocatura. Questo valore definisce come chiaro verrà visualizzato il testo di ombra. 0px è il tipo di carattere stesso; valori crescenti sempre più Sfoca bordo di un oggetto. Non sono consentiti valori negativi.
- Pubblicizza la distanza. Questo valore imposta la distanza dall'ombra — come forma dell'ombra si espande verso l'esterno (un valore positivo) o contratti interiormente (un valore negativo).
Casella ombre funzionano allo stesso modo come ombre testo e avere gli stessi parametri:
box-shadow: red 10px 10px 0px 0px;
Le ombre sono abbastanza comuni. Sono abituati su elementi come pulsanti per dare profondità e per offrire agli utenti un'idea dello scopo dell'elemento. Aiutare a scegliere l'utente al fatto un determinato oggetto è in qualche modo diverso da altri oggetti visibili nell'interfaccia utente. In passato, probabile si rivolse a Photoshop e creato png per rappresentare i pulsanti; ora si può fare nel markup. Naturalmente, appena sto graffiare la superficie qui. È possibile creare molti effetti più notevoli di regolazione opacità, border radius, gradienti, tipografia e così via.
Trasformazioni
La proprietà transform CSS consente di trasformare un dato elemento in termini di dimensioni o di spazio. Per dimostrare, Let's impostare un'immagine in modo che quando un utente si posiziona su di esso, l'immagine diventa due volte più grande:
#myImg:hover {
transform: scale(2);
}
Naturalmente questo è il CSS, il che significa che si ha realmente bisogno di includere eventuali prefissi fornitore applicabile. Io sarò ometterli per il resto di questo articolo, ma la trasformazione precedente dovrebbe hai guardato come questo:
#myImg:hover {
-ms-transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o- transform: scale(2);
transform: scale(2);
}
Inoltre ti consigliamo di approfittare del rilevamento caratteristica. Questo è in realtà una delle pratiche più importanti da implementare in siti Web oggi. Invece di basare il comportamento del sito su agenti utente, si dovrebbe sfruttare uno strumento come Modernizr (modernizr.com), che consente di chiedere il browser sulle sue capacità. Se il browser di un utente non supporta una particolare funzione, è necessario, è possibile utilizzare un polyfill — uno spessore che implementa la funzionalità per il browser. Questo è anche possibile per i CSS. Per ulteriori informazioni, consulta "nessun Browser lasciato alle spalle: Una strategia di adozione di HTML5"a msdn.microsoft.com/magazine/hh394148. Ora torna a trasformazioni.
Oltre alla scala, è anche possibile applicare trasformazioni su un piano 2D o 3D. Con 2D, si sta spostando un elemento lungo l'asse x e Y. Prendiamo qualche testo e ruotarlo di 45 gradi:
.transform2d {
transform: translate(0px, 0px)
rotate(45deg)
scale(1.45)
skew(0deg, 0deg);
}
Figura 2 viene visualizzata una finestra che è stata ruotata di 45 gradi.
.png)
Figura 2 trasformando un elemento nello spazio 2D
Ora 2D è grande, ma chiaramente 3D è la rabbia oggi — e, no, non vogliamo chiedere i nostri utenti a mettere su qualsiasi occhiali speciali, ma vogliamo che la gente a pensare a nostre scatole sono circa a venire fuori dallo schermo. Ecco alcuni codici per farlo:
.transform3d {
transform-origin-x: 50%;
transform-origin-y: 50%;
transform: perspective(110px) rotateY(45deg);
}
I risultati sono mostrati in Figura 3.
.png)
Figura 3 trasformazione 3D
Transizioni
Ora analizziamo le transizioni, che consentono di modificare un elemento da uno stile o dello stato a un altro. Comincerò con la pseudo classe hover. Storicamente abbiamo utilizzato CSS per impostare gli Stati di un elemento, ad esempio lo stato iniziale e lo stato dopo un evento. Gli elementi Button e anchor links sono due stati — lo stato iniziale e lo stato hover. Quando un utente attiva lo stato hover, ottenere impostare tali proprietà. Ecco un rapido esempio per librarsi sopra un pulsante:
#boxTrans:hover {
background-color: #808080;
color: white;
border-color: #4cff00;
border-width: 3px;
}
Roba standard e non c'è dubbio che hai fatto prima di questo. Browser di oggi sono così veloce che la transizione di stato è quasi istantanea. Che è grande da un punto di vista delle prestazioni, ma presenta un nuovo problema. In alcuni casi, tale cambiamento di stato potrebbe essere non ancora visibili o stridente. È possibile che l'utente non vedrà mai quel cambiamento rapido e sottile.
Con transizioni CSS3, puoi gestire il tempo che necessario per una transizione a verificarsi e controllare gli altri aspetti della transizione pure. Ad esempio, piuttosto che di un tasto solo automaticamente cambiando il colore di sfondo, è possibile ora specificare che cosa dovrebbe accadere durante la modifica.
Aggiungere un CSS transizione è facile — si aggiungono i comandi transitori per l'elemento di base. Ad esempio, creiamo una semplice scatola con qualche testo in esso. Quando un utente passa sopra quella scatola, dovrebbe cambiare il colore di sfondo, il testo e il bordo:
#boxTrans {
...
transition: all .5s linear;
...
}
#boxTrans:hover {
background-color: #808080;
color: red;
border-color: green;
}
Come potete vedere, ho definito la transizione dell'elemento #boxTrans. Ho scelto di tutte le proprietà di questo elemento di transizione, e li voglio tutti a transizione linearmente (cioè a velocità costante) nel corso della.5s. Posso anche scegliere Proprietà specifiche per la transizione da indicare solo le proprietà, in questo modo:
transition: background-color .5s linear;
Animations
A differenza delle transizioni, dove si raccontano il browser gli stati iniziale e finale, con animazioni si specificano una serie di proprietà CSS per un tempo determinato. Le animazioni sono davvero solo le estensioni delle transizioni. Per creare un'animazione è utilizzare un fotogramma chiave. Può pensare di un fotogramma chiave come lo stato di un elemento in un dato punto nel tempo all'interno della durata impostata per l'animazione complessiva. Creiamo una semplice animazione — una piccola scatola che scorre avanti e indietro. In primo luogo, definire l'elemento:
<html>
...
<div class="box" id="boxAnimation"></div>
...
</html>
Diamo che div boxAnimation un po ' di stile così sembra che una scatola:
<style>
...
.box {
border: 1px solid black;
background-color: red;
width: 25px;
height: 25px;
position: relative;
}
...
</style>
Con quella in atto, definire l'animazione di base. Ho bisogno di impostare l'animazione keyframe e la sua durata. Se non si imposta la proprietà duration, l'animazione non verrà mai eseguito perché il valore predefinito è 0. Potrai anche impostare il numero di iterazioni, mi aspetto che l'animazione per eseguire; qui voglio eseguire 10 volte per 5 secondi ciascuno (se si preferisce, è possibile impostare il numero di iterazione animazione all'infinito, che vuoi dire l'animazione per eseguire fino a quando la pagina è aperta):
#boxAnimation {
animation: 'not-knight-rider';
animation-duration: 5s;
animation-iteration-count: 10;
}
Ultima, hanno bisogno di definire il fotogramma chiave stessa. Ho intenzione di iniziare con un semplice fotogramma chiave che si sposta la casella attraverso lo schermo. A tale scopo, impostare la da e proprietà e lasciare che il browser prendersi cura di tutto il resto:
@keyframes not-knight-rider {
from {
left: -100px;
}
to {
left: 100px;
}
}
Se si esegue questo, vedrete una scatola rossa che galleggia sullo schermo e poi si ripete. Come ho già detto, hai il controllo completo dell'animazione. Let's aggiornare quel fotogramma chiave per il controllo in realtà dove la scatola è a che ora e che cosa esattamente si sta facendo, come mostrato Figura 4.
Figura 4 controllo dell'animazione
@keyframes not-knight-rider {
from {
left: -100px;
opacity: 0;
}
25% {
left: 100px;
opacity: 0.5;
}
50% {
left: -100px;
opacity: 0;
}
75% {
left: 100px;
opacity: 0.5;
}
to {
left: -100px; opacity: 0;
}
}
In Figura 4, sto definendo che cosa farà il fotogramma chiave in un determinato punto di una singola iterazione. È possibile definire un punto di partenza (a) e un punto finale (da), come pure punti in mezzo, rappresentati come percentuali della sua durata definita. Onestamente, non è molto difficile. Ora scintille su quelli creativi succhi a venire con alcuni malvagi animazioni — che è una storia diversa!
Ancora una volta, per supportare tutti i diversi browser sul mercato oggi è necessario utilizzare i prefissi fornitore appropriato. Nel caso di fotogrammi chiave, questo sarebbe simile @-webkit-fotogrammi e così via.
Si noti che è possibile vedere esempi di funzionamento di tutti gli esempi citati in questo articolo on-line a bit.ly/I0Pa4d, e dovrebbe anche verificare l'incredibile serie di demo CSS3 interattivi, hands-on a bit.ly/pF4sle, dove è possibile esplorare un numero delle specifiche CSS differenti senza mai effettivamente scrivere una riga di CSS.
Si potrebbe notare che queste demo sono su Windows 8. Ecco perché con l'arrivo di Windows 8, il team di Windows ha introdotto un nuovo modello di programmazione. Gli sviluppatori Web possono ora prendere le loro competenze e costruire un'applicazione nativa per Windows 8 usando HTML5, CSS3 e JavaScript. Microsoft ha appena aperto una superficie completamente nuova per voi per vendere le tue applicazioni in tutto il mondo! Vi incoraggio a check out the Windows Dev Center at dev.windows.com.
Questo è un momento emozionante per essere uno sviluppatore di software, Web o altro. Tecnologie sono avanzando così in fretta, che è facile da ottenere sopraffatto con tutti i nuovi strumenti nella casella degli strumenti. Indipendentemente da ciò, è importante guardare avanti e capire gli strumenti e le tecniche a vostra disposizione. L'ultima cosa che volete fare è avviare la creazione di un mucchio di belle immagini quando si possono semplicemente aggiungere poche righe di CSS per realizzare tale ombra.
Clark Sell funziona come un senior evangelist Web e Windows 8 per Microsoft Chicago. Ha Blog at csell.net, podcast al developersmackdown.com e può essere trovato su Twitter a twitter.com/csell5.
Grazie ai seguenti esperti tecnici per la revisione di questo articolo: John Hrvatin e Brandon Satrom