28 herausragende Beispiele für CSS
Es ist erstaunlich, was heutzutage mit CSS gemacht werden kann. Die neuesten CSS3-Eigenschaften werden in den neuesten Versionen aller gängigen Browser - auch im Internet Explorer - und in den Möglichkeiten für Typografie und Animation stark unterstützt und Interaktivität waren noch nie so groß. Es kann jedoch schwierig sein, Inspiration für das Webdesign zu finden.
Im Kern geht es beim Geheimnis einer großartigen Website nicht darum, sich mit raffinierten Grafiken und Whiz-Bang-Funktionen zu präsentieren, sondern darin, den Benutzern durch ein Layout und eine Navigation eine großartige Erfahrung zu bieten, die sie dahin führt, wo sie schnell und mühelos hingehen möchten. Das heißt, wenn es auch schön aussehen kann, ist das das i-Tüpfelchen.
Hier finden Sie 28 großartige Beispiele für CSS-Websites, die eine Fülle von Inspirationen für das Webdesign liefern. CSS eignet sich auch hervorragend, um Ihren Websites Bewegung zu verleihen. Schauen Sie sich unseren Leitfaden an Beispiele für CSS-Animationen und wie man sie für einige Zeiger neu erstellt.
01. Typ Begriffe
Type Terms ist ein animiertes Cheatsheet, das vom Team von Supremo, einer Webdesign-Agentur in Manchester, erstellt wurde. Nach einigen Recherchen stellten sie fest, dass die meisten vorhandenen Online-Informationen zur typografischen Terminologie einfache, statische Bilder verwendeten. Das Team suchte nach einem Grund, mit SVG- und CSS-Animationen zu experimentieren, und dies war die perfekte Gelegenheit.
'Ich habe mich für etwas entschieden, das visuell ansprechender ist und neuen Designern hilft, alle wichtigen typografischen Begriffe sofort zu lernen', sagt Designer Dan Heywood.
Das Team betont, wie wichtig es ist, dass Designer die Typografie gut verstehen. Für diejenigen, die zum ersten Mal die Regeln lernen, oder für erfahrene Designer, die eine Auffrischung benötigen, ist dieses Cheatsheet sowohl lehrreich als auch eine Freude zu erkunden. Der Inhalt ist fokussiert, die Informationen sind klar und die Animationen sind seidenweich. Schauen Sie sich das an und beeindrucken Sie Ihre Designerfreunde mit Ihrem Typografie-Vokabular.
02. MIT Technology Review
Die MIT Technology Review, eine 117 Jahre alte Veröffentlichung, die Technologie auf eine Art und Weise behandelt, die jeder verstehen kann, wurde Anfang des Sommers vom Bostoner Designstudio Upstatement neu aufgelegt. 'Wir sind Superfans von Tech Review. Als Erik Pelletier [VP of Product] auf uns zukam, um an der Website zu arbeiten, waren wir aufgeregt', sagt Mike Swartz, Partner bei Upstatement.
Heutzutage ist es ungewöhnlich, dass die Website einer Publikation nicht so stark auf Bilder ausgerichtet ist. Daher ist es erfrischend, wenn Sie zum ersten Mal zum sauberen, scheinbar schweizerisch inspirierten Design von Tech Review navigieren. 'Wir wollten den Geist und die Seele von Tech Review mit dem Design-System der Website einfangen und eine Leinwand schaffen, die ihre Art Direktoren kreativ nutzen können', sagt Swartz. 'Der Kreativdirektor Tito Bottitta und der Designleiter Nathan Hass haben ein System entworfen, das exzellente Kunst präsentieren und eine Freude beim Lesen sein soll.'
Anstatt die Systemstandardversion von Helvetica zu verwenden, die wir heute alle kennen, bietet die Website Neue Haas Grotesk, die Originalversion von Helvetica, die das moderne Gefühl wirklich fördert. Gepaart mit Miller Text für die Körperkopie wirkt die Typografie klassisch und doch zeitgemäß. Die Verwendung von Bildern ist nachdenklich, bewusst und lässt die Typografie strahlen.
03. BucketListly
BucketListly ist eine Community, die Benutzern dabei helfen soll, Erfolge im wirklichen Leben freizuschalten und andere dazu zu inspirieren, dasselbe zu tun. Die Plattform wurde mit Ruby on Rails mit HTML5, SCSS, CoffeeScript und jQuery erstellt und bietet Reisenden und Abenteurern die Möglichkeit, ihre Geschichten mit ihren Freunden auf der Website sowie mit ihren verbundenen sozialen Netzwerken zu teilen.
Wenn ein Benutzer eine Geschichte auf BucketListly teilt, verfolgt die Plattform automatisch, was, wann und wo er dieses Lebensziel erreicht hat, sodass er spezielle Abzeichen verdient und all diese Daten in einer schönen Zeitleiste und Karte anzeigt.
04. 96 Elefanten
Die in den USA ansässigen Viget Labs haben ein bewusstseinsorientiertes Web-Erlebnis geschaffen, um Unterstützung für die Mission der Wildlife Conservation Society zum Schutz afrikanischer Elefanten zu gewinnen. Die jüngste Kampagne ist 96 Elefanten, so genannt, weil in Afrika jeden Tag so viele Elefanten getötet werden.
Die pädagogische Erzählung wird in einer Reihe von einseitigen Kapiteln erzählt, in denen jeweils die sehr realen Komplikationen aufgeführt sind, die bei den laufenden Bemühungen zur Beendigung des illegalen Akts, Elefanten für ihre Stoßzähne zu töten, eine Rolle spielen. Trotz des primären Ziels, Anmeldungen für eine Petition zu tätigen, hat das Viget-Team die Unmittelbarkeit, die der allgegenwärtige Aufruf zum Handeln darstellt, kunstvoll gegen den emotional überzeugenderen, geschichtengetriebenen Inhalt abgewogen.
Front and Center ist die eindringliche Kunstrichtung, die Sie dazu zwingt, anzuhalten und sich der emotionalen Mission zu stellen. Die schöne, randlose Fotografie und das magazinartige Layout machten es zu einer Herausforderung, es reaktionsschnell zu gestalten. Anstatt mit dem Desktop zu beginnen, wurde die Site zuerst mobil erstellt. Dadurch konnten die Entwurfsentscheidungen für kleine Bildschirme gezielt berücksichtigt werden, anstatt als verwässerter Proxy für die Desktop-Erfahrung zu fungieren.
05. Datensätze zusammenführen
Mit Bands wie Arcade Fire, Superchunk und The Mountain Goats auf der Liste suchte Merge Records in Durham, North Carolina, nach einem lokalen digitalen Partner Newfangled ein erstklassiges E-Commerce-Erlebnis aufzubauen, das der Qualität seiner Künstler entspricht.
Die Site basiert auf NewfangledCMS, Newfangleds proprietärem PHP-basierten CMS mit HTML5 und CSS3, und reagiert hervorragend auf unterschiedliche Gerätegrößen. Das neue System ist jetzt automatisiert, um sicherzustellen, dass alle Assets des Labels zentral verwaltet und verfügbar sind. Chris Butler, COO von Newfangled, sagt:
„Wenn ein Produkt hinzugefügt wird, müssen wir herausfinden, wie dies einem physischen Inventar entspricht, das sich in einer anderen Datenbank befindet, und wie es ein digitales Inventar berücksichtigt, das sich in einem anderen System befindet. Wir mussten diese Logistik herausfinden. ' Bei zahlreichen unterschiedlichen Datenbankaufrufen auf jeder Seite war die Reihenfolge der Priorität der Daten wichtig, um die richtigen Ergebnisse zu erzielen.
06. Gesandte
Gesandte , ein Produkt, das sich auf die Registrierung von Besuchern in Ihrem Büro konzentriert, bietet eine elegante iPad-basierte Oberfläche zum Sammeln von Namen, Erfassen von Unterschriften und Drucken von Besucherausweisen vor Ort. Für die Website, auf der die App beworben wird, bestand das Hauptziel darin, unseren Kunden zu ermöglichen, zu visualisieren, wie ihre eigenen Besucher Envoy in ihren Büros erleben können, erklärt Mitbegründer und Designer Vítor Lourenço. 'Wir haben beschlossen, dass eine interaktive Demo die visuell ansprechendste Möglichkeit ist, dies zu demonstrieren.'
Um dies zu erreichen, zeigt die Site die Funktionalität und den Bildschirmstatus der App auf einem iPad-Modell an. Während Sie durch die einseitige Site scrollen, werden die Status in der Demo aktualisiert. CSS-Übergänge helfen bei der Demonstration und verbessern die Erfahrung, ohne den Inhalt zu beeinträchtigen.
'Wir haben viele Stunden an winzigen Details gearbeitet', fügt Mitbegründer und Ingenieur Larry Gadea hinzu. 'Wir lieben die Art und Weise, wie sich die Unterschrift des Besuchers selbst zeichnet, wenn Sie über den NDA-Bildschirm scrollen, oder wie der Besucherausweis am Ende des Flusses gedruckt wird.'
07. Mehr Schlaf
Mehr Schlaf , eine Kreativagentur aus Berlin, hat eine mutige Seite. „Unser Ziel war es, drei Projekte vorzustellen, die unser Fachwissen repräsentieren, anstatt alle bisher geleisteten Arbeiten zu zeigen“, sagt der technische Direktor Torsten Bergler.
Große Schriftgrößenwerte, ordentliche Bildlaufeffekte und ein rotes, kontrastreiches Farbschema zeichnen diese Site aus. „Einzigartig ist die Präsentation der Arbeit: Visualisierung des Projektprozesses, Führung der Besucher und Erzählen einer Geschichte über die von uns geleistete Arbeit“, sagt Stefan Schuster, Leiter der Art Direktion.
CSS Übergänge erleichtern das Navigieren durch Seiten und Inhalte. Eigenschaften für die Hintergrundgröße werden verwendet, um die Skalierung von Bildern in verschiedenen Größen zu steuern. Sogar das Newsletter-Anmeldeformular ist so gestaltet, dass es dem sauberen Erscheinungsbild entspricht.
08. Dankbare Registrierung
Dankbare Registrierung ermöglicht es Paaren, eine einzigartige, personalisierte Hochzeitsliste aus allen Geschenken zu erstellen, die sie von überall im Internet wünschen. Die Seite wurde erstellt von Crush + Lovely ;; Jeff Schram und Michael Phillips vom Frontend-Team wollten, dass das CSS so schön ist wie das Design. Sie nahmen sich Zeit, um ihre SCSS-Struktur für diese Anwendung sorgfältig zu planen.
'In einer Umgebung mit mehreren Entwicklern ist es wichtig, dass der Code organisiert, leicht zu durchlaufen und gründlich kommentiert wird', erklärt Phillips. Die harte Arbeit zeigt sich in der Ästhetik der Site mit starker Typografie und großen, kraftvollen Bildern. Das Team wollte diese in keinem Ansichtsfenster verdecken und riskieren, ihre Bedeutung zu verlieren.
'Wir haben ein reaktionsfähiges System erstellt, das über die gesamte Seite gleitet, um die wichtigsten Navigationsoptionen anzuzeigen. Dies ermöglichte es uns, uns auf die wunderschönen Bilder zu konzentrieren und den Benutzern ein einzigartiges Reaktionserlebnis zu bieten “, sagt Schram.
09. Leben in meinen Schuhen
Life In My Shoes ist eine leistungsstarke Multi-Plattform-Kampagne
junge Menschen, die die Angst und das Missverständnis im Zusammenhang mit HIV in Frage stellen. Digitalagentur mit Sitz in London Der Verkehr wurde mit der Entwicklung einer Website beauftragt, die ein jugendliches Publikum ansprechen würde.
Die Markenschrift Houshka Rounded Medium wurde mithilfe von Schriftarten implementiert, um der Website ein frisches Erscheinungsbild zu verleihen. Dekorative Bilder und dramatische gelbe Akzente sorgen für eine verführerische Ästhetik.
Die Seite 'Über uns' bietet einen lebhaften Parallaxeeffekt, der für Tablets und Smartphones angepasst wurde. 'Wir haben für diese Geräte eine Medienabfrage geschrieben, bei der der Hintergrundanhang von' Fest 'in' Bildlauf 'geändert und die einzelnen Hintergrundpositionen so festgelegt werden, dass die Bilder an der richtigen Stelle sitzen', erklärte das Verkehrsteam.
10. Nur
Solo ist ein All-in-One-Projektmanagement-Tool, das auf die Verwendung durch Freiberufler ausgerichtet ist. Die Anwendung ist kostengünstig und einfach zu bedienen und kombiniert hervorragende Funktionalität, Benutzerfreundlichkeit und schönes Design.
Die Website, auf der für das Produkt geworben wird, ist voll von CSS3-Attraktivität. 'Ich habe mich für HTML5 und CSS3 aus dem Offset entschieden und bin nur für moderne Webbrowser geeignet', erklärt er Jerome Iveson , Designer der App. 'Nur drei Prozent der Besucher unserer Website nutzen den Internet Explorer. Da unser Zielmarkt es nicht zu nutzen scheint, gab es für Solo kaum einen Grund, es zu unterstützen. '
Sie werden diese CSS-Regeln in diesem Design in Aktion sehen, wodurch das Projektmanagement mit einer Vielzahl von farbenfrohen CSS-Box-Schatten spielerischer wird. Schriftarten wie Clarendon und Bryant bieten eine gute Balance zwischen Raffinesse und Spaß.
Wenn Sie die Größe der Website ändern oder sie auf einem Mobiltelefon anzeigen, können Sie sehen, wie sich das Layout an verschiedene Bildschirmgrößen und Auflösungen anpasst. „Ich habe es sehr gemocht, mich auf die Seite der Medienabfragen einzulassen. Ich finde das aus gestalterischer Sicht sehr interessant “, sagt Iveson.
elf. Form folgt Funktion
Form folgt Funktion (FFF) ist eine wunderschön gestaltete Präsentation von HTML5- und CSS-Experimenten des koreanischen Entwicklers Jongmin Kim Wer arbeitet als interaktiver Entwickler bei Erstgeborene Multimedia in New York.
Kim erklärt, dass der Name seiner Website sein Ziel widerspiegelt, immer ein 'Minus-Design statt Plus-Design' zu verfolgen und zu berücksichtigen, dass die Form der Funktion folgt. Er sagt, sein Stil sei minimal und benutze das Goldener Schnitt sowie interessante Typografie. FFF wurde 'zum Spaß' gemacht und es dauerte drei Wochen, bis Kim es geschafft hatte, einschließlich seiner Ferien damit zu arbeiten.
12. Der sanft verrückte
Der sanft verrückte ist ein themenunabhängiger Podcast über Web-Ersteller. Adam Clark Der Geist dahinter trat von einem traditionellen Blog-Layout zurück, als er es entwarf, um etwas mit etwas mehr Wirkung zu schaffen.
Der große Header und die gut gestaltete Episodenliste vermitteln, dass dieses Design eine persönliche Note hat. Clark begann mit 'verrückteren' CSS3-Übergängen und Überblendungen, entfernte sie aber, erzählt er uns. 'Ich hatte das Gefühl, dass die von mir getroffenen Designentscheidungen (Farbe, Layout, Typografie) viel besser funktionierten, wenn ich sie alleine ließ', sagt er.
13. Amazee Labs
Erstellen neuer Websites und Community-Lösungen, Amazee Labs Bringen Sie Ihre Marke auf der Grundlage des modernen Open-Source-Frameworks Drupal in die Online-Welt. Mit Kompetenz und Vertrauen ist ihre eigene Website ein schönes Beispiel für CSS.
Es ist klar, dass die Website bereits Websites für Fernsehsender, digitale Agenturen, Wohltätigkeitsorganisationen und Unternehmen erstellt hat und fast alle beeindruckt hat. Wir konnten uns nicht mehr einigen.
14. A & W.
Die Gruppe bei Cornett IMS wollte eine Seite für A & W. Das war mehr als ein Logo, Burger und Root Beer.
'Unsere Liebe zu A & W hatte viel mit Erinnerungen zu tun, die in den Restaurants unserer Heimatstädte geteilt wurden. Deshalb wollten wir die Einzigartigkeit jedes Geschäfts überwinden und eine neue Generation von Fans mit ihrem lokalen A & W verbinden', erklärt David Coomer, Chief Creative Officer von the Zweck der Website.
Durch die Verwendung von @ font-face zur Bereitstellung von Metroscript- und Century Gothic-Schriftarten wird ein benutzerdefiniertes, unterhaltsames Schriftsystem erstellt. CSS-Rotationstransformationen werden für Kopfzeilentexte verwendet, um der Site ein unterhaltsames Druckmenü-Gefühl zu verleihen.
25. Nolowene Nowak
Webdesigner und Illustrator Nolowene Nowak hat ein unterhaltsames Online-Portfolio erstellt - ein großartiges Beispiel dafür, wie CSS brillant eingesetzt wird. Wenn Sie nach unten scrollen und den Abschnitt 'Zeitachse' auschecken, werden Sie feststellen, dass das CSS-gesteuerte Layout auf intelligente Weise Grundregeln zum Erstellen eines Moduls festlegt, das auf kleineren Bildschirmen von einem horizontalen zu einem vertikalen Layout wechselt.
Die Website ist genauso unterhaltsam wie das Erstellen: 'Es war eine wirklich reiche Erfahrung, die mir die Möglichkeit gab, etwas Einzigartiges zu erstellen, das einfach ich war', sagt der Entwickler Christophe Dumont . 'Wir wollten dem Besucher die gleiche Erfahrung bieten wie als Kind, als er ein neues Spielzeug entdeckte.'
Während der Entwicklung verwendete Dumont Zurb's Stiftung : Ein responsives CSS-Framework, das mit Sass erstellt wurde. 'Durch seine Unterstützung wird das reaktionsschnelle Design zum Leben erweckt', sagt er.
16. Caava Design
Design Studio Caava hat eine schöne neue Seite. Benutzer werden durch Hinweise auf Bildlaufanimationen und Parallaxenfunktionen angezogen, während der Schwerpunkt weiterhin auf dem Portfolio liegt. 'Wir haben versucht, ein frisches und einzigartiges lineares Erlebnis zu bieten, ohne die Menschen damit über den Kopf zu schlagen', erklärt Caava-Besitzer Cody Small.
Wenn Sie durch die Site scrollen, animieren Pfeile, die die verschiedenen Abschnitte miteinander verbinden, die obere und linke Position, um die Erfahrung zusammenzuhalten. 'Da wir viel animiertes Flare haben, hat es einige Zeit gedauert, bis es sich natürlich anfühlt und das Design unterstützt', sagt Entwickler Brandon Lavigne.
Die Pfeile sind im gesamten Design konsistent, z. B. beim Erkunden des Arbeitsbereichs. Bei genauerem Hinsehen werden Sie feststellen, dass sie mit CSS-Rahmen und -Transformationen erstellt wurden. Dies ist sehr ordentlich und nützlich, da Projekte unterschiedliche Farbschemata haben und die Pfeilfarben dann einfach mit den entsprechenden CSS-Eigenschaften geändert werden können.
17. Fitbit
Fitbit Erstellt Aktivitäts-Tracker und Skalen, um Aktivitäten aufzuzeichnen, den Schlaf zu überwachen und Ihr Körpergewicht und Fett zu dokumentieren. Diese Informationen werden drahtlos in Fitbit veröffentlicht, wo Benutzer Diagramme anzeigen, Ziele festlegen sowie ihre Fortschritte messen und mit anderen teilen können. 'Unsere Mission ist es, mithilfe von Technologie die Welt gesünder zu machen!' bemerkt Entwickler Biagio Azzarelli.
Das Site-Design ist hell und lebendig. Symbole und farbenfrohe Statistikgrafiken erwecken informative Schnipsel zum Leben, ohne die Benutzer zu langweilen. Das gut genutzte Raster sollte es in Zukunft einfach machen, den Standort in ein flüssiges Layout umzuwandeln.
Azzarelli sagt, er habe es genossen, die Website basierend auf Benutzeranalysen zu entwickeln. 'Da unsere Benutzer weiterhin Browser der Klasse A verwenden, können wir die unterhaltsamen Teile von CSS3 mit akzeptabler Verschlechterung in IE7 und 8 nutzen.'
18. Mammutbooth
Die in Detroit ansässigen Künstler von MammothReach wollte die radikalste Fotokabine schaffen, die die Welt gesehen hat und damit die MammothBooth Website wurde geboren.
'Wir wollten eine Website, die flüssig, sofort und unterhaltsam ist', erinnert sich Designer / Entwickler Nick Keebaugh, 'und genau so ist unser Stand. Alles in allem wollten wir auf der gesamten Website ein völlig individuelles Gefühl, das widerspiegelt, wer wir als Unternehmen sind und was unser Produkt im Kern tut. Die Website ist durch und durch die Online-Erweiterung des MammothBooth. '
MammothReach nutzte die Rotationstransformationseigenschaft mit einem großen spiralförmigen Burst-Bild, das sich ständig dreht. Unterhaltsame Inhalte werden eingeblendet, wenn Sie die verschiedenen Bereiche der Website mit animierten Stileigenschaften besuchen. Die verspielte Arvil Sans-Schrift passt hervorragend zur Ästhetik und ist als 'Name your Price' -Schrift von der erhältlich Lost Type Co-op .
19. Laborpartner
Das Kunst- und Designstudio Lab Partners, das vom Ehepaar Ryan Meis und Sarah Labieniec geleitet wird, hat eine farbenfrohe und dekorative Website gestartet, die eines der besten Beispiele für CSS ist.
Die Liebe zum Detail scheint für jede Seite durch. Der Arbeitsbereich verfügt über ein kuratiertes Layout, wodurch sich das Portfolio besonders originell anfühlt. Die Projektminiaturen haben einen großen Schwebebereich, der die Opazitätseigenschaft nutzt, indem er den Schwebezustand klar unterscheidet. Der Shop-Bereich wird auf dem Big Cartel-Warenkorb ausgeführt, fühlt sich jedoch wie ein integrierter Teil der Website an, auf den benutzerdefiniertes CSS angewendet wird.
'Das Web fühlt sich wirklich wie eine der ultimativen Kombinationen von Form und Funktionalität an', bemerkt Meis. Er erklärt weiter, dass es sowohl angenehm als auch herausfordernd war, ein Gleichgewicht zwischen beiden zu finden. 'Am Ende stellte sich heraus, dass jedes Problem eine Gelegenheit war, eine Lösung zu finden, an die ich ursprünglich nicht gedacht hatte.'
zwanzig. Pizza Brain
Beispiele für CSS werden nicht viel besser! Pizza Brain wurde von Brian Dwyer gegründet und ist das weltweit erste Pizzamuseum und Restaurant. Die Website bewirbt Pressemitteilungen und einen Blog, der den Fortschritt des Unternehmens beschreibt, und enthält das von Michael Almquist entworfene Branding.
Die Schriftarten Pacifico Regular und Bebas Neue werden mit einer warmen, pizzaähnlichen Farbpalette kombiniert, um eine freundliche Ästhetik zu schaffen, die leicht zu lesen ist und dennoch aufregend und unterhaltsam ist. 'Diese Orange ist wunderschön und bereitet wirklich die Bühne für den Inhalt', sagt der Entwickler Arjun Mehta.
Eine Vielzahl abgerundeter Ecken und Deckkrafteffekte runden diesen sauberen Look ab. „Jeder Beitrag in einem eigenen Inhaltsbereich mit abgerundeten Rechtecken zu haben, entlehnte sich tatsächlich der visuellen Sprache, die auf den Visitenkarten von Pizza Brain zu finden ist“, fügt Mehta hinzu. Die Website reagiert auch voll und ganz auf kleinere Layouts.
Eines der besten Beispiele für CSS in Aktion - und behalten Sie die Website im Auge, da weitere erwartet werden. 'Ich bin gespannt, wie die Website wachsen und weiter verfeinert und ausgebaut werden kann, wenn dieses erstaunliche Unternehmen im Laufe der Zeit realisiert wird', sagt Mehta.
einundzwanzig. Postbar
Postable richtet sich in erster Linie an Besucher, die Hochzeitseinladungen und Weihnachtskarten versenden möchten oder einfach nur ein Online-Adressbuch wünschen. Es bietet eine einfache Möglichkeit, Postanschriften zu erfassen.
'Postable sieht unglaublich verspielt aus, insbesondere für eine Webanwendung, und ich wollte diesen Designs treu bleiben', sagt Frontend-Entwickler Kevin Kneife. Von von Umschlägen inspirierten gestreiften Rändern über unterhaltsame Hintergrundtexturen bis hin zur robust gerundeten Omnes Pro-Schriftart macht das Sammeln von Adressen die Website sofort einfacher.
Überall werden lustige und nützliche Illustrationen verwendet. Abgerundete Ecken, Bänder und clevere Schwebezustände sorgen für ein unterhaltsames Engagement auf der Website. Dies ist eines der besten Beispiele für CSS-Transformationen, die wir gesehen haben. Sie werden verwendet, um den Rotationswert eines Hintergrundbilds zu aktualisieren und Benutzer in die Anweisungen zur einfachen Verwendung der Site einzubeziehen.
Nach dem Erstellen eines Kontos erfolgt das Hinzufügen eines Kontakts über ein einfach zu verwendendes Formular, das reine CSS-Auswahlfelder enthält, die Kneife vollständig erstellt hat. Er enthüllt: „Dies beinhaltete das Maskieren der Auswahlfelder auf den Formularen mit einem äußeren Div, das Hinzufügen von Transparenz und die Verwendung des Webkit-Erscheinungsbilds. Das Ergebnis ist eine Box, die in allen Browsern gut aussieht und sich elegant verschlechtert. '
22. Robby Leonardi
Das Haus des Designers Robby Leonardi bietet farbenfrohe Illustrationen und Cartoon-Stile, die der Arbeit eine fröhliche Persönlichkeit verleihen. Wie Leonardi es ausdrückt: 'Es ist immer gut, Menschen zum Lächeln zu bringen, und ich denke, diese Website wird genau das tun.'
Es ist eines der großartigen Beispiele für die Verwendung von CSS zur Erstellung beeindruckender Grafiken. Hintergrundbilder werden überlagert, um im Kopfbereich saubere horizontale Parallaxeeffekte zu erzielen. Auf der Seite werden CSS-Rotationstransformationen verwendet, um die Zahnräder an den Seiten des Anzeigebereichs zu bewegen. Portfolio-Stücke sind in Holzfenstern mit animierten Schwebeflügen eingerahmt.
Die Holzklötze wurden aus Leonardis Rendering von 3D-Modellen hergestellt. Er erklärt: „Ich habe alle diese Renderings zu einem einzigen Bild zusammengefasst und die Eigenschaft CSS left geändert, wenn der Benutzer die Seite scrollt. Es ist ziemlich überraschend, dass ein einfacher CSS-Trick einen so guten Effekt erzielen kann! '
2. 3. Libor Zezulka
Die einseitige Website von Libor Zezulka ist ein sauberes und cleveres persönliches Portfolio, das sich aus Farbverläufen zusammensetzt, die dank der intelligenten Verwendung von CSS-Textschatten zum Lesen einladen.
Hauptdesigner und Frontend-Entwickler Martin Pospisil von Madeo Ich habe es genossen, auf der Seite zu arbeiten. '[Wir hatten] die Freiheit, mit Design und Technologie zu spielen', erklärt er. Dies zeigt sich im Spaßfaktor der Seite. Das Design ist einfach und dennoch effektiv, da die Abschnitte klar unterscheidbar sind. Pospisil meint, dass 'die Kraft in den Symbolen und Farbkombinationen liegt'.
Eine weitere Besonderheit sind die Lightbox-Popups. Die Schaltflächen auf dieser Site sind durch die darunter liegende Schattenabbildung als umsetzbar gekennzeichnet. Die Schaltfläche zum Schließen ist etwas von der Box versetzt und bietet eine benutzerfreundliche Oberfläche.
3. 4. Emporium Pies
'Das Emporium Pies Website hat einen Job: Sie dazu zu bringen, mehr Kuchen zu essen “, sagte Kyle Turman, interaktiver Direktor bei Gießereikollektiv behauptet. Und Junge, sagt er die Wahrheit? Die gut gestaltete, reaktionsschnelle Website des in Dallas ansässigen Kuchen- und Coffeeshops macht hungrig. Sehr hungrig.
'Operations Director Paul Wilkes hat einige wirklich hervorragende Aufnahmen der Torten gemacht, und wir haben sie in der Hierarchie des Designs so weit wie möglich priorisiert', fährt Turman fort. 'Wir hielten es für wichtig, die Kuchen für sich selbst sprechen zu lassen und die Website nicht mit einer Tonne weitläufiger Kopien zu füllen.'
Überprüfen Sie die Hover-Effekte auf der Pies-Seite. Es verwendet CSS-3D-Transformationen in Kombination mit der Eigenschaft 'Sichtbarkeit der Rückseite' auf den Bildern der Torten, um den Namen und weitere Informationen zum Dessert anzuzeigen.
25. Zukunft des Carsharing
Future of Car Sharing, eine Zusammenarbeit zwischen Sonderfonds und Hyperakt mit Unterstützung von Startup America Partnerschaft ist vollgepackt mit Informationen über die immer beliebter werdende Alternative zum Autobesitz. Diese charmante horizontale Bildlaufseite erleichtert das Entschlüsseln der Unterschiede zwischen Peer-to-Peer-, Business-to-Consumer- und Non-Profit-Carsharing.
'Von Anfang an wurde beschlossen, dieses Stück so weit wie möglich voranzutreiben', rät Simon Corry, Informationsarchitekt bei Hyperakt. 'Dies bedeutete, dass, während wir nach Möglichkeit Abwärtskompatibilität für ältere Browser bereitstellten, der Schwerpunkt auf dem Testen der Grenzen der CSS3-Eigenschaften lag. Ich war schon immer ein Fan von Videospielen und mit der aktuellen Browserunterstützung für CSS3 konnte ich diese Ebene der Animation und des Engineerings über das CSS genießen.
'Die Schönheit von CSS3 liegt in seiner Einfachheit, die es zu einer perfekten Sprache für jeden Kreativen macht', sagt Corry.
26. Leben in Greenville
Das Leben in Greenville befasst sich mit dem Leben und Arbeiten in Greenville, South Carolina. 'Wir alle bei Mitarbeit Ich liebe Greenville und wollte eine Website erstellen, die den Leuten hilft, zu verstehen, warum “, sagt der leitende Entwickler Sean Gaffney.
Die Website begrüßt Sie mit einer Kulturista-Schrift in einer aufmerksamkeitsstarken Schriftgröße von 53 Pixel über einem reaktionsschnellen Heldenbild in voller Breite. Das klare Design hält Sie in Atem und möchte mit den leicht zugänglichen Inhalten mehr lernen. Das leicht animierte Logo auf dem Schwebeflug sorgt ebenfalls für Freude.
Das Team nutzte die Skeleton Boilerplate, um die Stile zu entwickeln. 'Skeleton bietet einen wirklich schönen Basissatz an Breiten zum Entwerfen. Es ging also nur darum, ein paar Elemente im Layout für jede Bildschirmgröße zu optimieren', sagt Gaffney.
27. Wahre Fischgeschichten
Wahre Fischgeschichten Es spielt mit der Idee, dass Fischer berühmt dafür sind, große Geschichten zu erzählen, indem sie einige erstaunliche „wahre Geschichten“ der Monster zusammenbringen, die unter dem Meer lauern. Das Besondere ist die reibungslose und benutzerfreundliche Interaktivität, die das Entdecken von Inhalten zu einer unterhaltsamen und unterhaltsamen Erfahrung macht.
Die Infografik wurde von zusammengestellt Brian Maier und Mark Shelton von Kentucky Agentur DBS> Interaktiv im Rahmen der laufenden Bemühungen, neue Inhalte hinzuzufügen United Marine Webseite.
Maier und Shelton verwendeten eine Kombination aus CSS3 und JavaScript, um die Infografik zu erstellen. 'Viele der Animationen und Grafiken werden mit CSS3 verarbeitet', erklärt Lewis. 'An einigen Stellen wurde jedoch JavaScript verwendet, um ältere Browser zu unterstützen, die diese Technologie noch nicht unterstützen.'
28. Station vier
Webagentur Station vier hat einen Rebranding-Prozess durchlaufen und eine neue Website entworfen, um ihre Persönlichkeit und Marke zu verbessern. 'Wir haben mit der Konzeption der neuen Website begonnen, um potenziellen Kunden zu zeigen, was wir tun können, ohne ihnen zu sagen', erklärt Christopher Olberding, Creative Director und Mitinhaber von Station Four.
Infolgedessen verwendet die neue Homepage ein großes Arbeitsbanner, um die neuesten Arbeiten von Station Four zu präsentieren.
Die Seite 'Expertise' hat ein interessantes Navigationsdesign: Sie verwendet Bilder mit großen Kreisen als Links. Diese nutzen die Eigenschaften des Rahmenradius, um das Aussehen zu erzielen, und wenden auch Animationen auf sie an.
Haben wir Ihr Lieblingsbeispiel für CSS in Aktion verpasst? Lass es uns in den Kommentaren unten wissen!
Mitwirkende :: Chris Cashdollar und Rich Clark
Diese Bewertungen wurden ursprünglich in veröffentlicht Netzmagazin , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler.
