Dank mobiler Bildbearbeitungs-Apps wie Instagram scheint der faux Tilt Shift-Fad auf seinem Höhepunkt zu sein. Aber warum sollten wir iPhones den ganzen Spaß haben lassen? Lassen Sie uns mit reinem CSS einen Tilt-Shift-Effekt ausschalten.
In diesem Lernprogramm erfahren Sie alles über die neuen CSS-Filter in Webkit und die Implementierung einer Bildmaske in CSS. Wir verwenden diese Techniken dann für unseren endgültigen Tilt-Shift-Effekt. Wir werden alle möglichen verrückten Sachen ausprobieren, also lesen Sie weiter und wir werden ein bisschen Spaß haben.
Vorgeschmack
Möchten Sie sehen, was wir bauen? Springe voraus und schau dir die Demo an, dann komm zurück und schau, wie du das selbst machst.
Demo: Klicken Sie hier, um zu starten.
Treffen Sie Webkit-Filter
In den letzten Jahren hat CSS langsam die Bereiche übernommen, für die wir uns früher für Photoshop entschieden haben: Farbverläufe, abgerundete Ecken, Schatten usw. In letzter Zeit hat Webkit mit der Einführung von CSS einen großen Schritt nach vorne gemacht Bildfilter.
Was wäre, wenn Sie mit reinem CSS die Sättigung, den Kontrast oder sogar die Unschärfe eines Bildes ändern könnten? Die Möglichkeiten wären fantastisch. Bereiten Sie sich vor, denn genau das können Sie mit einer kurzen Codezeile.
Starter Image
Wir brauchen ein Bild, um alle Techniken zu zeigen, mit denen wir spielen werden, also habe ich mir die New Yorker Luftaufnahme vom Fotografen Nathan Siemers vorgenommen.
Helligkeit
Die Helligkeit kann entweder einen Prozentsatz (10%) oder eine Dezimalzahl (0,1) annehmen. Null ist gleich der normalen Helligkeit, so dass 5% die Helligkeit erhöht und -5% das Bild tatsächlich verdunkeln.
Verwischen
Der Unschärfefilter akzeptiert einen Pixelwert, der der Unschärfe eines Kästchenschattens ähnelt. Je höher der Pixelwert, desto stärker ist die Unschärfe.
Kontrast
Der Kontrast akzeptiert einen prozentualen Wert. 100% ist normal, alles, was darüber hinaus einen Kontrast hinzufügt, alles, was darunter liegt, verringert den Kontrast.
Graustufen
Mit Graustufen können Sie ein Bild schrittweise mit Prozentsätzen entsättigen. 0% ist Vollfarbe, 100% ist Graustufen. Das Beispiel unten zeigt unser Image bei 50%.
Farbton drehen
Mit Farbton drehen können Sie den Farbton durch die Metapher eines Farbrads verschieben. Sie stellen die Drehung in Grad ein, wobei Null der normale, nicht angepasste Wert ist.
Umkehren
Funktioniert genau wie es klingt, akzeptiert einen Prozentsatz von Null (Standard) bis 100%;
Sepia
Schwarz und Weiß tun es nicht für dich? Fügen Sie mit dem Sepia-Filter etwas Alter hinzu. Null Prozent enthält keinen Effekt, 100% sind volle Leistung.
Browser-Unterstützung
Derzeit werden CSS3-Filter nicht viel unterstützt. Laut CanIUse sollten sie in Chrome, Safari 6, iOS Safari 6 und Blackberry Browser 10 funktionieren. Für alle diese Optionen ist das? -Webkit? Präfix, aber für die Zukunftssicherung möchten Sie vielleicht die anderen hinzufügen:
Schritt 1: Tilt Shift HTML
Nun, da wir wissen, welche CSS-Filter für uns verfügbar sind, können wir mit der Erstellung unserer Tilt-Shift-Demo beginnen. Legen Sie zunächst den folgenden HTML-Code in Ihrem bevorzugten Code-Editor an:
Sehen Sie es in Aktion
Das ist alles dazu! Wir haben jetzt einen schönen kleinen reinen CSS-Tilt-Shift-Effekt. Schauen Sie sich die Live-Version in der Demo unten an.
Demo: Klicken Sie hier, um zu starten.
tiltShift.js
Die talentierten Entwickler Noel Tock und Adam Yanalunas haben ein einfach zu verwendendes jQuery-Plugin entwickelt, mit dem Sie CSS-Filter verwenden können, um einen ähnlichen Tilt-Shift-Effekt zu erzeugen. Laden Sie tiltShift.js herunter und probieren Sie es aus.
Fazit: Warum die Mühe machen?
Tutorials wie dieses werfen immer eine große Frage auf: Sollten wir nur Webkit-Eigenschaften in professionellen Entwicklungsworkflows verwenden? Die Antwort ist immer die gleiche: nein. Dies ist ein Experiment, ein unterhaltsamer Weg, um die Möglichkeiten für die Zukunft von CSS kennenzulernen. Eines Tages könnten CSS-Filter eine Standardfunktion sein. Im Moment sind sie nur eine Idee.
Das Traurige ist, dass so viele Entwickler solche Dinge vollständig abschreiben, bis sie einen offiziellen Status erreicht haben. Als Mitglied der Webentwicklungs-Community sollten Sie potenzielle neue Funktionen ausprobieren, um zu sehen, wie sie implementiert werden, und Ihre Meinung zu äußern. Selbst wenn Sie sich wie eine unwichtige Stimme fühlen, denken Sie daran, dass Ihre Meinung von Bedeutung ist und Sie Teil eines größeren Ganzen sind, das die Zukunft des Webs beeinflussen kann und kann.
Was halten Sie von CSS-Filtern? Hinterlasse einen Kommentar und lass es mich wissen. Ich persönlich denke, dass sie eine tolle Zeit sind und zu vielen coolen Projekten führen könnten. Sollte das alles wirklich mit CSS gemacht werden? Du sagst es mir.