8 clevere Tricks mit CSS -Funktionen

Die Kraft von CSS ist weit über die Fantasie vieler Webentwickler hinaus. Im Laufe der Zeit ist die Stylesheet -Sprache immer leistungsfähiger geworden und bringt Funktionen in den Browser, der ursprünglich JavaScript benötigte. In diesem Artikel werden acht clevere CSS -Funktionstipps eingeführt, die überhaupt kein JavaScript erfordern.

Schlüsselpunkte

• CSS -Funktionen können verwendet werden, um verschiedene Effekte und Funktionen wie Tooltips, Miniaturansichten, Zähler und Frostedglas -Effekte ohne JavaScript zu erzeugen.
• calc() Funktionen können verwendet werden, um intelligentere Gittersysteme und Ausrichtung von festen Positionselementen zu erstellen, wodurch eine größere Flexibilität und Präzision im Design dargestellt wird.
Die Funktion
• CSS ermöglicht auch kreative Animationen mithilfe der Funktion cubic-bezier() sowie das Potenzial, HTML -Elemente als Hintergrundbilder mithilfe der element() -Funktion zu verwenden, obwohl letztere derzeit nur von Firefox unterstützt wird.

1. reines CSS -Tooltips

   Viele Websites verwenden immer noch JavaScript, um Tooltips zu erstellen. Tatsächlich ist es jedoch einfacher, CSS zu verwenden. Die einfachste Lösung besteht darin, die Dateneigenschaften im HTML -Code zu verwenden, um Tooltip -Text wie data-tooltip="…" bereitzustellen. Mit diesem Tag können Sie Folgendes in CSS einfügen, um den Tooltip -Text in der Funktion attr() anzuzeigen:

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

   Es ist sehr einfach und klar, oder? Natürlich ist mehr Code benötigt, um die Tooltips tatsächlich zu stylen, aber keine Sorge, es gibt eine großartige reine CSS -Bibliothek speziell für diesen Zweck namens Hint.CSS.

2. (Missbrauch) benutzerdefinierte Datenattribute und attr () Funktion

   Wir haben attr() für Tooltips verwendet, aber es gibt einige andere Anwendungsfälle. Wenn Sie Dateneigenschaften kombinieren, können Sie Miniaturbilder mit Titeln und Beschreibungen mit nur einer Zeile von HTML -Code erstellen:

   <a class="caption" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="秃鹫" data-description="...">
     <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
   </a>

   Sie können jetzt die Funktion attr() verwenden, um den Titel und die Beschreibung anzuzeigen:

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

   Dies ist ein funktionierendes Beispiel für eine Miniaturansicht mit hover -Anzeigeanimationstitel: [CodePen -Beispiel -Link] (Annahme, dass CodePen -Link hier eingefügt werden sollte)

   Hinweis: Der generierte Inhalt kann Probleme mit der Zugänglichkeit haben. Dieser Artikel über die Unterstützung der Zugänglichkeit für CSS -generierte Inhalte bietet eine nützliche Interpretation dieses Themas.

CSS -Zähler

3. Sie können CSS -Zähler verwenden, was wie Magie erscheint. Es ist nicht das bekannteste Feature, und die meisten Menschen denken vielleicht, dass es es nicht sehr gut unterstützt, aber tatsächlich unterstützt jeder Browser CSS-Zähler: [Kann ich CSS-Zähler verwenden?] (Angenommen, kann ich verwendet werden, wenn ich verwenden sollte, wenn ich eingesetzt werden sollte, wenn ich eingesetzt werden sollte, eingesetzt werden sollte, Hier Link)

   Während Sie keine CSS -Zähler für bestellte Listen verwenden sollten (<ol></ol>), eignen sich Zähler hervorragend für Paginierung oder Anzeigen von Zahlen unter Elementen in der Galerie. Sie können auch die Anzahl der ausgewählten Elemente zählen, was sehr beeindruckend ist, wenn man bedenkt, dass Sie nur sehr wenig Code benötigen (und kein JavaScript): [CodePen -Beispiel -Link] (vorausgesetzt, dass der CodePen -Link hier eingefügt werden sollte).

   CSS -Zähler eignen sich auch hervorragend zum dynamischen Ändern von Zahlen in der Projektliste, die durch Drag & Drop: [CodePen -Beispiel -Link] neu bestellt werden können (vorausgesetzt, der CodePen -Link sollte hier eingefügt werden).

   Denken Sie wie beim letzten Beispiel daran, dass der generierte Inhalt Probleme mit der Zugänglichkeit aufweist.

4. Verwenden Sie CSS -Filter, um gefrostete Glaseffekte zu erreichen

   Mit der Veröffentlichung von iOS 7 bringt Apple einen „frostierten Glas“ -Effekt - transparente, verschwommene Elemente, die wie gefrostete Glasfenster aussehen. Inspiriert von Apples Implementierung erschien dieser Effekt an vielen Orten. Wenn Sie diesen Effekt reproduzieren, ist es etwas schwierig, bevor Sie einen CSS -Filter haben. Sie müssen ein verschwommenes Bild verwenden, um einen gefrosteten Glasffekt zu erzeugen. Jetzt unterstützen fast alle großen Browser CSS -Filter vollständig, sodass es viel einfacher ist, diesen Effekt zu reproduzieren. [Kann ich CSS-Filter verwenden?] (Angenommen, ich kann hier Link verwenden)

   In Zukunft können wir die Funktionen

   und

   verwenden, um ähnliche Effekte zu erzielen, aber diese beiden Funktionen werden derzeit nur von Safari unterstützt. backdrop-filter filter()

5. Verwenden Sie HTML -Elemente als Hintergrundbild

   Normalerweise geben Sie eine JPEG- oder PNG -Datei als Hintergrundbild oder möglicherweise einen Gradienten an. Aber wussten Sie, dass Sie mithilfe der Funktion

   auch

   als Hintergrundbild verwenden können? Derzeit wird die element() -Funktion nur von Firefox unterstützt: [Kann ich CSS-Elementfunktion verwenden?] (Angenommen, die Link kann ich hier einfügen) <div> <code>element() Die Möglichkeiten sind nahezu unbegrenzt, hier ist ein Beispiel von MDN.

6. Erstellen Sie mit Calc ()

   intelligentere Gitter flüssiges Netz ist eine großartige Sache, aber es gibt einige ernsthafte Probleme. Zum Beispiel ist es nicht möglich, den Abstand zwischen oberer und Boden gleich zu machen wie der Abstand zwischen links und rechts. Die Markierung ist auch sehr verwirrend, abhängig von dem von Ihnen verwendeten Netzsystem. Selbst Flexbox selbst ist nicht die endgültige Lösung, sondern die

   -Funktion (die als Wert in CSS verwendet werden kann), kann das Netz besser werden. In diesem Tutorial auf dieser Website zeigt George Martsoukos einige praktische Beispiele wie ein Galerie -Netz mit perfektem Abstand. Mit CSS -Präprozessoren wie SASS kann der Aufbau kreativer Netzsysteme sehr einfach und einfach zu warten sein. Da die Browser -Unterstützung nahezu perfekt ist, ist

   eine bequeme Funktion, die Sie auf jeden Fall verwenden sollten. [Kann ich berechnen?] (Angenommen, ich kann den Link verwenden, sollte hier eingefügt werden) calc() calc()

7. Verwenden Sie CSS Calc (), um die Position auszurichten: Feste Elemente

   Ein weiterer Anwendungsfall für eine Funktion besteht darin, Elemente an festen Positionen auszurichten. Wenn Sie beispielsweise einen Inhaltsverpackung links und rechts mit Flüssigkeitsabstand haben und die festen Elemente in diesem Wrapper genau ausrichten möchten, haben Sie es schwer ? Mit

   können Sie relative und absolute Werte kombinieren, um Elemente perfekt auszurichten: calc() calc()

   Dies ist ein Beispiel: [Codeten -Beispiel -Link] (Annahme, dass CodePen -Link hier eingefügt werden sollte)

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

8. mit Cubic-Bezier ()

   animieren Um die Benutzeroberfläche einer Website oder Anwendung attraktiver zu gestalten, können Sie Animationen verwenden, aber die Standard -Lockerungsoptionen sind sehr begrenzt. Zum Beispiel "linear" oder "Eventual-In-Out". So etwas wie die Herstellung von Animationen ist selbst bei Standardoptionen nicht möglich. Mit der Funktion

   können Sie Elemente genau so animieren, wie Sie es wünschen.

   cubic-bezier() Es gibt zwei Möglichkeiten,

   zu verwenden - verstehen Sie die Mathematik dahinter und bauen Sie sie selbst auf oder verwenden Sie den Generator

   . cubic-bezier() cubic-bezier Ehrlich gesagt werde ich Letzteres wählen.

Schlussfolgerung

geschickte Verwendung von CSS -Funktionen löst nicht nur bekannte Probleme (z. B. den Aufbau eines intelligenteren Gittersystems), sondern bietet Ihnen auch eine größere kreative Freiheit. Wenn der Browserunterstützung besser wird, sollten Sie sich Ihre CSS sorgfältig ansehen und sie mit Funktionen wie

verbessern.

calc()

Häufig gestellte Fragen zu CSS -Funktionen

Welche grundlegenden CSS -Funktionen sollten ich als Anfänger verstehen?

CSS -Funktion wird verwendet, um den Wert des CSS -Attributs festzulegen. Einige grundlegende Funktionen, die jeder Anfänger kennen sollte, umfassen

,

, rgb(), rgba(), hsl() und hsla(). Die Funktionen calc() und rgb() werden verwendet, um Farben zu definieren, während die rgba() und hsl() -Funktionen verwendet werden, um Farben basierend auf Farbton, Sättigung und Helligkeit zu definieren. Mit der hsla() -Funktion können Sie Berechnungen durchführen, um den CSS -Attributwert zu bestimmen. calc()

Wie verwendet ich die Funktion calc () in CSS?

Die

-Funktion in

in CSS wird verwendet, um Berechnungen durchzuführen, die als Attributwerte verwendet werden können. Diese Funktion kann die mathematischen Operatoren von "" (Addition), "-" (Subtraktion), "*" (Mehrfach) und "/" (Division) verwenden. Sie können beispielsweise calc() verwenden, um ein DIV zu erstellen, das immer minus 20 Pixel für die Ansichtsfenster 50% wie unten gezeigt: calc(). div { width: calc(50% – 20px); }

Was ist der Unterschied zwischen RGB () und RGBA () -Funktionen in CSS?

Der Hauptunterschied zwischen den Funktionen

und

in rgb() CSS besteht darin, dass rgba() einen Alpha -Kanal enthält, der die Deckkraft der Farbe angibt. Der Alpha -Parameter beträgt eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig). Zum Beispiel können Sie: rgba() verwenden, um durchscheinend rot festzulegen. color: rgba(255, 0, 0, 0.5);

Wie erstelle ich Gradienten mit CSS -Funktionen?

CSS -Funktionen können verwendet werden, um Gradienten mithilfe der Funktionen linear-gradient() und radial-gradient() zu erstellen. Um beispielsweise einen linearen Gradienten von rot bis blau zu erstellen, können Sie: background: linear-gradient(red, blue); verwenden. Um einen radialen Gradienten von der Mitte rot bis zur Kante des Blaues zu erzeugen, können Sie: background: radial-gradient(red, blue); verwenden.

Kann ich Elemente mit CSS -Funktionen konvertieren?

Ja, CSS -Funktionen können zum Konvertieren von Elementen verwendet werden. Das Attribut transform kann mit verschiedenen Funktionen wie rotate(), scale(), skew() und translate() verwendet werden, um das Erscheinungsbild eines Elements zu ändern. Um beispielsweise ein Element um 45 Grad zu drehen, können Sie: transform: rotate(45deg); verwenden.

Was ist der Zweck der ATTR () -Funktion in CSS?

Die

-Funktion in attr() in CSS wird verwendet, um den Attributwert des ausgewählten Elements zurückzugeben. Dies ist nützlich, um Inhalte usw. zu generieren, usw. Sie können beispielsweise attr() verwenden, um den Wert der "HREF" -Spertage des Links im Tooltip: a:after { content: attr(href); } anzuzeigen.

Wie verwendet ich die Funktion var () in CSS?

Die var() -Funktion in CSS wird verwendet, um den Wert einer benutzerdefinierten Eigenschaft einzulegen (auch als "CSS -Variable" bezeichnet. Sie können beispielsweise eine benutzerdefinierte Eigenschaft --main-color: blue; definieren und sie dann in CSS wie folgt verwenden: color: var(--main-color);.

Kann ich Animationen mit CSS -Funktionen erstellen?

Ja, CSS -Funktionen können zum Erstellen von Animationen verwendet werden. Das Attribut animation in CSS ist für acht verschiedene Attribute abgekürzt, einschließlich animation-name, animation-duration, animation-timing-function usw. Um beispielsweise eine 2-Sekunden-Animation namens "Slidein" zu erstellen, können Sie: animation: slidein 2s; verwenden.

Was ist der Zweck der Funktion

url () in CSS?

Die

-Funktion in url() in CSS wird verwendet, um Dateien einzuschließen. Die häufigste Verwendung von Funktionen besteht darin, mit externen Stylesheets zu verlinken oder Bilder einzuschließen. Um beispielsweise das Hintergrundbild eines Elements festzulegen, können Sie: url() verwenden. background-image: url('image.jpg');

Kann ich 3D -Transformationen mit CSS -Funktionen erstellen?
Ja, die CSS -Funktion kann verwendet werden, um 3D -Transformationen zu erstellen. Das

-Merkmal in CSS kann mit Funktionen wie transform, rotateX(), rotateY(), rotateZ(), scale3d() und translate3d() verwendet werden, um 3D -Transformationen zu erstellen. Um beispielsweise ein Element um die x-Achse zu drehen, können Sie: transform: rotateX(45deg); verwenden.

Bitte beachten Sie, dass ich mein Bestes versucht habe, den Originaltext zu pseudo-originalisiert und das Originalformat und die Position des Bildes erhalten. Da ich nicht auf den CodePen zugreifen kann und ich Websites verwenden kann, habe ich den zugehörigen Link durch Platzhalter ersetzt. Bitte finden Sie den richtigen Link selbst und setzen Sie selbst ein.