Share
Wenn Sie häufig WebDesignTuts + lesen, haben Sie wahrscheinlich viele Verweise auf ThemeForest, unseren Marktplatz für Webvorlagen und Designs, gesehen. Es besteht jedoch auch die Möglichkeit, dass Sie CodeCanyon, den Schwestermarkt von ThemeForest, besucht haben, in dem Code-Snippets und Plugins aufgeführt werden. CodeCanyon ist eine ziemlich großartige Ressource voller nützlicher, interessanter und gutmütiger Dateien für die Webentwicklung, die für Sie eine ungenutzte Ressource sein könnten.
CodeCanyon deckt eine Vielzahl unterschiedlicher Kategorien ab, von PHP-Skripts über WordPress-Plugins bis hin zu Code für mobile Apps. Heute betrachten wir zwei spezifische Kategorien, HTML5 und CSS sowie einige der darin enthaltenen gut aussehenden Codeausschnitte. Wenn Sie zusätzliche Favoriten von CodeCanyon haben, löschen Sie einige Links in den Kommentaren!
Nur eine Notiz, bevor wir loslegen, alle Preise setzen voraus, dass Sie Prepaid-Guthaben verwenden. Wenn Sie nur ein oder zwei kaufen möchten und nicht in Prepaid-Kredite investieren möchten, fügen Sie dem Angebotspreis $ 2 hinzu. Darüber hinaus sind Kaufzahlen zum Zeitpunkt des Schreibens korrekt.
Wir werden unsere Runde mit einigen 100% CSS-Buttons beginnen, die gut aussehen. Diese Schaltflächen sind treffend benannt, da sie ähnlich wie das Code-Repository GitHub gestaltet sind. Die Datei wirbt mit "easy classes", hat eine ausführliche Hilfedatei und ist zum Preis von nur 2 USD erhältlich. Mit 88 Einkäufen weisen diese Schaltflächen mit fünf Sternen die höchste Bewertung in der gesamten CSS-Kategorie auf.
Es ist immer großartig, Zusammenfassungen zu schreiben, weil man ziemlich tolles Zeug findet. Ein Beispiel dafür sind CSS3-Akkordeons, ein Paket von reinen CSS-horizontalen und vertikalen Akkordeons in vier Farben. Diese Datei hat auch eine Fünf-Sterne-Bewertung und einen Preis von 4 US-Dollar. Sie bietet Unterstützung für Firefox-Versionen bis hin zu Firefox 2 und Internet Explorer bis IE6 (und natürlich auch Opera, Safari und Chrome)..
Diese Datei ist ein einfacher Audio-Player mit HTML5, der MP3- oder OGG-Dateien in allen gängigen Browsern wiedergibt. Das Setup wird in weniger als 3 Minuten als abgeschlossen angekündigt und dessen Javascript-Datei ist nur 5 KB groß. Diese $ 6-Datei ist ziemlich cool.
Wenn Sie die Chance haben, spielen Sie mit der Live-Demo ein wenig, um das durchdachte Design und die Einsparung Ihres Lautstärkestatus über mehrere Einstellungen zu schätzen.
Diese Datei ist ein ziemlich fantastisches CSS3-Menü mit großen Symbolen, die "HipHop" sind, wenn sie in der Schwebe gehalten werden. Es ist anscheinend einfach zu implementieren und kann sich darauf beschränken, die Sprunganimation anzuzeigen oder nur nicht angehaltene Menüelemente zu dimmen, wenn Sie möchten.
Wo Sie es verwenden, ist das Menü ein fantastischer Code, der auf Portfolio-Websites verwendet werden kann, als Produktauswahl oder als Hauptknotenpunkt für die Verknüpfung mit Unterwebsites. Für nur 2 US-Dollar ist das ein großartiger Deal, und ich werde es wahrscheinlich selbst kaufen, wenn ich diesen Artikel fertig geschrieben habe!
Bevor ich für Tuts + schrieb, plante ich ursprünglich, einige Dateien auf den Marktplätzen zu veröffentlichen, wobei eine meiner ersten Ideen ein Haufen von Image-Hover-Effekten war. Während diese Idee nie in die Tat umgesetzt wurde (ich war zu sehr damit beschäftigt, über die Formularvalidierung zu schreiben), hat Pixelworkshop inzwischen eine beeindruckende Datei veröffentlicht. Die Datei bietet 17 verschiedene Hover-Effekte für 5 US-Dollar, darunter Bildrotationen, Überlagerungen, Farbbänder und andere beeindruckende Effekte. Schauen Sie sich die Video-Vorschau zu diesem Video an!
Obwohl ich keine Anwendung sehen kann, für die ich diese Datei verwenden könnte, ist der Effekt ziemlich cool. Docklr CSS repliziert im Wesentlichen die Funktionalität (d. H. Vergrößerung) des Docks in Mac OS X, jedoch innerhalb eines Browserfensters. Docklr verwendet CSS-Übergänge, um die Animationen von OS X zu replizieren, z. B. springende Symbole und Vergrößerung. Für nur 4 $ ist es ein Schnäppchen!
Benachrichtigungsboxen sind im Wesentlichen eine Reihe von Benachrichtigungsboxen, die mit CSS erstellt wurden und großartig aussehen. Sie sind gut gestaltet, bieten aber auch einige nette Animationen (mit jQuery), wenn sie per Klick abgewiesen werden. Außerdem unterstützen die Benachrichtigungsboxen jQuery-Cookies. Dies bedeutet, dass eine Benachrichtigung nicht mehr angezeigt wird, wenn Sie die Benachrichtigung abbrechen, wenn Sie die Seite aktualisieren oder erneut aufrufen.
Notification Boxes hat ein schönes Einkaufsvolumen von 233 und kostet nur 2 US-Dollar.
Pricer ist eines von mehreren Preis-Rastern, die von CSS für CodeCanyon erstellt wurden, und wohl eines der besten. Pricer verwendet lediglich reines CSS, um ein Preisvergleichsraster zu erstellen, um beispielsweise verschiedene Pläne für einen Webhost oder mehrere Mitgliedschaftsebenen zu vergleichen. Obwohl es keine Videovorschau gibt, verspricht das Listing CSS-gestützte Animationen in unterstützten Browsern (Safari 4+, Chrome 4+, Opera 10.5+, Firefox 4+) mit "graceful degrading" in älteren Browsern.
Mit 13 verschiedenen Farbschemata bietet Pricer einen minimalen Preis von 3 US-Dollar.
Ich habe es nicht geschafft, Dropdown-Menüs zu erwähnen, um zu dem Verkaufsmonster zu gelangen, das "CSS3 Mega Drop Down Menu" von Pixelworkshop ist (der Schöpfer der zuvor erwähnten "CSS3 Image Hover-Effekte")..
Mit 3836 Verkäufen wird diese Datei auf dem gesamten CodeCanyon-Marktplatz am meisten gekauft. Im Grunde handelt es sich um ein gültiges CSS3-basiertes Dropdown, das viele Browser unterstützt, die in neun Farben unterstützt werden. Die Datei bietet eine Vielzahl von Optionen für die Anpassbarkeit, daher ist es definitiv etwas, das Sie sich ansehen sollten, auch wenn Sie es für notwendig erachten, Ihr eigenes CSS hinzuzufügen, um das Design ein wenig zu verfeinern.
Diese 4-Dollar-Datei enthält elf Schatten der CSS-Generation, darunter Warp-, Hover- und Fold-Schatten, die ziemlich gut aussehen. Es ist eine dieser einfachen Dateien, die immer nützlich in Ihrem Arsenal ist, und es kostet kaum einen Cent dafür.
Die Paginierung kann manchmal unterbewertet sein, bietet aber tatsächlich die notwendige Navigation zu einem Blog. "CSS Pagination Pack" ist ein Paket von CSS-gestützten Paginierungselementen in sieben Farben.
Diese $ 2-Paginierung wird mit semantischem, einfach verständlichem Code generiert. Die Datei wird mit einer vollständigen Dokumentation geliefert, wenn Sie Hilfe benötigen. Das einfache Verwendungsbeispiel in der Artikelbeschreibung reicht aus.
Es ist schwer zu ignorieren, wie großartig diese Datei ist. Sie erzeugt sehr schöne Balkendiagramme mit reinem CSS und HTML sowie Hover-Status. Die resultierenden Grafiken sind sicherlich nicht minderwertig, da sie keine Bilder verwenden. Um ehrlich zu sein, ist $ 3 ein Schnäppchen für eine solche Kick-Ass-Datei!
Die HTML5-Videogalerie mit Live-Wiedergabeliste ist ein ästhetisch ansprechender, gut animierter HTML5-Videoplayer, der auch eine Wiedergabelistenkomponente enthält. Die Datei funktioniert mit OGV- und MP4-Dateien und enthält sogar Flash-Fallback für Browser, die kein HTML5-Video unterstützen. Ich kann bestätigen, dass die Datei auch auf einem iPad problemlos funktioniert!
Die HTML5-Videogalerie mit Live-Playlist kostet bei CodeCanyon $ 8.
Elitepack Classic CSS3 Tags ist ein Paket gut durchdachter Stile für Post-Tags, die mit allen Browsern kompatibel sind. Die Datei ist in verschiedenen Farbgebungen erhältlich, mit Hover-Status und einer semantischen Implementierung.
Elitepack Classic CSS3 Tags ist mit einem Preis von 3 US-Dollar gekennzeichnet (kein Wortspiel beabsichtigt!).
Wie Sie sehen, enthält CodeCanyon einige ziemlich coole CSS- und HTML5-Codedateien, die möglicherweise für ein aktuelles oder zukünftiges Projekt geeignet sind. Dies ist jedoch sicherlich nicht die Grenze des Angebots von CodeCanyon. Sehen Sie sich also unbedingt die Archive an.
Wenn Sie andere bevorzugte CodeCanyon-Dateien haben, teilen Sie diese unbedingt in den Kommentaren mit!
Accentsconagua