Share
Se leggi spesso WebDesignTuts +, probabilmente avrai visto molti riferimenti a ThemeForest, il nostro marketplace per modelli e temi web. Tuttavia, c'è anche la possibilità che tu abbia visitato CodeCanyon, il mercato gemello di ThemeForest che distribuisce frammenti di codice e plug-in. CodeCanyon è una grande risorsa piena di file utili, interessanti e, bene, kick-ass per lo sviluppo web che potrebbero essere una risorsa non sfruttata per te.
CodeCanyon copre una vasta gamma di diverse categorie, dagli script PHP ai plugin WordPress al codice per le app mobili. Oggi daremo un'occhiata a due categorie specifiche, HTML5 e CSS, e alcuni dei frammenti di codice di bell'aspetto che contengono. Se hai qualche extra da CodeCanyon, lascia dei link nei commenti!
Solo una nota prima di iniziare, tutti i prezzi qui presumono che stai usando crediti prepagati. Se hai voglia di acquistare solo uno o due, e non vuoi investire in crediti prepagati, aggiungi $ 2 al prezzo indicato. Inoltre, i conteggi degli acquisti sono corretti al momento della scrittura.
Daremo inizio alla nostra carrellata con alcuni pulsanti CSS al 100% che sembrano grandi. Questi pulsanti sono giustamente denominati poiché sono stilizzati in modo simile al repository di codice GitHub. Il file pubblicizza "classi facili", ha un file di aiuto dettagliato e arriva al prezzo basso di soli $ 2. Con 88 acquisti, questi pulsanti hanno la valutazione più alta nell'intera categoria CSS con cinque stelle complete.
È sempre bello scrivere rastrellamenti, perché trovi cose davvero grandiose. Un esempio di questo è CSS3 Accordions, un pacchetto di fisarmoniche orizzontali e verticali puramente CSS in quattro colori. Questo file ha anche una valutazione a cinque stelle e un prezzo di $ 4, fornendo supporto per le versioni di Firefox fino a Firefox 2 e Internet Explorer per IE6 (e Opera, Safari e Chrome, ovviamente).
Questo file è un semplice lettore audio alimentato da HTML5 che riproduce file MP3 o OGG in tutti i principali browser. Con setup annunciato come completato in meno di 3 minuti, e il cui file javascript pesa solo 5KB, questo file $ 6 è piuttosto interessante.
Se ne hai la possibilità, gioca con la demo dal vivo per apprezzare il design accattivante e il salvataggio dello stato del volume su più impostazioni.
Questo file è un fantastico menu CSS3 con grandi icone che "HipHop" quando si librava. È apparentemente facile da implementare e può essere limitato alla visualizzazione dell'animazione saltante o alla sola attenuazione delle voci di menu non a rotazione se si desidera.
Per quanto riguarda dove lo si utilizza, il menu è un fantastico pezzo di codice da utilizzare sui siti portfolio, come selettore di prodotti o come hub principale da collegare ai siti secondari. A soli $ 2, è un affare fantastico e probabilmente lo comprerò da solo una volta che avrò finito di scrivere questo articolo!
Prima di scrivere per Tuts +, originariamente avevo pianificato di pubblicare alcuni file sui marketplace, con una delle mie prime idee che consisteva in un mucchio di effetti hover delle immagini. Mentre quell'idea non è mai stata realizzata (ero troppo impegnato a scrivere sulla convalida del modulo), Pixelworkshop ha pubblicato nel frattempo un file fantastico. Il file presenta 17 effetti di hover delle immagini distinti per $ 5, tra cui rotazioni di immagini, sovrapposizioni, nastri e altri fantastici effetti. Assicurati di controllare l'anteprima del video su questo!
Anche se non riesco a vedere un'applicazione per la quale posso usare questo file, l'effetto che genera è piuttosto interessante. Docklr CSS essenzialmente replica la funzionalità (cioè l'ingrandimento) del dock in Mac OS X ma all'interno di una finestra del browser. Docklr utilizza le transizioni CSS per replicare le animazioni da OS X come il rimbalzo delle icone e l'ingrandimento. Per soli $ 4, è un affare!
Notification Boxes è essenzialmente un insieme di caselle di notifica, create con CSS, che sembrano grandiose. Sono ben progettati, ma presentano anche alcune animazioni (con jQuery) quando vengono ignorati al clic. Inoltre, le cassette di notifica supportano i cookie jQuery, il che significa che quando una notifica viene chiusa, non riappare quando si aggiorna o si rivisita la pagina.
Notification Boxes ha un buon conteggio degli acquisti di 233 e vende per soli $ 2.
Pricer è una delle numerose griglie di prezzi create da CSS su CodeCanyon, e probabilmente una delle migliori. Pricer usa solo CSS puro per creare una griglia di comparazione dei prezzi per confrontare, diciamo, diversi piani per un host web o più livelli di appartenenza. Sebbene non ci sia un'anteprima video, l'elenco promette animazioni alimentate da CSS nei browser supportati (Safari 4+, Chrome 4+, Opera 10.5+, Firefox 4+) con "graceful degrading" nei browser più vecchi.
Con 13 diversi schemi di colori, Pricer ha un prezzo minimo di $ 3.
Sono stato lontano dal menzionare menu a tendina per arrivare al mostro delle vendite che è "Menu Drop Mega CSS3" da Pixelworkshop (il creatore del già citato "Effetti immagine al passaggio del mouse su CSS3").
Con 3836 vendite, questo file è il più acquistato sull'intero mercato CodeCanyon. Fondamentalmente, si tratta di un valido drop-down basato su CSS3, molti con supporto cross browser in nove colori. Il file ha un sacco di opzioni per la personalizzazione, quindi è sicuramente qualcosa da dare un'occhiata, anche se potresti ritenere necessario aggiungere il tuo CSS per perfezionare un po 'il design.
Questo file da $ 4 include undici ombre di generazione CSS, tra cui warp, hover e fold che sembrano davvero fantastiche. È uno di quei semplici file che è sempre utile avere nel tuo arsenale, e costa appena un centesimo per farlo.
L'impaginazione può a volte essere sottovalutata, ma in realtà fornisce una navigazione essenziale per un blog. "CSS Pagination Pack" è un pacchetto di elementi di impaginazione alimentati da CSS in sette colori.
Questa impaginazione da $ 2 viene generata con un codice semantico e di facile comprensione. Il file viene fornito con la documentazione completa se hai bisogno di aiuto, ma il semplice esempio di utilizzo fornito nella descrizione dell'oggetto è tutto ciò di cui hai veramente bisogno.
È difficile ignorare la pura suggestione di questo file che genera grafici a barre molto belli con puro CSS e HTML, completi di stati di hover. I grafici risultanti non sono certamente inferiori considerando che non usano alcuna immagine. Francamente, $ 3 è un affare per un tale file kick-ass!
La Galleria di video HTML5 con Live Playlist è un lettore di video HTML5 esteticamente piacevole e ben animato che contiene anche un componente di playlist. Il file funziona con i file OGV e MP4 e contiene persino il fallback Flash per i browser che non supportano i video HTML5. Posso confermare che il file funziona perfettamente anche su un iPad!
La Galleria video HTML5 con Live Playlist costa $ 8 da CodeCanyon.
Elitepack Classic I tag CSS3 sono un pacchetto di stili ben progettati per post-tag, compatibili con i browser. Disponibile in diversi schemi di colori, con stati di hover e un'implementazione semantica, il file è molto carino.
Elitepack Classic I tag CSS3 sono etichettati (non è un gioco di parole!) Con un solo prezzo di $ 3.
Come puoi vedere, CodeCanyon contiene alcuni file di codice CSS e HTML5 piuttosto interessanti che potrebbero funzionare bene per un progetto attuale o futuro. Tuttavia, questo non è certamente il limite di ciò che CodeCanyon offre, quindi assicurati di consultare i suoi archivi.
Se hai altri file CodeCanyon preferiti, assicurati di condividerli nei commenti!
Accentsconagua