it.hideout-lastation.com
Style Your Own Ownbox Effetti di animazione con Checkbox.css
In un recente post ho trattato una divertente libreria di animazione per pulsanti radio personalizzati, alimentata da CSS .
Quella libreria libera è stata rilasciata da 720kb e ha visto rapidamente un'alternativa di follow-up chiamata Checkbox.css . Funziona in modo simile, tranne che per il ripristino e l'animazione delle caselle di controllo HTML .
Questa libreria si presenta come una suite di librerie con tre scopi distinti :Radiobox.css- animazioni radio personalizzateCheckbox.css- animazioni delle caselle di controllo personalizzateChecked.css: stili e animazioni di elementi selezionati esistenti (radio e caselle di controllo)
Questi sono tutti sviluppati dalla stessa squadra e funzionano in modo simile. Ma dovrai includere ogni libreria singolarmente se vuoi ottenere tutti gli effetti.
Dai un'occhiata al Checkbox.css GitHub per vedere alcune di queste funzionalità e come funzionano. Per impostazione predefinita, si basano su trasformazioni 2D e transizioni CSS, a seconda del supporto del browser.
Nessuna di queste librerie viene fornita con metodi di fallback JS, quindi funzionano solo per animazioni basate su CSS . Ma una rapida occhiata alla pagina della demo dovrebbe farti felice di aggiungere queste animazioni alla tua pagina.
Il processo non potrebbe essere più semplice e richiede conoscenze di programmazione minime (anche se è sempre utile averne uno).
Una volta che il foglio di stile CSS è sulla tua pagina, aggiungi una classe alla tua casella di controllo con la checkbox-x format checkbox-x dove "x" rappresenta l'animazione che desideri . Ad esempio, ecco il codice per l'effetto di animazione "jump":
La parte migliore è come questa libreria può funzionare anche in combinazione con il formato del pulsante radio . Consiglio vivamente la libreria Checked.css se si desidera animare gli elementi selezionati esistenti .
Non lasciare che tutte queste dipendenze ti spaventino. Praticamente chiunque può configurare la libreria Checkbox.css o una qualsiasi delle librerie correlate, tutto da zero con un po 'di copia e incolla .E, se hai domande o suggerimenti per questo pacchetto di librerie di animazioni di input, prova a inviare messaggi ai creatori attraverso il loro sito o su Twitter @ 720kb_.
I designer non ricevono abbastanza amore dalle persone con cui lavorano. A volte lo fanno sembrare così facile che tu possa andare, "Ehi, posso farlo anche io." Questi 30 esempi ti mostreranno che alcune persone sono nate per progettare, e altre ti daranno un aneurisma cerebrale.Alcuni dei progetti in primo piano sono terribili anche per gli anni '90, alcuni sono stati creati semplicemente raccogliendo e lanciando elementi di Word Art nel mix.
Dovresti assumere un web designer o usare un web builder?
I web builder sono fondamentalmente un magico strumento per designer non web. Ciò che una volta era fuori dalla portata della gente può ora essere colto con un minimo sforzo. Ma ci sono cose che i web builder non possono fare con i web designer. La domanda ora è: dovresti assumere un web designer per creare il tuo sito web o semplicemente usare un web builder e costruirlo tu stesso?I
