7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Perfektes Drehen und Maskieren von Miniaturansichten mit CSS3

Scroll to top
Read Time: 12 mins

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Haben Sie jemals eine Website mit leicht gedrehten Miniaturansichten von Bildern gesehen? Es ist ein einfacher Effekt, der eine Ebene visueller Persönlichkeit hinzufügt. Wenn Sie den Rotationseffekt mit CSS nicht erzielen, arbeiten Sie zu hart! Erfahren Sie, wie Sie es richtig machen!

Neu 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 Miniaturansichten sind etwas selten, aber es ist ein einfacher Trick, Ihrer Webseite Stil zu verleihen. Wenn dies jedoch nicht richtig gemacht wird, kann sich das Erreichen und Aufrechterhalten dieses Effekts manchmal als großer Aufwand erweisen!

Um diesen Effekt richtig zu erzielen, sollten Sie zunächst gedrehte Miniaturansichten in Photoshop erstellen. Dies kann sich jedoch langfristig als schwierig erweisen. Zu den Nachteilen beim Erstellen gedrehter Miniaturansichten auf diese Weise gehören:

  • Winkelkonsistenz: Wenn nicht alle Bilder im gleichen Winkel gedreht werden, geht die visuelle Konsistenz der Seite verloren. Dies bedeutet, dass eine PSD für jedes einzelne Miniaturbild beibehalten wird, das ordnungsgemäß in einem gleichmäßigen Winkel gedreht wurde. Sie können beispielsweise Ihre PSD öffnen und feststellen, dass Sie den Drehwinkel Ihrer Miniaturansichten vergessen haben.
  • Generierung von CMS-Miniaturansichten: Wenn Sie ein CMS (z. B. Wordpress) ausführen, werden Ihre Miniaturansichten wahrscheinlich automatisch generiert. Mit der oben beschriebenen PSD-Methode müssen Sie jedes einzelne Miniaturbild manuell in Ihrem CMS erstellen und hochladen. Wenn Sie bereits eine Site haben, aber den Rotationseffekt auf Ihre Miniaturansichten anwenden möchten, müssen Sie alle Miniaturansichten in Photoshop neu erstellen und dann alle erneut hochladen!
  • Langfristige Verwaltbarkeit: Angenommen, Sie haben alle Miniaturansichten leicht gedreht erstellt, möchten aber jetzt Ihre Galerie neu ausrichten oder neu gestalten. Dies bedeutet, dass Sie alle Ihre Miniaturansichten neu generieren müssen. Wenn Sie Ihre Miniaturansichten in Photoshop verwaltet haben, müssen Sie jedes einzelne Miniaturbild erneut anpassen und speichern. Pfui.

Wäre es nicht schön, wenn Sie diese kleine Rotation mit einer Codezeile durchführen könnten? Ja, Sie können! Lassen Sie uns lernen wie.


Schritt 1: Unser Ziel verstehen

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

  1. Erstellen Sie eine Bildminiatur in Photoshop (nicht gedreht)
  2. Fügen Sie die Miniaturansicht mit dem img-Tag ein
  3. Maskieren Sie es entsprechend mit CSS (denken Sie an Photoshop-Masken).
  4. Drehen Sie die Miniaturansicht innerhalb der Maske mit CSS3
Example of image thumbnail and maskExample of image thumbnail and maskExample of image thumbnail and mask

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: Grundlegendes zur Größe von Miniaturbildern und zum Erhöhen des Drehwinkels

Bevor wir unsere Miniaturansichten erstellen, müssen wir festlegen, wie groß jede Miniaturansicht auf dem Bildschirm angezeigt wird.

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

Empyt space in the mask cornersEmpyt space in the mask cornersEmpyt space in the mask corners

Um den Maskenbereich richtig auszufüllen, können wir daraus schließen, dass unser Miniaturbild umso größer sein muss, je mehr es gedreht wird. In mathematischen Begriffen muss mit zunehmendem Drehwinkel des Miniaturbilds auch die Größe des Miniaturbilds zunehmen (und umgekehrt).

Increase in rotation means an increase in sizeIncrease in rotation means an increase in sizeIncrease in rotation means an increase in sizeDenken Sie an diesen Schlüssel: Das Bild-Miniaturbild ist immer größer als die Bildmaske (Miniaturbildgröße > Maskengröße).

Eine Warnung an diejenigen, die von Mathe abgestoßen wurden

In den Schritten 3 bis 6 wird beschrieben, wie die proportionale Größe für die Bildmaske und das Miniaturbild mathematisch berechnet wird. Es ist nicht erforderlich, Bilder mit der CSS transform-Eigenschaft drehen zu können. Vielmehr soll es Ihnen helfen, zu verstehen, wie Sie die Größe Ihrer Elemente richtig bestimmen, um eine vollständige 360 ° -Drehung zu ermöglichen. Dies stellt sicher, dass Sie keine hässlichen leeren Ecken mehr haben.


Schritt 3: Proportional gleich

Um zu vermeiden, dass in unserer Maske ein leerer Raum angezeigt wird, müssen wir EINEN der folgenden Punkte bestimmen:

  • Größe des tatsächlichen Miniaturbilds
  • Größe der Bildmaske (sichtbarer Teil der Miniaturansicht)

Da Miniaturbild und Bildmaske proportional gleich groß sind, können wir die Größe des anderen berechnen, wenn wir die Größe des einen festlegen.


Schritt 4: Abmessungen bestimmen

In diesem Beispiel legen wir zuerst unsere Bildmaskengröße fest. Durch Einstellen der Größe unserer Bildmaske können wir die Größe des Miniaturbilds mit ein wenig Mathematik berechnen:

  • Bestimmen Sie die Größe der Bildmaske: 180x240 Pixel
  • Finden Sie die Länge der diagonalen Seite
    • Verwenden Sie den Satz von Pythagoras (a2 + b2 = c2)
      • Unsere erste Seite (a) ist 180px
      • Unsere zweite Seite (b) ist 240px
      • Also 1802+ 2402 = c2 (diagonale Länge)
      • 90.000 = c2
      • 300 = c (nimm die Quadratwurzel jeder Seite)
    • Unsere diagonale Länge (c) beträgt 300
pythagorean theorempythagorean theorempythagorean theorem

Die diagonale Länge ist eine wichtige Zahl. Damit unser Miniaturbild um 360° gedreht werden kann, muss seine kürzeste Seite der längsten Seite der Bildmaske entsprechen. (Auch wenn Sie es möglicherweise nicht benötigen, ermöglicht die Bereitstellung einer 360°-Drehung zukünftige Änderungen Ihres Drehwinkels, ohne dass Sie die Größe Ihrer Miniaturansichten ändern müssen.)

Thumbnails shortest side equals masks's longest sideThumbnails shortest side equals masks's longest sideThumbnails shortest side equals masks's longest side

Schritt 5: Berechnen der Miniaturbildabmessungen

Wie Sie sehen können, muss die kürzeste Seite unseres Miniaturbilds der längsten Seite unserer Maske entsprechen. Wenn nicht, bleibt uns ein leerer Raum. Denken Sie daran: Die Größe der Miniaturansicht ist proportional größer als die Größe der Bildmaske.

Proportional relationship between thumbnail and maskProportional relationship between thumbnail and maskProportional relationship between thumbnail and mask

Sobald wir die Abmessungen der Bildmaske kennen, ist es einfach, die Größe des Miniaturbilds so zu berechnen, dass es richtig passt. Wir nehmen einfach die größte Seite der Maske (die Diagonale) und lassen sie der kürzesten Seite unseres Miniaturbilds entsprechen.

  • Die größte Seite der Maske (300) entspricht der kürzesten Seite der Miniaturansicht (x)
  • 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 (Länge der Miniaturansicht)
Finding y2Finding y2Finding y2

Wir haben jetzt unsere Masken- und Miniaturbildgrößen festgelegt. Wir wissen, wenn unsere Bildmaske 180x240 Pixel groß ist, muss das Miniaturbild in dieser Maske 300x400 Pixel groß sein, um eine 360°-Drehung zu ermöglichen.

Ein glücklicher Hinweis: Da die Bildmasken- und Miniaturbildgrößen proportional gleich sind, würde diese Mathematik auch funktionieren, wenn wir zuerst unsere Miniaturbildgröße festlegen! Wir würden den gleichen Satz von Pythagoras und die gleichen proportionalen Beziehungen verwenden, um die richtigen Größen zu bestimmen.


Schritt 6: Endlich etwas HTML

Nachdem wir alle unsere Größen kennen, erstellen wir unsere gedrehten Miniaturansichten, indem wir mit grundlegendem HTML beginnen.

Dieses grundlegende HTML-Markup fügt Folgendes ein:

  • <input> - Hiermit kann der Benutzer den Drehwinkel ändern. Außerdem setzen wir unser value-Attribut auf den gleichen Betrag, den wir ursprünglich in unserem CSS festgelegt haben (in diesem Fall 15).
  • <span> - Diese Fehlermeldung wird ausgeblendet. Mit jQuery zeigen wir, ob der Benutzer etwas anderes als eine Zahl in das Eingabefeld eingibt.
  • <img> - Dies sind unsere Thumbnails, die mit einem beliebigen Link verknüpft werden können.
  • clear:both - Löscht unsere schwebenden Thumbnails
  • class="mask" - Die Klasse für unsere Bildmaske
basic HTML layoutbasic HTML layoutbasic HTML layout

Schritt 7: CSS Basic Page Styling

Wenden wir ein grundlegendes Styling auf unsere Seite an, um sie strukturiert und einfach zu gestalten.

Beachten Sie hier, dass wir unsere error_message standardmäßig ausgeblendet haben, da wir die Sichtbarkeit später in jQuery umschalten werden.

Fügen Sie einige CSS3-Effekte hinzu

Fügen wir noch ein paar Details hinzu, um unser grundlegendes Styling zu verbessern

basic CSS stylingbasic CSS stylingbasic CSS styling

Jetzt haben wir unseren Inhalt mit gutem Abstand und einigen CSS3-Effekten für ein verbessertes Seitenstyling zentriert.


Schritt 8: CSS Styling Image Mask

Wenden wir die Bildmaske auf unsere Miniaturansichten an. In unserem HTML-Code haben wir jedes Miniaturbild in ein Ankertag eingeschlossen und ihm eine mask-Klasse gegeben, die wir in unserem CSS verwenden werden.

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

  • position:relative - Unsere img-Tags werden absolut innerhalb unserer Bildmaske positioniert
  • height, width - Früher haben wir die Abmessungen unserer Bildmaske bestimmt. Hier platzieren wir diese Größen.
  • float:left - Verschiebt unsere Bilder so, dass sie in einer Galerieform angezeigt werden.
  • overflow:hidden - Wie bereits berechnet, sind unsere Miniaturansichten 300 x 400 Pixel groß. Wir zeigen jedoch nur einen Teil(180x240px) davon. Diese Eigenschaft fungiert als Maske und verbirgt den Teil unserer Miniaturansichten, der sich außerhalb der Abmessungen von 180 x 240 erstreckt.
  • margin - Platzieren Sie unsere Bilder
  • border, box-shadow - Dies gibt uns einen doppelten Rahmen (in unterstützenden Browsern). Die border-Eigenschaft gibt uns einen dicken, cremefarbenen Rand um das Bild, während der box-shadow uns einen dünnen, schwarzen Rand um unseren dicken, cremefarbenen Rand gibt.
thumbnails not rotatedthumbnails not rotatedthumbnails not rotated

Schritt 9: CSS-Dimensionierung der Miniaturansichten

Stellen Sie unsere Miniaturbildgrößen gemäß den in Schritt 5 berechneten Abmessungen ein.


Schritt 10: CSS-Zentrierung der Miniaturansichten

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

thumbnail positioned in the top leftthumbnail positioned in the top leftthumbnail positioned in the top left

Wir möchten, dass unser Miniaturbild horizontal und vertikal innerhalb der Maske zentriert wird.

thumbnail positioned in the centerthumbnail positioned in the centerthumbnail positioned in the center

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

Hier ist eine Beschreibung dessen, was wir getan haben:

  • position:absolute - Hiermit wird das Miniaturbild absolut innerhalb der Bildmaske positioniert
  • margin - Wir setzen negative Ränder, die genau halb so hoch und breit wie das Bild sind (300 x 400), und setzen dann unsere Positionierungseigenschaften top und left, um die Elemente wieder in die perfekte Mitte zu ziehen.
thumbnails centered positioningthumbnails centered positioningthumbnails centered positioning

Schritt 11: CSS-Miniaturbildrotation

Wir werden die CSS3 transform-Eigenschafts verwenden, um unsere Elemente zu drehen. Unser CSS enthält also alle Browserpräfixe

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önnen dort einen anderen Wert eingeben. Da wir die Größe unserer Maske und unseres Miniaturbilds richtig berechnet haben, haben wir Platz für eine volle 360°-Drehung geschaffen! Eine positive Ganzzahl dreht das Bild nach rechts, eine negative Ganzzahl dreht das Bild nach links.

thumbnails rotatedthumbnails rotatedthumbnails rotated

Schritt 12: CSS Image Hover-Effekt

Als zusätzlichen Effekt fügen wir eine einfache CSS-Zeile hinzu, die unsere Rahmenfarbe ändert, wenn der Benutzer mit der Maus über das Bild fährt.


Schritt 13: jQuery Rotationswert dynamisch ändern

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


Schritt 14: jQuery-Dokument bereit

Jetzt richten wir jQuery ein, wenn das Dokument fertig ist:


Schritt 15: jQuery-Anfangsfunktion

Wir erstellen eine Funktion für jedes Mal, wenn auf unsere Schaltfläche "Aktualisieren" geklickt wird.


Schritt 16: jQuery speichert den aktuellen Rotationswert

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

Dieser Code findet die rotation_amount ID (die wir der input zugewiesen haben) und erhält ihren aktuellen Wert. Wenn Sie sich erinnern, setzen wir das value-Attribut auf 15 (wie in unserem CSS-Code für den Drehwinkel).


Schritt 17: jQuery Verwenden 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. Hier kommt die Javascript-Funktion isNaN() ins Spiel. isNaN() steht für "ist keine Zahl". Diese Funktion macht genau das, was ihre Namen implizieren: Sie prüft, ob der Wert, den Sie an sie übergeben, "keine Zahl ist".

Wir werden also die Funktion isNaN() verwenden und unseren Drehwinkelwert (wie vom Benutzer eingegeben) an ihn übergeben. Wenn es sich nicht um eine Nummer handelt, wird unsere Fehlermeldung angezeigt.


Schritt 18: jQuery Aktualisieren des neuen Drehwinkels

Wenn der neu eingegebene Wert des Benutzers keine Zahl ist, wird eine Fehlermeldung angezeigt. Jetzt verwenden wir eine else-Anweisung, wenn sie einen numerischen Wert eingegeben haben. Zuerst verstecken wir die Fehlermeldung.

Da der Drehwinkel (aufgrund der verschiedenen Browserpräfixe) mehrmals in unserem CSS gespeichert ist, müssen ALLE diese Werte mit jQuery aktualisiert werden. Wir speichern also die Syntax des CSS-Werts in einer Variablen (mit dem neuen Winkelwert). Im Wesentlichen schreiben wir rotate(15deg) und ersetzen den Wert von '15' durch den Wert, den der Benutzer eingibt.

similar CSS valuessimilar CSS valuessimilar CSS values

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

Jetzt übergeben wir diese Variable, in der unsere CSS-Eigenschaften und -Werte gespeichert sind, einfach an jQuery, um unser CSS zu aktualisieren!


Schritt 19: jQuery Endgültiger jQuery-Code

So sieht all unsere jQuery aus:


Abschluss

Ich hoffe, Sie haben etwas gelernt, vor allem, dass es oft vermeidbar ist, sich in Photoshop auf nicht flexible Designs festzulegen, indem Sie CSS3-Techniken direkt im Browser verwenden. Danke, dass du mitgehst!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.