Share
Als je WebDesignTuts + vaak leest, heb je waarschijnlijk veel referenties gezien van ThemeForest, onze marktplaats voor websjablonen en thema's. Er is echter ook een kans dat je CodeCanyon hebt bezocht, de zustermarkt van ThemeForest die codefragmenten en plug-ins verkoopt. CodeCanyon is een vrij goede bron vol met nuttige, interessante en, goed, kick-ass-bestanden voor webontwikkeling die een ongebruikte resource voor u kan zijn.
CodeCanyon bestrijkt een breed scala van verschillende categorieën, van PHP-scripts tot WordPress-plug-ins tot code voor mobiele apps. Vandaag gaan we naar twee specifieke categorieën, HTML5 en CSS, en enkele van de fraaie codefragmenten die ze bevatten. Als je extra favorieten hebt van CodeCanyon, plaats dan een paar links in de comments!
Slechts een opmerking voordat we beginnen, alle prijzen hier gaan ervan uit dat u prepaid-tegoed gebruikt. Als u slechts één of twee wilt kopen en niet wilt investeren in voorafbetaalde kredieten, voegt u $ 2 toe aan de opgegeven prijs. Bovendien zijn de aankoopaantallen correct op het moment van schrijven.
We beginnen onze roundup met enkele 100% CSS-knoppen die er geweldig uitzien. Deze knoppen hebben de toepasselijke naam omdat ze op dezelfde manier zijn gestileerd als de codebibliotheek GitHub. Het bestand adverteert "eenvoudige klassen", heeft een gedetailleerd helpbestand en komt binnen tegen de lage prijs van slechts $ 2. Met 88 aankopen hebben deze knoppen de hoogste beoordeling in de volledige CSS-categorie met een volledige vijf sterren.
Het is altijd geweldig om razzia's te schrijven, omdat je een aantal geweldige dingen vindt. Een voorbeeld hiervan is CSS3 Accordions, een pakket pure CSS horizontale en verticale accordeons in vier kleuren. Dit bestand heeft ook een vijfsterrenwaardering en een prijskaartje van $ 4, dat ondersteuning biedt voor Firefox-versies helemaal terug naar Firefox 2 en Internet Explorer terug naar IE6 (en Opera, Safari en Chrome, natuurlijk).
Dit bestand is een eenvoudige audiospeler met HTML5 die MP3- of OGG-bestanden in alle grote browsers afspeelt. Met setup geadverteerd als voltooid in minder dan 3 minuten, en wiens javascript bestand weegt slechts 5KB, is dit $ 6-bestand best cool.
Als u de kans krijgt, kunt u met de live demo spelen om het doordachte ontwerp en de besparing van uw volumestatus in meerdere instellingen te waarderen..
Dit bestand is een behoorlijk geweldig CSS3-menu met grote iconen die "HipHop" zijn wanneer ze zweven. Het is blijkbaar eenvoudig te implementeren en kan worden beperkt tot het weergeven van de springanimatie of alleen dimmen van niet-zwevende menu-items als je wilt.
Waar u het ook gebruikt, het menu is een geweldig stuk code dat u kunt gebruiken op portfoliosites, als productkiezer of als hoofdhub om naar subsites te linken. Met slechts $ 2 is het een geweldige deal en ik ga het waarschijnlijk zelf kopen nadat ik dit artikel heb geschreven!
Voordat ik schreef voor Tuts +, was ik oorspronkelijk van plan om enkele bestanden op de marktplaatsen te publiceren, met als eerste een idee van een aantal hovereffecten. Hoewel dat idee nooit tot wasdom kwam (ik was te druk met schrijven over formuliervalidatie), heeft Pixelworkshop ondertussen een geweldig bestand gepubliceerd. Het bestand bevat 17 verschillende hovereffecten voor $ 5, inclusief beeldrotaties, overlays, linten en andere geweldige effecten. Bekijk hier het videovoorbeeld!
Hoewel ik een applicatie niet kan zien waarvoor ik dit bestand zou kunnen gebruiken, is het effect ervan vrij cool. Docklr CSS repliceert in essentie de functionaliteit (dat wil zeggen vergroting) van het dock in Mac OS X maar binnen een browservenster. Docklr gebruikt CSS-overgangen om de animaties van OS X te repliceren, zoals stuiterende pictogrammen en vergroting. Voor slechts $ 4 is het een koopje!
Meldingsboxen zijn in essentie een stel kennisgevingsboxen, gebouwd met CSS, die er geweldig uitzien. Ze zijn goed ontworpen, maar bevatten ook een aantal leuke animaties (met jQuery) wanneer ze worden verwijderd bij klikken. Plus, Meldingsboxen bieden ondersteuning voor jQuery-cookies, wat betekent dat wanneer een melding wordt afgewezen, deze niet meer verschijnt wanneer u de pagina vernieuwt of opnieuw bezoekt.
Notification Boxes heeft een aardig aankoopaantal van 233 en verkoopt voor slechts $ 2.
Pricer is een van de CSS-gemaakte prijsrasterwerken op CodeCanyon en is ongetwijfeld een van de beste. Pricer gebruikt alleen pure CSS om een prijsvergelijkingsraster te maken voor het vergelijken van bijvoorbeeld verschillende abonnementen voor een webhost of meerdere niveaus van lidmaatschap. Hoewel er geen videovoorbeeld is, belooft de lijst animaties met CSS in ondersteunde browsers (Safari 4+, Chrome 4+, Opera 10.5+, Firefox 4+) met "sierlijke vernedering" in oudere browsers.
Met 13 verschillende kleurenschema's klokt Pricer in met een minimaal prijskaartje van $ 3.
Ik ben weggegaan van het noemen van drop-down menu's om bij het verkoop-monster te komen dat is "CSS3 Mega Drop Down Menu" van Pixelworkshop (de maker van de eerder genoemde "CSS3 Image Hover Effects").
Met 3836 verkopen is dit bestand het meest gekocht op de hele CodeCanyon-marktplaats. Kortom, het is een geldige door CSS3 aangedreven drop-down veel met cross-browser ondersteuning in negen kleuren. Het bestand heeft een heleboel opties voor aanpasbaarheid, dus het is zeker iets om naar te kijken, hoewel je het misschien nodig vindt om je eigen CSS toe te voegen om het ontwerp een beetje te verfijnen..
Dit $ 4-bestand bevat elf CSS-generatieschaduwen, inclusief warp, hover en fold die er best geweldig uitzien. Het is een van die simpele bestanden die altijd handig is om in je arsenaal te hebben, en het kost nauwelijks een cent om dat te doen.
Paginering kan soms worden ondergewaardeerd, maar het biedt in feite essentiële navigatie naar een blog. "CSS Pagination Pack" is een pakket van CSS-aangedreven pagineringelementen in zeven kleuren.
Deze paginering van $ 2 wordt gegenereerd met semantische, eenvoudig te begrijpen code. Het bestand wordt geleverd met volledige documentatie als je hulp nodig hebt, maar het eenvoudige gebruik van het voorbeeld in de objectbeschrijving is alles wat je echt nodig hebt.
Het is moeilijk om de enorme behaagzucht van dit bestand te negeren, dat hele mooie staafdiagrammen genereert met pure CSS en HTML, compleet met zweeftoestanden. De resulterende grafieken zijn zeker niet minderwaardig gezien ze geen afbeeldingen gebruiken. Eerlijk gezegd is $ 3 een koopje voor zo'n kick-ass-bestand!
HTML5 Video Gallery met Live Playlist is een esthetisch aantrekkelijke, goed geanimeerde HTML5-videospeler die ook een afspeellijstcomponent bevat. Het bestand werkt met OGV- en MP4-bestanden en bevat zelfs Flash-fallback voor browsers die geen HTML5-video ondersteunen. Ik kan bevestigen dat het bestand ook naadloos werkt op een iPad!
HTML5 Videogalerij met Live Afspeellijst kost $ 8 van CodeCanyon.
Elitepack Classic CSS3 Tags is een pakket met goed ontworpen stijlen voor post-tags, compatibel met browsers. In verschillende kleurenschema's, met zweeftoestanden en een semantische implementatie, is het bestand best aardig.
Elitepack Classic CSS3 Tags is getagd (geen woordspeling!) Met slechts een prijs van $ 3.
Zoals je ziet, bevat CodeCanyon een aantal vrij coole CSS- en HTML5-powered codebestanden die goed zouden kunnen werken voor een huidig of toekomstig project. Dit is echter zeker niet de limiet van wat CodeCanyon biedt, dus zorg ervoor dat u door zijn archieven bladert.
Als u andere favoriete CodeCanyon-bestanden hebt, moet u deze in de opmerkingen delen!
Accentsconagua