4 Spaß CSS-Bildeffekte, die Sie kopieren und einfügen können

Früher haben wir uns ausschließlich auf Photoshop verlassen, um ausgefallene Bildeffekte zu erzeugen. Heutzutage wenden wir uns jedoch mehr und mehr dem reinen CSS zu, um unseren Bildern eine Augenweide zu verleihen. Durch die Anwendung benutzerdefinierter Bildbearbeitungen mithilfe von Code wird ein unendlich flexibler Arbeitsablauf ermöglicht, der jederzeit leicht angepasst werden kann.

Heute werde ich Sie durch einige sehr einfache und unterhaltsame CSS-Bildtricks führen. Von Polaroiden bis zu Vignetten können Sie nicht glauben, was wir schaffen können.

Polaroid

Demo: Klicken Sie hier, um die Demo zu Tinkerbin anzusehen.

Unser erster Image-Trick ist eine einfache Polaroidtechnik. Durch die Verwendung verschiedener Randgrößen können wir leicht den weißen Rahmen erstellen, der den beliebten Instant-Fotostil von vor einigen Jahrzehnten umgibt.

Zugegeben, dieser Effekt ist sehr kitschig, aber ich bin mir sicher, dass Sie eine anständige Anwendung finden können.

HTML

Unser HTML-Code für diesen Effekt ist ein div mit der Klasse "Polaroid". angewendet. Dann verwenden wir sowohl einen Absatz als auch ein Bild für unser Kernmarkup. Ich werde ein 200px von 200px-Bild verwenden (das ist wichtig).

<p>Sarah, Dezember '02</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/4-fun-css-image-effects-you-can-copy-and-paste_2.jpg"> <p><strong>Demo:</strong> Klicken Sie hier, um die Demo zu Tinkerbin anzusehen.</p> <p>Es gibt mehrere Möglichkeiten, wie Sie mit CSS mehrere Ränder ziehen können. Eine der einfachsten und beliebtesten Methoden, diesen Trick auszuführen, ist die Tatsache, dass Box-Shadows gestapelt werden können, dh Sie können beliebig viele Schatten auf ein einzelnes Element anwenden. Wenn Sie dies tun, während Sie die Unschärfe auf Null setzen, sieht das Ergebnis wie mehrere Ränder aus! Beachten Sie jedoch, dass Box-Shadows rein visuell sind und sich nicht wie Ränder auf Ihr Layout auswirken (was in manchen Fällen die Arbeit erleichtern kann).</p> <h3>HTML</h3> <p>Wir brauchen nicht viel HTML für dieses Beispiel. Tatsächlich ist das div nur vorhanden, sodass Sie dem Container auch andere Elemente hinzufügen können. Wenn Sie nur ein einzelnes Bild verwenden, können Sie das div einfach ausrangieren und die Klasse direkt auf das Bild anwenden (oder möglicherweise ein li verwenden, wenn Sie eine Galerie erstellen). </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/4-fun-css-image-effects-you-can-copy-and-paste_3.jpg"> <p>Um einen weiteren Schatten hinzuzufügen, müssen wir nur ein Komma einfügen, die Syntax wiederholen und die Werte leicht anpassen. Diesmal habe ich einen 5px-Aufstrich (schwarz) verwendet, gefolgt von einem 10px-Aufstrich (weiß).</p> <textarea wrap="soft" readonly=""> .multiple-border {box-shadow: 0px 0px 0px 5px # 000, 0px 0px 0px 10px #fff; }

Das Ergebnis sollte wie zwei 5px-Ränder aussehen, eine schwarze und eine weiße.

CSS

Jetzt, wo Sie wissen, wie Schatten funktionieren, ist es an der Zeit, unser aktuelles CSS zu implementieren. Der wirkliche Scherz ist, dass wir drei verschiedene Versionen davon verwenden müssen, aber wir möchten auf jeden Fall sicherstellen, dass alle möglichen Browser abgedeckt sind.

.multiple-border {-webkit-box-shadow: 0px 0px 0px 2px rgba (0,0,0,0,6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba (0,0,0,0,2), 6px 6px 8px 17px # 555; -moz-box-shadow: 0px 0px 0px 2px rgba (0,0,0,0,6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba (0,0,0,0,2), 6px 6px 8px 17px # 555 ; Box-Schatten: 0px 0px 0px 2px rgba (0,0,0,0,6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba (0,0,0,0,2), 6px 6px 8px 17px # 555; }

Vignette

Demo: Klicken Sie hier, um die Demo zu Tinkerbin anzusehen.

Dieses Mal verwenden wir eine andere Art von Box-Schatten, um einen ganz anderen Effekt zu erzeugen. Durch Verwendung eines? Inset? Im Schatten können wir mit CSS nur eine schöne Photoshop-artige Vignette auf einem Bild erstellen. Es ist ein hübscher Trick, der Ihre Bilder wirklich hervorheben kann.

HTML

Diesmal brauchen wir ein leeres div. Sie können optional Text einfügen, das Bild muss jedoch über CSS eingefügt werden. Dies liegt daran, dass der eingefügte Schatten tatsächlich unter dem über HTML eingefügten Inhalt angezeigt wird, was bedeutet, dass ein Bild ihn vollständig ausblenden würde.

CSS

Für das CSS müssen wir ein Bild in den Hintergrund setzen und dann Breite und Höhe für das div definieren. Nachdem Sie Ihr Div eingerichtet haben, ist es Zeit, die Schatten anzuwenden. Beachten Sie, dass der Einfügungswert implementiert ist und sowohl der vertikale als auch der horizontale Versatz auf 0 gesetzt ist.

Es könnte Ihnen merkwürdig erscheinen, dass ich für jeden Browser drei Versionen desselben Schatteninhalts implementiert habe. Der Grund, warum ich das gemacht habe, ist einfach, weil ich eine wirklich dunkle, intensive Vignette wollte und ein Schatten es einfach nicht schnitt!

.vignette {hintergrund: url ("http://lorempixum.com/400/200/nature/5"); Breite: 400px; Höhe: 200px; -webkit-box-shadow: Einfügung 0 0 50px # 000, Einfügung 0 0 50px # 000, Einfügung 0 0 50px # 000; -moz-box-shadow: Einfügung 0 0 50px # 000, Einfügung 0 0 50px # 000, Einfügung 0 0 50px # 000; Box-Schatten: Einfügung 0 0 50px # 000, Einfügung 0 0 50px # 000, Einfügung 0 0 50px # 000; }

Grunge Foto

Demo: Klicken Sie hier, um die Demo zu Tinkerbin anzusehen.

Um sich auf dieses vorzubereiten, müssen Sie eine transparente Hintergrundbildüberlagerung erstellen. Ich habe diese Textur verwendet, um dieses Bild zu erstellen. Der Trick hier ist, dass die Textur genau dieselbe Farbe hat wie der Hintergrund der Seite, auf der sie platziert werden soll.

Im Grunde nutzen wir mehrere Hintergründe, um eine wiederverwendbare Grunge-Textur anzuwenden. Wir könnten das Bild mit der Textur maskieren, dies wird jedoch außerhalb von Webkit nicht unterstützt. Dies ist eine viel Browserfreundlichere Möglichkeit, dies zu tun.

HTML

Dieselbe Übung wie beim letzten Mal. Erstellen Sie einfach ein leeres Div, auf das Sie Hintergrundbilder anwenden können.

CSS

Lassen Sie uns den Grunge-Effekt nur im Schwebeflug erscheinen lassen. Zu Beginn wenden wir ein Hintergrundbild an, skalieren das Div und erstellen eine leichte Vignette wie beim letzten Mal. Jetzt müssen wir nur noch unser Grunge-Hintergrundbild im Hover-Bereich hinzufügen.

Mehrere CSS-Hintergründe lassen sich sehr leicht bearbeiten. Genau wie bei den Schatten zuvor, fügen Sie einfach einen zweiten hinzu, indem Sie die beiden durch ein Komma trennen. Das Grunge-Bild geht zuerst, da wir es oben haben wollen.

Körper {Hintergrund: # 867d79; } .grunge {background: url ("http://lorempixum.com/400/200/technics/4"); Breite: 400px; Höhe: 200px; Marge: 50px; -webkit-box-shadow: Einschub 0 0 20px schwarz; -moz-box-shadow: Einfügung 0 0 20px schwarz; Box-Schatten: Einfügung 0 0 20px schwarz; } .grunge: hover {Hintergrund: URL ("https://designshack.net/wp-content/uploads/imagetreatments-texture3.png"), URL ("http://lorempixum.com/400/200/technics/ 4 "); }

Fazit

Ich hoffe, Ihnen hat diese vier CSS-Bildtricks gefallen. Jede Anwendung sollte nur eine Minute dauern, um sie anzuwenden, aber sie alle verleihen anderen einfachen Bildern einen deutlichen Stilschub. Wie bei jedem Designtrick sollten Sie diese selektiv verwenden und nicht über Bord gehen!

Wenn Sie selbst schnelle CSS-Bildeffekte haben, teilen Sie uns dies in den Kommentaren mit. Alle obigen Demos sind live und bearbeitbar. Verändern Sie sie also und hinterlassen Sie einen Link zu Ihrer Version.