Wenn Sie Ideen haben und suchen, um Websites zum nächsten großen Ding nach A Song of Fire and Ice (Game of Thrones-Serie für die Nicht-Buchleser) zu machen, ohne sich den Kopf zu zerbrechen, sehen Sie sich diese 15 CSS3 an Effekte haben wir für Sie zusammengefasst.

Von Tutorials bis hin zu Angeboten erhalten Sie 15 erstaunliche Effekte, die Websites von Blabla in Wow verwandeln werden!

Parallax-Effekt

Haben Sie sich die ihatetomatoes- Website angesehen, die 25 Jahre Nintendo Game Boy feiert? Wo musstest du auch ein bisschen Tetris spielen?

Oder haben Sie vielleicht auf Rimmels Website gestöbert und waren hin und weg, wie brillant die Artikel vor einem farbenfrohen Hintergrund von Modellen auftauchen?

Der 3D-ähnliche Effekt, der beim Designen jetzt der Rave zu sein scheint, wird technisch als Parallax-Effekt bezeichnet. Designer lieben es, damit herumzuspielen, aber Sie müssen subtil und strategisch vorgehen, da dies nach hinten losgehen und am Ende ein Durcheinander verursachen kann.

Der Parallax-Effekt oder das Parallax-Scrollen ist das Ergebnis davon, dass der Hintergrund langsamer geladen wird als der Vordergrund, wodurch ein eher 3D-Look entsteht. Klingt nach viel Arbeit? Nicht für jemanden, der schlau arbeitet, holen Sie sich ein Parallax-Thema, das bereits bei Cyberchimps komplett fertig ist .

Ken-Burns-Effekt

Der Dokumentarfilmer war Pionier des Konzepts des Schwenkens und Zoomens in ein statisches Bild. Grafikdesigner haben diesen Effekt häufig verwendet, und Sie sind vielleicht sogar auf vielen Websites darauf gestoßen.

Der Effekt führt die Augäpfel nicht nur buchstäblich dorthin, wo Sie den Fokus haben möchten, sondern verleiht einem Bild auch eine Prise Intensität. Erinnern Sie sich, einen Film gesehen zu haben, in dem ein altes Foto über den Bildschirm geblitzt wurde und der Erzähler über etwas auf dem Bild spricht, während der Rahmen langsam zu diesem Thema schwenkt und zoomt?

Der Ken Burns-Effekt ist sehr beliebt geworden und das zu Recht, da er jeder langweiligen Website ein sofortiges Facelifting verleiht.

Halbkreisförmiges Navigationsmenü

Sie müssen nicht alles tun, um das Aussehen Ihrer Website zu ändern. Manchmal kann so wenig helfen, wie die Option der alten und langweiligen Männer abzuschaffen.

Entscheiden Sie sich stattdessen für eine stilvolle kreisförmige oder halbkreisförmige Navigationsoption, die hilft, eine Reihe von Menüoptionen zu präsentieren. Einige Designer integrieren dies nur für Schaltflächen zum Teilen in sozialen Medien, aber Sie werden von seiner Vielseitigkeit überrascht sein.

Von den offensichtlichen Musikkonsolen- und Social-Media-Sharing-Symbolen bis hin zu den primären Menü- und Profilsymbolen gibt es viele Möglichkeiten, dies zu nutzen.

Möchten Sie sich nicht den Kopf zerbrechen, um diesen CSS3-Effekt von Grund auf neu zu erstellen? Holen Sie sich eines als Freebie von DealFuel.

Anmeldefenster anzeigen/ausblenden

Heutzutage werden häufig verschiebbare Bedienfelder verwendet, aber das dient hauptsächlich dazu, die Belastung durch zu viele Registerkarten zu verringern. Nicht genug Designer experimentieren mit dem Potenzial dieser Option, denn Schiebewände können in vielerlei Hinsicht vorteilhaft sein.

Präsentieren Sie Inhaltsthemen, schaffen Sie einen aufgeräumten Look, verbessern Sie die Ästhetik oder unterscheiden Sie sich einfach von herkömmlich gestalteten Websites. Das Login-Panel Show/Hide ist ein Muss für jede WordPress-Website, es gibt einen Überblick über das Dashboard mit mehreren Menüoptionen, sobald Sie sich anmelden. Erfahren Sie hier mehr über dieses Panel .

Slider-Anmeldeformular

Eine weitere Login-Panel-Option, die gleitet, um mehr Inhalt anzuzeigen, ist ein großartiger Schachzug, wenn Sie möchten, dass Abonnenten etwas mehr Informationen als nur E-Mail-Adresse und Namen eingeben, sie aber gleichzeitig nicht überfordern möchten.

Wenn Sie auch Platz sparen, sollten Sie sich dies auf jeden Fall ansehen, da es sich als nützlich erweisen würde, wenn Sie Websites mit minimalistischen Themen erstellen.

3D-Bänder und 3D-Effekte

Wenn Sie immer noch vom Parallax-Effekt eingeschüchtert sind und befürchten, dass Sie etwas vermasseln könnten, fangen Sie klein an. Verwenden Sie 3D-Bänder, verschiedene Schattierungen und Schatten, um auf Ihrer Website eine allgemeine Illusion von Tiefe zu erzeugen und so einen 3D-Effekt zu erzeugen.

Die 3D-Bänder an sich sehen absolut fantastisch aus. Verwenden Sie dies, um einen Teil der Website oder auf einem offiziellen Zertifizierungsdokument hervorzuheben, das Sie aufhängen möchten. Dies würde die visuelle Gesamtattraktivität der Seite erhöhen.

Wissen, wie man den Effekt mit CSS3 auf pvmgarage erzeugt .

Coverflow-Effekt

Vorwiegend auf buchbasierten Websites verwendet, haben Sie diesen Effekt definitiv auf Ihrem Mac oder Apple-Gerät beim Durchsuchen von Bildern gesehen. Der Coverflow-Effekt zeigt eine Reihe von Elementen – wie Buchcover – an, bei denen Sie dann entweder nach links oder rechts wischen können, um das Cover anzuzeigen, einige Popup-Details zu erhalten und sie auszuwählen.

Klingt das interessant? Sie möchten dies in einem Projekt umsetzen? Wenn ja, dann stöbern Sie unbedingt in diesem Stück.

CSS3-Übergänge

Designer, die eher schlau als hart spielen, wissen, dass es nicht viel braucht, um Mojo zu Ihrer Website hinzuzufügen, eine Änderung des Themas hier, ein paar Schatten- und Schattenelemente dort, und Sie können Ihre Seite tatsächlich umgestalten. Eine andere Möglichkeit, dies zu tun, besteht darin, den Seiteninhalt durch CSS3-Übergänge zu animieren.

Spielen Sie vom Buchstabenabstand bis zum Textschatten herum, um zu sehen, was am besten zu Ihnen passt. Außerdem gibt es hier ein tolles Freebie mit einer umfassenden Auswahl an Übergangseffekten.

CSS3-Animation zum Thema Schnee

Immer noch in den Nachwirkungen der Weihnachtszeit? CSS3-Animationen zum Thema Schnee haben nicht nur einen festlichen Touch, sondern funktionieren auch bemerkenswert gut für bestimmte Websites wie die einer Eismarke.

Es ist schnell und einfach zu verwenden und kann das Aussehen Ihrer Website oder Blog-Seite ändern, um ein Thema oder eine Saison zu ergänzen.

Animation

Animationen können Wunder für Websites bewirken, auch wenn sie subtil gemacht sind. Es erregt Aufmerksamkeit und hilft auch bei Conversions, da die Aufmerksamkeit auf den Aufruf zum Handeln gelenkt wird.

Oder einfach, es erhöht den Nennwert einer Seite, wenn nichts anderes. Hier sind einige großartige spezielle Animationseffekte, die Sie sich ansehen können.

Letterpress-Effekt

Sie haben wahrscheinlich diese Instagram-Zitatposts mit dem geprägten Text-Look gesehen? So sieht der Letterpress-Effekt aus und wird auch im Webdesign immer beliebter.

Dies fühlt sich zwar wie eine umgekehrte Schreibmaschine an, aber es zeigt ein elegantes und schlankes Aussehen. Auf jeden Fall empfehlenswert, wenn es sich bei Ihrer um eine Online-Publikation oder einen Blog handelt. Auch wenn Sie einen Hauch von Professionalität einbringen möchten, ohne in die C-Suite zu gehen, wäre dies hilfreich. Hier ist ein Tutorial, wie Sie den Letterpress-Effekt mit CSS3 verwenden können .

Umdrehender Kreis

Eine kleine Info kann nicht nur niemandem schaden, sondern könnte auch der USP der Website sein. Eine Website wie die, die bei jeder Aktualisierung zufällige Fakten auswirft, könnte in eine Art Galerie mit Bildern mit einem kleinen Griff eingearbeitet werden, die sich beim Anklicken öffnen, um einige lustige Kleinigkeiten zu zeigen.

Aber auch auf normalen Websites ist ein Flip-Circle von großer Bedeutung. Es komprimiert Informationen, sodass Sie keine Seite voller Text haben. Und es hat auch ein cooles 3D-Feeling. Hier ist ein Tutorial, wie man einen Spiegelkreis erstellt.

Mega-Menü

Sie haben sie wahrscheinlich schon auf E-Commerce-Websites gesehen, wo viele Kategorien direkt auf der Zielseite platziert werden müssen, ohne jedoch eine überfüllte Menüleiste zu erstellen.

Die Mega-Menü-Option ist auch ein Muss für die Bildungsbranche, haben Sie eine Universitäts-Website, die alle wichtigen Kurse, Zulassungsinformationen und Studentenergebnisse und vieles mehr präsentiert?

Das Mega-Menü kann helfen, Ordnung zu schaffen, eine schärfere, schlankere Menüleistenoption zu erstellen und die Leser nicht zu verwirren, weil sie aufgrund längerer, stickiger Menüoptionen auf die falsche Option klicken. Sie können auch viel punkten, indem Sie sich kostenlos das reaktionsschnelle Mega-Menü holen.

Akkordeon-Galerie

Es gibt zwei Möglichkeiten, die Leser auf Ihrer Website zu halten, leistungsstarke Inhalte zu präsentieren und ihre Aufmerksamkeit auf diese leistungsstarken Inhalte zu lenken. Eine statische Seite mag die Aufmerksamkeit des Lesers auf sich ziehen, aber etwas Interaktives wie eine Akkordeon-Galerie wird die Aufmerksamkeit des Lesers auf sich ziehen.

Akkordeon-Galerien – egal, ob Sie Ihr bestes Portfoliostück präsentieren oder Aufmerksamkeit auf Ihr meistverkauftes Produkt lenken – funktionieren immer. Sie haben nur 6 Sekunden, um die Aufmerksamkeit des Lesers zu gewinnen und ihn auf der Seite zu halten. Verwenden Sie die Accordion-Galerie, um seine Aufmerksamkeit viel länger auf Ihre Website zu lenken und zu halten. Hier ist ein großartiges anpassbares Akkordeon-Galerie-Plugin, das Sie kostenlos herunterladen können.

Leuchtkasten

Wie wichtig ist eine Grid-Galerie? Wenn Sie Fotograf, Künstler oder einfach nur Blogger sind, könnte dies Ihren nächsten großen Auftritt bedeuten.

Eine Rastergalerie stellt all Ihre besten Stücke direkt zur Schau! Von der atemberaubenden Aufnahme des Sonnenuntergangs auf einem Hügel bis hin zu diesem intensiven Straßenporträt, wow sie, sagen Sie es ihnen oder verlocken Sie sie einfach, einen Vertrag zu gewinnen, eine Gittergalerie könnte Ihr bester Lebenslauf sein.

Als Designer sollten Sie dies nicht nur für die Arbeit Ihrer Kunden, sondern auch für Ihre eigene Website berücksichtigen. Machen Sie Ihre Arbeit zum Meister und bürgen Sie für Ihr kreatives Können, eine Grid-Galerie ist Gold wert.

Aber Sie bekommen es in diesem Deal umsonst, also schnappen Sie es sich jetzt!

Welche davon würden Sie einem Freund empfehlen?