20 tolle Weihnachtsprojekte in CodePen versteckt
CodePen ist ein Online-Spielplatz für talentierte Frontend-Entwickler. Hier können Sie immer coole Projekte finden, um Ihren Horizont zu erweitern und zu sehen, was andere Entwickler vorhaben. Die Feiertage am Jahresende sind eine großartige Zeit, um Ihre Lieben mit kreativen persönlichen Projekten zu überraschen oder sich bei Ihren Kunden mit einigen coolen, innovativen Designs zu bedanken, die dem Urlaubsgeist helfen.
In diesem Beitrag werfen wir einen Blick auf 20 tolle Weihnachtsversuche am CodePen, dass Sie als Inspiration verwenden können, um Ihre eigenen Designs zu erstellen.
1. Familien-Weihnachtsliedbuch
Diese schöne Familien-Weihnachtslied-App kann Ihre Lieblings-Weihnachtslieder abspielen, die auf SoundCloud gehostet werden. Die Stilregeln sind in der Sprache LESS Stylesheet geschrieben. Die Musikplayer-Funktionalität wird von einem benutzerdefinierten jQuery-Plugin bereitgestellt.
Die Schneeflocken- und Weihnachtsbaum-Icons im Hintergrund verleihen dem Design eine ernste Atmosphäre. Wenn Sie den Mauszeiger über den Stift bewegen, finden Sie auch einige subtile CSS-Effekte.
2. Digitaler Weihnachtsbaum
Das Entwerfen für Weihnachten ist immer eine dankbare Arbeit, da die typischen visuellen Elemente auf viele kreative Arten erstellt werden können. Dieser Stift ist ein gutes Beispiel dafür. Zuerst können Sie nur bunte Dreiecke sehen, die scheinbar keinen Bezug zu den Feiertagen haben, aber wenn Sie auf die Schaltfläche Reveal klicken, werden sie zu einem Weihnachtsbaum zusammengefügt. Es ist nicht nur eine einzigartige Lösung, sondern erinnert auch an ein einfacheres Spiel.
3. Weihnachtsanimation mit Schneefall
Sie müssen nicht unbedingt JavaScript verwenden, wenn Sie eine coole Animation für Weihnachten erstellen möchten. In diesem Stift werden sowohl die Schneefallanimation als auch die Hintergrundbilder rein in CSS erstellt. Es lohnt sich, den Code ein wenig zu untersuchen, da er die unglaublichen Fähigkeiten von CSS3 zeigt. Das Hintergrundbild kann sogar mit einer echten SVG-Grafik verwechselt werden.
4. Der Weihnachtsmann auf der Flucht!
Santa auf der Flucht! ist ein lustiges JavaScript-Spiel für die Feiertage, das das phaser.js HTML5-Spiel-Framework verwendet. Es gibt nicht zu viele Regeln in diesem Spiel: Der Weihnachtsmann läuft unendlich oder zumindest bis er fällt. Dieser Stift bietet Ihnen eine ausgezeichnete Gelegenheit, um ein einfacheres Spiel in JavaScript zu schreiben.
5. Secret Santa Name Picker
Die Auswahl eines Namens aus einem Hut war in Schulen und Büros eine beliebte Methode, um geheime Weihnachtsmänner auszusuchen - dieser Stift ist lediglich eine digitale Version dieser Tradition. Da es nur Vanilla-JavaScript verwendet, können Sie es leicht in Ihre eigene Website einbetten. Ändern Sie einfach die Namen in der gegebenen Variable.
6. Weihnachtskugeln in Pure CSS
Diese fröhlichen Weihnachtskugeln sind in reinem CSS geschrieben und nutzen die Grenzradiusregeln. Die verschiedenen Teile der Kugeln werden durch Verwendung genau berechneter relativer Positionen zusammengesetzt.
Wenn Sie einer Webseite schnell eine Urlaubsatmosphäre hinzufügen möchten, fügen Sie einfach einige dieser Bälle an den entsprechenden Stellen in einer Farbe ein, die dem Gesamtdesign der Website entspricht.
7. Bewegliche Schneeflocken
Sie können diese Schneeflocken in Bewegung setzen, indem Sie den Mauszeiger über einen Desktop bewegen oder das Smartphone neigen. Die Funktionalität wird durch objektorientiertes JavaScript bereitgestellt, das vom Entwickler intelligent verwendet wird, um eine benutzerdefinierte Snowflake-Klasse zu erstellen.
Die Schneeflocken selbst sind in CSS3 erstellt, und der Hintergrund verwendet Farbverläufe - in diesem Stift befinden sich überhaupt keine Bilder.
8. Ferienakkordeon-Experiment
Dieses Ferienakkordeon ist einfach wunderschön. Wenn Sie den Mauszeiger über eine Registerkarte bewegen, wird der Fokus durch das Erweitern etwas vergrößert, und wenn Sie darauf klicken, wird plötzlich die gesamte Seite angezeigt. Es ist interessant zu wissen, dass dieser Stift Scalable Vector Graphics (SVG) verwendet, die mit CSS formatiert sind.
SVGs sind leistungsfähiger als sie auf den ersten Blick scheinen. Sie können intelligent positioniert und mit denselben Stilregeln gestaltet werden, die auch bei regulären HTML-Elementen verwendet werden.
9. Flat Pure CSS Schneemann
Wer hat gesagt, dass flaches Design langweilig sein muss? Dieser reizende Schneemann kann Weihnachtsentwurf leicht jedem Entwurf hinzufügen. Es gibt keine Bilder für den Schneemann, es ist vollständig in CSS geschrieben. Es lohnt sich, sich den CSS-Code ein wenig anzusehen und zu sehen, wie der Entwickler die Pseudo-Selektoren: before und: after verwendet, um das beabsichtigte Ergebnis zu erzielen.
10. CSS3 Schneeflocke
Sie können die Erstellung von ausschließlich CSS3-Bildern erleichtern, indem Sie erweiterte Frontend-Entwicklungstools verwenden. Diese durchdachte CSS3-Schneeflocke ist dafür ein hervorragendes Beispiel. Der Entwickler nutzte die Jade-Templatiersprache, die in HTML übersetzt wird, und den Sass-CSS-Präprozessor, um dieses atemberaubende Schneeflockendesign zu implementieren.
11. Weihnachtsknopf
Intelligente Designs entscheiden sich häufig für subtile Lösungen, wie der verschneite Weihnachtsknopf in diesem Stift. Der dunkelrote Hintergrund ist die perfekte Wahl für ein Weihnachtsdesign. es muss doch nicht alles grün sein.
Die Farben, die Farbverläufe, die Schrift und der Hover-Effekt machen diesen Button sehr elegant und feierlich. Sie brauchen nur wenige von ihnen, um eine Website schnell zur Weihnachtszeit zu gestalten.
12. Parallax Happy Holiday
Wenn Sie das Parallax-Scrollen mögen, warum sollten Sie es nicht für Ihre Urlaubsentwürfe verwenden? Der Entwickler dieses Stiftes experimentierte intelligent mit dem Effekt und verwendete das jQuery-Plugin von Parallax.js weniger häufig. Der Bildlaufeffekt ist nicht wie üblich vertikal, sondern horizontal. Die weihnachtliche Atmosphäre wird durch eindrucksvollen Schneefall verstärkt
Wenn ich einen Fehler an diesem Stift herausfinden müsste, wäre dies die Farbauswahl: Weiße Buchstaben auf einem teilweise weißen Hintergrund beeinträchtigen die Zugänglichkeit des Designs erheblich.
13. CSS Weihnachtspapier
Mit Hilfe von CSS3 können Sie ein völlig einzigartiges Weihnachtspapier erstellen. Der Entwickler dieses Stiftes zeigt dazu nicht nur eine, sondern sechs Varianten. Die schönen Muster werden durch die intelligente Verwendung von CSS-Farbverläufen und die Eigenschaft des Hintergrundmischmodus erzielt.
Weitere coole Beispiele und eine ausführliche Erklärung finden Sie auf der Website des Entwicklers.
14. Box innerhalb einer Box
Dieses einfallsreiche Design wurde von traditionellen russischen Puppen (einer Puppe in einer Puppe) inspiriert. Wenn Sie die äußere Box durch Anklicken öffnen, wird eine innere Box angezeigt, die auch die äußere Box einer anderen inneren Box ist. Die Funktionalität ist in jQuery geschrieben, und die genaue Position der Boxen wird mit Hilfe der absoluten und relativen Positionsregeln in der CSS-Datei festgelegt.
15. Geschenkbox mit Papierschaleneffekt
Wenn Sie es schaffen, das Band aus dem Geschenk zu entfernen, indem Sie es wegziehen, können Sie einen Blick auf den Supercool-Papierschaleneffekt werfen, der den inneren Inhalt des Geschenks enthüllt. Sie können das vollständige Tutorial auf der Website des Entwicklers nachlesen. Dies ist ein Trick, den es sich zu lernen lohnt. Wenn Sie nur den Code verwenden möchten, können Sie ihn auch aus GitHub klonen.
16. Animierte Leinwand mit Weihnachtsgeist
Weihnachten kann eine großartige Zeit sein, um mit neuen Dingen zu experimentieren, so wie es der Entwickler in diesem Stift getan hat, indem er die HTML5-Leinwand als animierten Hintergrund verwendet. Die Zeichenfläche steht vor dem Inhalt (Happy Holidays!) In der HTML-Datei und wird mithilfe der intelligenten CSS-Positionierung als Hintergrund festgelegt.
Der Stift verwendet auch ein Hintergrundanimationsskript, das als separate JavaScript-Datei enthalten ist.
17. Geschenkkarte UI
Diese auffällige Geschenkkarte ist nicht nur für Weihnachten gedacht, sondern kann jederzeit verwendet werden, wenn Sie Ihre Benutzer mit einem Geschenk auf Ihrer Website überraschen möchten. Es ist nicht auf JavaScript angewiesen, da es vollständig in der Sass-Stylesheet-Sprache geschrieben ist.
Beim Entwurf wird die CSS3-Eigenschaft des Clippfads verwendet, mit der Entwickler nur einen bestimmten Bereich eines Elements anzeigen können, anstatt den gesamten Bereich anzuzeigen.
18. Reine CSS-Weihnachtskarte
Dieser unendlich lachende Weihnachtsmann, der nur HTML und CSS3 verwendet, gibt Ihnen die Möglichkeit zu verstehen, wie die Keyframe-Animationssyntax in der Praxis verwendet werden kann. In CSS3 können Sie die Regel @keyframes verwenden, um die Regeln einer Animation anzugeben. Anschließend können Sie diese angegebene Animation mit der Eigenschaft CSS3 der Animation an ein bestimmtes Element binden.
Sie müssen den Namen des Keyframes als ersten Wert der Animationseigenschaft hinzufügen, genau wie der Entwickler dies mit den benutzerdefinierten Keyframes namens bodyLaugh, beardLaugh, headLaugh und mouthLaugh getan hat, die speziell für diesen Stift erstellt wurden.
19. Weihnachtscracker
Wenn Sie über diesen eindrucksvollen Xmas Cracker schweben, zeigt dies eine einzigartige Weihnachtsbotschaft, mit der Sie Ihren Besuchern ein frohes Weihnachtsfest wünschen. Der HTML-Code ist in HAML (HTML Abstraction Markup Language) geschrieben, während die Stilregeln von der Leistungsfähigkeit der Sass Syntactically Awesome Styesheets-Sprache profitieren.
Das Ergebnis ist intelligent und in der Tat großartig. Durch Hinzufügen von etwas mehr JavaScript kann es sogar verwendet werden, um den Benutzern benutzerdefinierte Angebote oder Nachrichten zu liefern.
20. Weihnachtslichter blinken
Diese blinkenden Weihnachtslichter können jeder Website schnell eine einzigartige Atmosphäre verleihen. Der Front-End-Code ist in HAML geschrieben, das sich in HTML, Sass, die in CSS übersetzt wird, und jQuery zusammenstellt.
Der animierte Glüheffekt wird durch die oben genannte, von CSS3 bereitgestellte @keyframes-Regel erreicht. Die Farben der LEDs werden in der jQuery-Datei festgelegt, indem der Farbtonwert der vorherigen LED mit der HSL-Farbskala um 50 Grad erhöht wird.
