de.hideout-lastation.com
Paradies Für Designer Und Entwickler


So erstellen Sie reines CSS onClick Image Zoom-Effekt

CSS hat keine Pseudoklasse für das Targeting von Klickereignissen, und dies ist einer der größten Schwachpunkte von Frontend-Entwicklern. Die am nächsten liegende Pseudoklasse ist :active die ein Element für den Zeitraum formatiert, in dem ein Benutzer seine Maus darüber hält.

Dieser Effekt ist jedoch von kurzer Dauer: Sobald der Benutzer die Maus loslässt, : :active funktioniert nicht mehr. Wir müssen eine andere Möglichkeit finden, das Klickereignis in CSS zu emulieren .

Dieser Post wurde als Reaktion auf die Anfrage eines Lesers geschrieben und erklärt, wie man das Click-Ereignis mit reinem CSS in einem bestimmten Anwendungsfall, dem Bild-Zoom, anvisieren kann .

Sie können das Endergebnis unten sehen - eine CSS-Lösung für Bildzoom bei Klick .

Wann sollte die CSS-Lösung verwendet werden?

Bevor ich fortfahre, möchte ich sagen, dass ich für den Bildzoom die CSS-only-Methode (die die Abmessungen des Bildes ändert) nur dann empfehle, wenn ein einzelnes oder eine Gruppe von wenigen Bildern die Zoom-Funktion haben soll.

Für eine korrekte Galerie bietet JavaScript mehr Flexibilität und Effizienz.

Front-End-Techniken, die wir verwenden werden

Nun, da Sie gewarnt wurden, lassen Sie uns schnell die drei wichtigsten Techniken betrachten, die wir verwenden werden:

  1. Das HTML-Tag, mit dem Browser verknüpfbare Bereiche über ein Bild erstellen können . Lesen Sie mehr auf der Element in meinem früheren Beitrag.
  2. Das usemap Attribut des Tag, der das Bild an die Imagemap anschließt.
  3. Die CSS-Pseudoklasse :target, die ein Element darstellt, das mit dem ID-Selektor angesprochen wurde.
1. Erstellen Sie die HTML-Basis

Lassen Sie uns zuerst die HTML-Basis erstellen. Im folgenden Code fügen wir ein Bild hinzu, das vergrößert und verkleinert werden soll, und schließen Schaltflächensymbole zum Vergrößern und Verkleinern.

Es ist wichtig, eine ID auf dem zu vergrößernden Bild zu haben, und die Schließen-Schaltfläche muss ein Link sein, der das Attribut href="#" hat. Ich werde später im Beitrag erklären, warum.

2. Fügen Sie das CSS hinzu

Anfangs sollte das Schließen-Symbol nicht angezeigt werden . Die Eigenschaften " position, " margin-, " left und " bottom platzieren die Symbole "Erweitern" und "Schließen" an der Stelle, an der sie sich befinden sollen - in der oberen rechten Ecke des Bildes.

Die pointer-events: none; Mit dieser Regel können Mausereignisse das Expand-Symbol passieren und das Bild erreichen .

 .img {Höhe: 150px; Breite: 200px; } .close {Hintergrundbild: URL ("Close-icon.png"); Hintergrund-Wiederholung: keine Wiederholung; unten: 418px; Anzeige: keine; Höhe: 32px; links: 462px; Rand oben: -32px; Position: relativ; Breite: 32px; } .expand {unten: 125px; Rand links: -32px; Rand rechts: 16px; Zeiger-Ereignisse: keine; Position: relativ; } 
3. Fügen Sie die Imagemap hinzu

In der Imagemap sollte der anklickbare Bereich in der oberen rechten Ecke des Bilds direkt unter dem Symbol "Expand" und in seiner Größe angezeigt werden. Setze das Element vor dem ersten Tag im HTML-Code. Wir binden das Bild im nächsten Schritt an die Karte.

Im Codeblock oben, der tag definiert die Form, Größe und den URI eines verknüpfbaren Bereichs innerhalb einer Imagemap . Bei einer rechteckigen Form nimmt das Attribut shape den rect Wert an, und die vier Werte des Attributs coords repräsentieren den Abstand in Pixel zwischen:

  1. der linke Rand des Bildes und der linke Rand des Verknüpfungsbereichs
  2. der obere Rand des Bildes und der obere Rand des Linkbereichs
  3. der linke Rand des Bildes und der rechte Rand des Linkbereichs
  4. die obere Kante des Bildes und die untere Kante des Linkbereichs

Der Wert des href Attributs muss der Hash-Bezeichner des Bildes sein (deshalb sollte das Bild eine id ).

4. Binden Sie das Bild an die Imagemap

Fügen usemap dem Bild das Attribut usemap, um es an die usemap zu binden . Sein Wert muss die Hash-Darstellung des Namensattributs des. Sein Tag, den wir in Schritt 3 hinzugefügt haben.

 Wie funktioniert der Schließen-Button? 

Da die Schaltfläche Schließen als Hintergrundbild hinzugefügt wurde (Schritt 2) und tatsächlich ein Tag mit dem Attribut href=# (Schritt 1), wird beim Anklicken die Fragmentkennung vom Ende des URI entfernt. Daher entfernt es auch die Pseudo-Klasse :target aus dem Bild und das Bild wird auf seine vorherige Größe zurückgesetzt .

Jetzt ist der CSS-only-Zoom-on-click-Effekt fertig, sieh dir die Demo unten an, oder lies ein bisschen mehr über die Theorie hinter Image Maps im nächsten Abschnitt.

Hintergrundinfo: Warum? und nicht?

Inzwischen wissen Sie sicherlich, dass das wichtigste Ziel für diese CSS-Lösung darin besteht, das Bild mit dem Attribut href="#imgid" könnte auch mithilfe des Tags anstelle der href="#imgid" erfolgen.

Dies kann wahr sein, aber wenn es um Bilder geht, verwenden Sie die Element ist geeigneter. Es ist noch wichtiger, dass der Zoom beim Klicken auf einen größeren Bereich im Bild statt nur auf das Symbol "Erweitern" ausgeführt wird. gibt Ihnen eine einfache Lösung.

Der default für das shape Attribut erstellt einen rechteckigen verknüpfbaren Bereich, der das gesamte Bild abdeckt . Wenn Sie stattdessen verwenden würden, müssten Sie es codieren, um das Bild abzudecken, und Sie müssen möglicherweise auch ein Wrapper-Element für den gleichen Zweck verwenden.

Um auch über die Vorbehalte dieser Lösung zu sprechen, wird die CSS-Eigenschaft pointer-events (die wir in Schritt 2 verwendet haben) von Internet Explorer erst ab Version 11 unterstützt .

Um IE-Browser vorher zu unterstützen, möchten Sie vielleicht statt dessen verwenden oder lassen Sie das Bild durch Klicken auf eine beliebige Stelle vergrößern (in diesem Fall ist das Symbol "Erweitern" nicht erforderlich).

Erstellen Sie in Pure CSS mit Wenk Tooltips

Erstellen Sie in Pure CSS mit Wenk Tooltips

Mit solch einem seltsamen Namen würden Sie von Wenk, einer kostenlosen CSS-Tooltip-Bibliothek, nicht viel erwarten. Aber es ist eine der kleinsten Bibliotheken, die man mit weniger als 1KB beim Zippen bekommen kann.Wenk verwendet reines CSS mit den Attributen data data-*, um Live-Tooltips zu erstellen, die Sie nach Ihren Wünschen neu positionieren und positionieren können. D

(Tech- und Design-Tipps)

15 Must-Have-Apps für Studenten

15 Must-Have-Apps für Studenten

Das College ist einer jener Punkte im Leben eines Menschen, an die man sich nur ein wenig gewöhnen kann. Neue Klassen, neue Umgebung, neues Wissen ... Es kann ein Problem sein, Ihre Notizen zu organisieren, ein bestimmtes Projekt abzuschließen oder sich selbst über das Allgemeinwissen auf dem Laufenden zu halten.Mi

(Tech- und Design-Tipps)