Mehrere nützliche Tipps zu CSS-Funktionen

CSS bietet eine Stilbeschreibung für die HTML-Auszeichnungssprache und definiert, wie darin enthaltene Elemente angezeigt werden. CSS ist ein Durchbruch im Bereich Webdesign. Es kann verwendet werden, um einen kleinen Stil zu ändern, um alle damit verbundenen Seitenelemente zu aktualisieren. In diesem Artikel stellen wir 8 nützliche Tipps zu CSS-Funktionen vor.

1. Reiner CSS-Tooltip

Viele Websites verwenden immer noch JavaScript, um Tooltip-Effekte zu erstellen, aber tatsächlich kann dies einfacher durch CSS erreicht werden. Am einfachsten ist es, ein Attribut mit dem Tooltip-Text in Ihren HTML-Code einzufügen, beispielsweise data-tooltip="…" . Anschließend können Sie Ihrer CSS-Datei den folgenden Code hinzufügen, um den Tooltip-Text über die Funktion attr() anzuzeigen:

.tooltip::after { content: attr(data-tooltip);
}

Ganz einfach, oder? Natürlich benötigen wir tatsächlich mehr Code, um Stile zu den Hinweisen hinzuzufügen, aber keine Sorge, es gibt leistungsstarke und reine CSS-Bibliotheken namens Hint.css und Balloon.css, die dafür entwickelt wurden.

2. Benutzerdefinierte Datenattribute und die Funktion attr() verwenden

Wir haben gelernt, wie man attr() zum Erstellen von Eingabeaufforderungen verwendet, und es gibt auch einige Szenarien, in denen diese Funktion verwendet werden kann. In Kombination mit Datenattributen können Sie mit einer einfachen HTML-Zeile Miniaturansichten mit Titel und Beschreibung erstellen:

Jetzt können Sie anzeigen der Titel und die Beschreibung über die Funktion attr():

.caption::after { content: attr(data-title);
...
}

Im Folgenden finden Sie konkrete Beispiele:

Hinweis: Bei dieser Methode kann es zu Problemen mit der Browserunterstützung kommen. Informationen zu bestimmten Inhalten finden Sie im Artikel Barrierefreiheitsunterstützung für CSS-generierte Inhalte.

3. CSS-Zähler

Mit CSS-Zählern können Sie tolle Funktionen erreichen. Dies ist keine sehr bekannte Eigenschaft, und die meisten Leute denken vielleicht sogar, dass Browser diese Eigenschaft nicht gut unterstützen, aber tatsächlich unterstützen alle Browser diese Eigenschaft:

Sie sollten jedoch keine CSS-Zähler verwenden, die bei der Bestellung verwendet werden Listen

eignet es sich besser für die Verwendung bei Nummern, die unter Paginierung oder Bildergalerien angezeigt werden. Anhand des folgenden Beispiels können Sie sehen, wie Sie ausgewählte Elemente mit sehr wenig Code (oder sogar ohne JavaScript) zählen können:

CSS-Zähler eignen sich auch hervorragend zum Anzeigen von Listen mit Elementen, die per Drag & Drop neu angeordnet werden können. Dynamisch ändernde Zahlen on:

Wie beim letzten Beispiel müssen wir bedenken, dass der mit dieser Methode generierte Inhalt möglicherweise Probleme mit der Barrierefreiheit aufweist.

4. Frosted-Effekt durch CSS-Filter

In iOS7 hat Apple den „Milchglas“-Effekt implementiert – durchscheinende, verschwommene Elemente, die aussehen, als würden sie eine Milchglasschicht bedecken. Inspiriert von Apple wird dieser Effekt vielerorts genutzt. Es war etwas schwierig, diesen Effekt vor CSS-Filtern nachzubilden. Sie müssen diesen Milchglaseffekt erzielen, indem Sie Blur Image verwenden. Mittlerweile werden CSS-Filter jedoch von fast allen gängigen Browsern unterstützt, sodass sich dieser Effekt viel einfacher reproduzieren lässt.

In Zukunft können wir diesen Effekt durch Hintergrundfilter und filter()-Funktionen erzielen, aber derzeit unterstützt nur Safari beide Funktionen.

Für weitere Informationen zu CSS-Filtern können Sie hier klicken, um mehr zu erfahren.

5. HTML-Elemente als Hintergrund verwenden

Im Allgemeinen können wir eine JPEG- oder PNG-Datei als Hintergrund festlegen, oder wir können auch einen Hintergrund mit Farbverlauf festlegen. Aber wussten Sie, dass Sie mit der Funktion element() ein

als Hintergrundbild festlegen können? Derzeit wird die Funktion element() nur in Firefox unterstützt:

Die Möglichkeiten sind endlos, hier ist ein Beispiel auf MDN.

Für eine relevante Einführung zur CSS-Element()-Funktion können Sie hier klicken.

6. Erstellen Sie bessere Raster mit calc()

Flüssige Netze sind großartig, haben aber immer noch ernsthafte Probleme. Beispielsweise ist der Abstand oben und unten fast nie gleich dem Abstand links und rechts. Auch wenn ein anderes Rastersystem verwendet wird, wird das Markup sehr verwirrend. Obwohl Flex-Layout nicht die endgültige Lösung ist, können wir durch die Kombination mit calc() (das als Eigenschaftswert in der CSS-Datei verwendet werden kann) ein besseres Raster erstellen. Hier listet George Martsoukos viele Beispiele auf, etwa ein Galerieraster mit perfektem Abstand. Durch die Verwendung einer vorkompilierten CSS-Sprache wie Sass kann der Aufbau eines kreativen Grid-Systems sehr einfach und leicht zu warten sein. Gleichzeitig ist die Browserunterstützung für calc() nahezu perfekt, sodass calc() definitiv eine Funktion ist, die Sie beherrschen sollten.

Eine Einführung in die CSS-Funktion calc() finden Sie hier.

7. Position:feste Elemente über calc() ausrichten

Eine weitere Funktion von calc() ist die Ausrichtung von position:festen Elementen. Sie haben beispielsweise einen Content-Wrapper mit fließenden Abständen links und rechts. Sie möchten Elemente innerhalb dieses Content-Wrappers genau an einer festen Position ausrichten. In diesem Fall ist es jedoch sehr schwierig, die spezifische Zuordnung der linken Seite zu berechnen und richtige Attribute. Mit calc() können Sie relative und absolute Werte kombinieren, um Ihre Elemente präzise zu positionieren:

.wrapper { max-width: 1060px; margin: 0 auto;
}.floating-bubble { position : behoben; rechts: calc(50% - 530px); /* 50% - halbe Wrapper-Breite */}


Zum Beispiel:

Sie können eine detaillierte Einführung erhalten Lesen Sie zu diesem Aspekt den Artikel „Position ausrichten: feste Elemente mit CSS berechnen“ von @brnnbrn.

8. Verwenden Sie Cubic-Bezier(), um Animationen zu implementieren

Um die Benutzeroberfläche einer Website oder APP attraktiver zu gestalten, können Sie einige Animationen verwenden, aber Sie können die Geschwindigkeit wählen Der Übergangseffekt ist recht begrenzt, z. B. linear oder „ease-in-out“. Die Standardgeschwindigkeitskurve kann nicht einmal den Effekt einer elastischen Bewegung erreichen. Durch die Verwendung der Funktion „cubic-bezier()“ können Sie genau die Animation erzielen, die Sie möchten.

Es gibt zwei Möglichkeiten, „Cubic-Bezier()“ zu verwenden: Verstehen Sie den Mechanismus dahinter und erstellen Sie ihn selbst, oder verwenden Sie den Kubik-Bezier-Generator.

Ehrlich gesagt verwende ich Letzteres.

Für eine detaillierte Einführung in Kubikbezier() klicken Sie bitte hier.

Zusammenfassung

Eine intelligentere Verwendung von CSS-Funktionen kann nicht nur die oben genannten Probleme lösen, z. B. die Erstellung eines besseren Rasters, sondern Ihnen auch mehr kreative Freiheit geben. Da die Browserunterstützung immer besser wird, können Sie CSS-Funktionen wie calc() verwenden, um Ihren bisherigen CSS-Code zu ändern und zu verbessern.

Dieser Artikel wurde auf der Grundlage von @Anselm Urbans „8 Clever Tricks with CSS Functions“ übersetzt. Die gesamte Übersetzung enthält unser eigenes Verständnis und unsere Gedanken. Wenn die Übersetzung nicht gut ist oder etwas nicht stimmt, fragen Sie bitte Freunde Bitten Sie die Branche um Rat. Wenn Sie diese Übersetzung erneut drucken möchten, geben Sie bitte die englische Quelle an: https://www.sitepoint.com/8-clever-tricks-with-css-functions.

Die oben genannten sind 8 CSS-Funktionstipps. Freunde, die sie für gut halten, sollten sie schnell sammeln.

Verwandte Empfehlungen:

Jquery-CSS-Funktion zur dynamischen Manipulation des Stils von DOM-Knoten

CSS3-Tipps zum Zeichnen verschiedener grundlegender Grafiken

Die umfassendsten CSS-Entwicklungsfähigkeiten

Das obige ist der detaillierte Inhalt vonMehrere nützliche Tipps zu CSS-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn