Miniaturen mit CSS3 perfekt drehen und maskieren

Haben Sie schon einmal eine Website mit Miniaturbildern gesehen, die leicht gedreht sind? Es ist ein einfacher Effekt, der eine visuelle Persönlichkeitsebene hinzufügt. Wenn Sie nicht mit CSS den Rotationseffekt erzielen, arbeiten Sie zu hart! Lerne, wie es richtig geht!

Erneut veröffentlichtes Tutorial

Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im August 2011 veröffentlicht.

Einführung

Bildergalerien mit gedrehten Miniaturen sind etwas selten, aber es ist ein einfacher Trick, um Ihrer Webseite einen Stil hinzuzufügen. Wenn dies jedoch nicht richtig gemacht wird, kann sich das Erreichen und Aufrechterhalten dieses Effekts manchmal als sehr umständlich erweisen!

Um diesen Effekt richtig zu erreichen, werden Ihre ersten Gedanken möglicherweise gedreht, um Miniaturbilder in Photoshop zu erstellen. Dies kann sich jedoch auf lange Sicht als schwierig erweisen. Das Erstellen von gedrehten Miniaturen auf diese Weise kann folgende Nachteile haben:

Winkelkonsistenz: Wenn die Bilder nicht alle im gleichen Winkel gedreht werden, geht die visuelle Konsistenz der Seite verloren. Dies bedeutet, dass eine PSD jedes einzelnen Piktogramms korrekt in einem konstanten Winkel gedreht wird. Sie können beispielsweise Ihre PSD öffnen und feststellen, dass Sie den Drehwinkel Ihrer Miniaturbilder vergessen haben.
CMS-Thumbnail-Generierung:Wenn Sie einen CMS (z. B. Wordpress) ausführen, werden Ihre Miniaturansichten wahrscheinlich automatisch generiert. Bei der oben beschriebenen PSD-Methode müssen Sie jedes einzelne Miniaturbild in Ihrem CMS manuell erstellen und hochladen. Wenn Sie bereits über eine Site verfügen, den Rotationseffekt jedoch auf Ihre Miniaturansichten anwenden möchten, müssen Sie alle Miniaturansichten in Photoshop neu erstellen und dann alle neu hochladen!
Langfristige Verwaltbarkeit: Angenommen, Sie haben alle Ihre Miniaturansichten leicht gedreht erstellt, möchten nun aber Ihre Galerie neu ausrichten oder neu gestalten. Das bedeutet, dass Sie alle Miniaturansichten neu erstellen müssen. Wenn Sie Ihre Miniaturansichten in Photoshop verwaltet haben, müssen Sie die einzelnen Miniaturansichten erneut anpassen und erneut speichern. Pfui.

Wäre es nicht schön, wenn Sie diese kleine Drehung mit einer Codezeile ausführen könnten? Ja, du kannst! Lass uns lernen wie.

Schritt 1: Unser Ziel verstehen

Ein kurzer Überblick über das, was wir zu erreichen versuchen, zeigt die folgenden Schritte:

Bildminiatur in Photoshop erstellen (nicht gedreht)
Fügen Sie die Miniaturansicht mit ein img Etikett
Maskieren Sie es entsprechend mit CSS (denken Sie an Photoshop-Masken)
Drehen Sie die Miniaturansicht innerhalb der Maske mit CSS3

Um sicherzustellen, dass sich unsere Galerie ordnungsgemäß verschlechtert, werden die Schritte 1 bis 3 mithilfe von CSS ausgeführt. Schritt 4 (der Rotationseffekt) wird mit CSS3 ausgeführt.

Schritt 2: Verstehen der Größe der Miniaturansicht und des Rotationswinkels

Bevor Sie unsere Miniaturbilder erstellen, müssen Sie bestimmen, wie groß jedes Miniaturbild auf dem Bildschirm angezeigt wird.

Wenn unsere Miniaturansichten zu klein sind und wir sie in einem zu großen Winkel drehen, geben einige Ecken einen leeren Raum. So was:

Um den Maskenbereich richtig auszufüllen, können wir daraus schließen, dass je mehr unser Miniaturbild gedreht wird, desto größer muss es sein. Wenn der Drehwinkel der Miniaturansicht zunimmt, muss auch die Größe der Miniaturansicht (und umgekehrt).

Denken Sie an diesen Schlüssel: Die Bildminiatur ist immer größer als die Bildmaske (Miniaturbildgröße> Maskengröße)

Eine Warnung an die von Mathe Abgeschlagenen

Die Schritte 3 bis 6 beschreiben, wie die proportionale Größenbestimmung für die Bildmaske und das Miniaturbild mathematisch berechnet wird. Es ist nicht notwendig, Bilder mit CSS zu drehen verwandeln Eigentum. Vielmehr soll er Ihnen helfen zu verstehen, wie Sie die Größe Ihrer Elemente richtig bestimmen können, um eine vollständige Drehung um 360 ° zu ermöglichen. Dies stellt sicher, dass Sie keine hässlichen leeren Ecken haben.

Schritt 3: Verhältnismäßig gleich

Um zu vermeiden, leeren Bereich in unserer Maske anzuzeigen, müssen wir feststellen EIN der folgenden:

Größe des aktuellen Vorschaubildes
Größe der Bildmaske (sichtbarer Teil der Miniaturansicht)

Da die Größe der Miniaturansicht und der Bildmaske proportional gleich ist, können wir die Größe der anderen Größe berechnen, wenn wir die Größe von einer festlegen.

Schritt 4: Abmessungen ermitteln

In diesem Beispiel werden wir zunächst die Größe der Bildmaske einstellen. Durch die Einstellung der Größe unserer Bildmaske können wir die Größe der Miniaturansicht mit ein wenig Mathematik berechnen:

Bestimmen Sie die Größe der Bildmaske: 180x240 Pixel
Finden Sie die Länge der Diagonalseite
- Verwenden Sie den Satz des Pythagoras (a² + b² = c² )
  - Unsere erste Seite (a) ist 180px
  - Unsere zweite Seite (b) ist 240px
  - Also 180² + 240² = c² (diagonale Länge)
  - 90.000 = c²
  - 300 = c (nimm die Quadratwurzel von jeder Seite)
- Unsere Diagonallänge (c) beträgt 300

Die Diagonallänge ist eine wichtige Zahl. Damit das Miniaturbild um 360 ° gedreht werden kann, muss seine kürzeste Seite der längsten Seite der Bildmaske entsprechen. (Auch wenn Sie dies möglicherweise nicht benötigen, können Sie den Drehwinkel um 360 ° drehen, ohne die Miniaturbilder ändern zu müssen.).

Schritt 5: Berechnung der Thumbnail-Abmessungen

Wie Sie sehen können, muss die kürzeste Seite unserer Miniaturansicht der längsten Seite unserer Maske entsprechen. Wenn dies nicht der Fall ist, bleiben wir mit leerem Platz. Denken Sie daran: Die Größe der Miniaturansicht ist proportional größer als die Größe der Bildmaske.

Die Größe der Miniaturansicht so zu berechnen, dass sie richtig passt, ist einfach, sobald wir die Abmessungen der Bildmaske kennen. Wir nehmen einfach die größte Seite der Maske (die Diagonale) und lassen sie gleich der kürzesten Seite unseres Daumennagels sein.

Die größte Seite der Maske (300) entspricht der kürzesten Seite (X) der Miniaturansicht
Verwenden Sie die proportionalen Beziehungen, um die Länge der Miniaturansicht zu ermitteln
- 180: 300 (Maskenhöhe: Höhe der Miniaturansicht)
- 240: y (Maskenlänge: Länge der Miniaturansicht)
Kreuz multiplizieren, um zu lösen
- 180y = 72.000
y = 400 (Thumbnail-Länge)

Wir haben jetzt die Masken- und Miniaturbildgröße festgelegt. Wir wissen, ob unsere Bildmaske 180x240px ist. Das Miniaturbild in dieser Maske muss 300x400px betragen, um eine Drehung um 360 ° zu ermöglichen.

Eine glückliche Anmerkung: Da die Größe der Bildmaske und der Miniaturansichten proportional ist, funktioniert diese Berechnung auch, wenn Sie zuerst die Miniaturansichtsgröße festlegen. Wir würden den gleichen Satz des Pythagoras verwenden und proportionale Beziehungen verwenden, um die richtige Größe zu bestimmen.

Schritt 6: Endlich etwas HTML

Da wir nun alle unsere Größen kennen, beginnen wir mit dem Erstellen von gedrehten Miniaturansichten, indem wir mit einem einfachen HTML-Code beginnen.

    Gedrehte Thumbnails mit CSS3     Gedrehte Thumbnails mit CSS3
 Transformationswinkel:     Nur Zahlenwerte

Dieses grundlegende HTML-Markup fügt Folgendes hinzu:

- Dadurch kann der Benutzer den Drehwinkel ändern. Auch setzen wir unsere Wert Attribut, das dem gleichen Betrag entspricht, den wir anfänglich in unserem CSS festlegen (15 in diesem Fall).
- Diese Fehlermeldung wird nicht angezeigt. Mit jQuery wird es angezeigt, wenn der Benutzer neben einer Zahl etwas in das Eingabefeld eingibt.
- Dies sind unsere Thumbnails, die mit Ihren Wünschen verknüpft werden können.
Lösche beide - Löscht unsere schwebenden Thumbnails
Klasse = "Maske" - Die Klasse für unsere Bildmaske

Schritt 7: CSS-Seitenlayout

Lassen Sie uns auf unsere Seite etwas grundlegendes Styling anwenden, um Struktur und Einfachheit zu erreichen.

 body margin: 0; Polsterung: 0; Hintergrund: #eee; Schriftfamilie: Genf, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, Serifenlose;  #wrapper width: 840px; Marge: 0 auto; Hintergrund: #fff; Rahmen: 1px fest #ccc; Polsterung: 25px; Rand oben: keine;  #error_message color: red; Anzeige: keine; Schriftgröße: .8em;

Beachten Sie hier, dass wir unsere versteckt haben Fehlermeldung Standardmäßig wird die Sichtbarkeit später in jQuery umgeschaltet.

Fügen Sie einige CSS3-Effekte hinzu

Lassen Sie uns noch einige Details hinzufügen, um unser grundlegendes Styling zu verbessern

 #wrapper border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; Box-Schatten: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc;

Jetzt haben wir unseren Inhalt mit einem guten Abstand und einigen CSS3-Effekten für ein verbessertes Seiten-Styling zentriert.

Schritt 8: CSS-Stylingbildmaske

Wenden wir die Bildmaske auf unsere Miniaturbilder an. In unserem HTML-Code haben wir jedes Miniaturbild in ein Ankertag eingebettet und ihm eine Klasse von gegeben Maske die wir in unserem CSS verwenden werden.

 .Maske Position: relativ; Höhe: 180px; Breite: 240px; Schwimmer: links; Überlauf versteckt; Marge: 15px; Rahmen: 5px fest # f6f6f6; Box-Schatten: 0 0 1px # 000; -moz-box-shadow: 0 0 1px # 000; -webkit-box-shadow: 0 0 1px # 000;

Hier eine Beschreibung der von uns verwendeten CSS-Eigenschaften (und warum wir sie verwendet haben):

Position: relativ - Unsere img Tags werden absolut in unserer Bildmaske positioniert
Höhe, Breite - Zuvor haben wir die Abmessungen unserer Bildmaske bestimmt. Hier legen wir diese Größen ab.
Schwimmer: links - Schwebt unsere Bilder so, dass sie in einer Galerie erscheinen.
Überlauf versteckt - Wie zuvor berechnet, werden unsere Miniaturbilder 300x400px sein. Wir werden jedoch nur einen Teil (180x240px) davon zeigen. Diese Eigenschaft dient als Maske und verbirgt den Teil unserer Miniaturansichten, der sich außerhalb der Abmessungen von 180 x 240 befindet.
Spanne - Platzieren Sie unsere Bilder
Rand, Box Schatten - Dies gibt uns einen doppelten Rahmen (in unterstützenden Browsern). Das Rand Die Eigenschaft gibt uns einen dicken, cremefarbenen Rand um das Bild, während die Box Schatten gibt uns einen dünnen, schwarzen Rand um unseren dicken, cremefarbenen Rand.

Schritt 9: CSS-Größe der Thumbnails

Legen Sie die Größe der Miniaturansichten entsprechend den in Schritt 5 berechneten Abmessungen fest.

 .Maske img height: 300px; Breite: 400px;

Schritt 10: CSS-Zentrieren der Miniaturen

Im Moment sind unsere Miniaturbilder relativ positioniert (von der oberen linken Ecke)..

Wir möchten, dass unser Thumbnail horizontal und vertikal in der Maske zentriert wird.

Um dies zu erreichen, verwenden wir die folgenden CSS-Regeln:

 .Maske img Position: absolut; Rand oben: -150px; / * halbe Höhe * / Rand links: -200px; / * halbe Breite * / Oberseite: 50%; links: 50%;

Hier ist eine Beschreibung dessen, was wir getan haben:

Position: absolut - Dadurch wird das Miniaturbild absolut innerhalb der Bildmaske positioniert
Spanne - Wir legen negative Ränder fest, die genau die halbe Höhe und Breite des Bildes (300x400) betragen, und legen dann unsere Positionierungseigenschaften fest oben und links welche die Elemente zurück in die perfekte Mitte ziehen.

Schritt 11: CSS-Miniaturendrehung

Wir werden die CSS3-Eigenschaft verwenden verwandeln um unsere Elemente zu drehen. Unser CSS enthält also alle Browser-Präfixe

 .Maske img -webkit-transform: drehen (15 Grad); -Moz-Transformation: drehen (15 Grad); -o-transform: drehen (15 Grad); -ms-transform: drehen (15 Grad); verwandeln: drehen (15 Grad);

Das CSS hier ist ziemlich einfach. Wir setzen unseren Drehwinkel einfach in Klammern, gefolgt von "deg"..

In diesem Beispiel haben wir 15 als Rotationswert verwendet, aber Sie könnten dort einen anderen Wert eingeben. Da wir die Größe unserer Maske und des Miniaturbilds richtig berechnet haben, haben wir Platz für volle 360 ° -Drehung geschaffen! Eine positive Ganzzahl dreht das Bild nach rechts, eine negative Ganzzahl dreht das Bild nach links.

Schritt 12: CSS Image Hover-Effekt

Als zusätzlichen Effekt fügen wir eine einfache CSS-Zeile hinzu, die unsere Randfarbe ändert, wenn der Benutzer das Bild bewegt.

 .mask: hover border-color: #ddd;

Schritt 13: jQuery Dynamisches Ändern des Rotationswerts

Als kleinen Bonus erlauben wir dem Benutzer, einen Wert in unser Eingabefeld einzugeben, der den CSS-Drehwinkel ändert. Fügen wir also jQuery am Ende unserer Seite direkt vor dem Schließen hinzu Karosserie Tag mit einem Link zu unserem benutzerdefinierten Skript:

Schritt 14: jQuery Document Ready

Lassen Sie uns nun jQuery einrichten, wenn das Dokument fertig ist:

 jQuery (document) .ready (Funktion ($) // Code hier);

Schritt 15: jQuery Initial Function

Wir erstellen eine Funktion für den Klick auf die Schaltfläche "Update".

 $ ('button'). click (function () // Code hier);

Schritt 16: jQuery Speichern des aktuellen Rotationswerts

Wir möchten den numerischen CSS-Wert für den aktuellen Drehwinkel in einer Variablen speichern.

 var rotation_angle_value = $ ('# rotation_amount'). val ();

Dieser Code findet die rotation_amount id (die wir dem zugewiesen haben Eingang) und erhält seinen aktuellen Wert. Wenn Sie sich erinnern, setzen wir den Anfang Wert Attribut 15 (gleich wie in unserem CSS-Code für den Drehwinkel).

Schritt 17: jQuery mit der Funktion isNaN ()

Wir möchten den Eingabewert des Benutzers zu unserem neuen Drehwinkel machen. Wir möchten jedoch sicherstellen, dass der Benutzer nicht versehentlich einen nicht numerischen Wert eingibt. Dort ist das isNaN () Javascript-Funktion kommt herein. isNaN () steht für "ist keine Zahl". Diese Funktion macht genau das, was ihre Namen bedeuten: Sie prüft, ob der Wert, den Sie übergeben, "keine Zahl ist"..

Also benutzen wir die isNaN () Funktion und übergeben Sie unseren Drehwinkelwert (wie vom Benutzer eingegeben). Wenn es sich nicht um eine Zahl handelt, wird unsere Fehlermeldung angezeigt.

 // Prüfen Sie, ob der Eingabewert des Benutzers eine Zahl ist oder nicht. if (isNaN (rotation_angle_value)) // keine Zahl $ ('# error_message'). show (); // restlicher Code hier

Schritt 18: jQuery-Aktualisierung des neuen Drehwinkels

Wenn der neu eingegebene Wert des Benutzers keine Zahl ist, haben wir eine Fehlermeldung angezeigt. Jetzt verwenden wir eine sonst Aussage für wann sie haben einen numerischen Wert eingegeben. Zuerst verbergen wir die Fehlermeldung.

 else $ ('# error_message'). hide ();

Da der Drehwinkel in unserem CSS mehrmals gespeichert wird (aufgrund der verschiedenen Browser-Präfixe), müssen ALLE dieser Werte mit jQuery aktualisiert werden. Wir speichern also die Syntax des CSS-Werts in einer Variablen (mit dem neuen Winkelwert). Im Wesentlichen schreiben wir drehen (15 Grad) und Ersetzen des Wertes '15' durch den vom Benutzer eingegebenen Wert.

 var rotation_angle = 'drehen (' + rotation_angle_value + 'deg)';

Dann erstellen wir ein CSS-Objekt mit relationalen Werten. Wir definieren jede unserer CSS-Eigenschaften (die Browser-Präfixe für die Transformation) und fügen dann den Wert als gerade definierte Variable ein.

 var updated_css = '-webkit-transform': Rotationswinkel, '-moz-transform': Rotationswinkel, '-o-transform': Rotationswinkel, '-ms-transform': Rotationswinkel, 'transform': Rotationswinkel,

Jetzt übergeben wir diese Variable, die unsere CSS-Eigenschaften und Werte speichert, einfach an jQuery, um unser CSS zu aktualisieren!

 $ ('. mask img'). css (aktualisierte_css);

Schritt 19: jQuery Final jQuery Code

So sieht all unsere jQuery aus:

 jQuery (document) .ready (Funktion ($) $ ('button'). click (function () // Ruft den Drehwinkelwert ab. var rotation_angle_value = $ ('# rotation_amount'). val (); if (isNaN (rotation_angle_value)) // ist keine Zahl $ ('# error_message'). show (); else // ist eine Zahl $ ('# error_message'). hide (); // speichert die CSS-Wertsyntax mit der neue Drehwinkelwert var rotation_angle = 'rotate (' + rotation_angle_value + 'deg)'; // CSS-Eigenschaften und -werte speichern var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle ' -o-transform ': rotation_angle,' -ms-transform ': rotation_angle,' transform ': rotation_angle, // unser CSS $ ('. mask img ') aktualisieren. css (updated_css);;));

Fazit

Ich hoffe, Sie haben etwas gelernt. Vor allem, wenn Sie sich in Photoshop für nicht flexible Designs engagieren, lässt sich dies oft vermeiden, indem Sie CSS3-Techniken direkt im Browser verwenden. Danke fürs Mitmachen!

Web-Design