Mehrere Beispiele für kleine Funktionen, die mit reinem CSS erstellt wurden

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. Heutzutage ist CSS3 auf Basis von CSS immer noch sehr wichtig. Im Folgenden werden wir Ihnen einige Beispiele für kleine Funktionen vorstellen, die mit CSS erstellt wurden.

CSS@supports

Jeder gute Frontend-Entwickler muss Funktionstests durchführen, wenn er Funktionen verwendet, die in einigen Browsern möglicherweise nicht verfügbar sind. Funktionstests wurden schon immer in JavaScript durchgeführt, und viele Leute verwenden Modernizr, ein hervorragendes Dienstprogramm, das aus vielen gut getesteten Fällen besteht, um Funktionstests durchzuführen. Für Entwickler ist jedenfalls eine neue API erschienen: @supports, die es ermöglicht, Funktionstests mit CSS durchzuführen. Hier sind einige einfache Beispiele, wie @supports funktioniert:

Der Code lautet wie folgt:

/* basic usage */@supports(prop:value) {/* more styles */}
/* real usage */@supports (display: flex) {p { display: flex; }}
/* testing prefixes too */@supports (display: -webkit-flex) or(display: -moz-flex) or(display: flex) 
{section {display: -webkit-flex;display: -moz-flex;display: flex;float: none;}}

Diese neue @supports-Funktion verfügt auch über eine entsprechende JavaScript-Version, die jedoch abgelaufen ist Ich freue mich darauf, es bald zu verwenden!

CSS-Filter

Schreiben Sie einen Dienst, der den Farbton eines Bildes ändert, und Sie können es für Milliarden von Dollar an Facebook verkaufen. Sicher, das ist eine Selbstverständlichkeit, aber das Schreiben von Bildfiltern ist keine Wissenschaft. Ein kleines Programm, das ich in meiner ersten Woche bei Mozilla geschrieben habe (das einen Preis gewonnen hat, eh, ich sage es nur), hat etwas JS-basierte Mathematik verwendet, um Bildfilter mit Canvas zu erstellen, aber jetzt können wir Bilder mit CSS Filtered erstellen.

Der Code lautet wie folgt:

/* simple filter */.myElement {-webkit-filter: blur(2px);}
/* advanced filter */.myElement {-webkit-filter: blur(2px) 
grayscale (.5) opacity(0.8) hue-rotate(120deg);}

Dieser Filtertyp ändert nur das ursprüngliche Erscheinungsbild des Bildes. Der besagte Filter wird nicht beim Speichern oder Exportieren des Bildes verwendet, sondern wenn Sie Dies ist nützlich, wenn Sie ein Foto verschönern oder an einem Poster arbeiten müssen.

Pointr-Ereignisse und Bricking-Klicks

Die CSS-Pointer-Events-Eigenschaft bietet eine Möglichkeit, ein Element effektiv zu deaktivieren. Aus diesem Grund löst das Klicken auf einen Link kein Click-Ereignis aus :

Der Code lautet wie folgt:

/* do nothing when clicked or activated */.disabled { pointer-events: none; }
/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {alert("Clicked!");});

Im obigen Beispiel wird das Klickereignis aufgrund des CSS-Pointer-Events-Werts nicht ausgelöst. Ich habe festgestellt, dass dies ein großer Vorteil ist. Sie müssen nicht überall den Klassennamen oder die Attribute überprüfen, um sicherzustellen, dass ein Element deaktiviert ist.

Menü ein- und ausblenden

Mit CSS können wir Übergangseffekte und Animationen erstellen, aber oft benötigen wir JavaScript-Bibliotheken, die uns dabei helfen, einige Dinge zu ändern und Animationen zu steuern. Eine sehr beliebte Animation ist der Klapp- und Erweiterungsmenüeffekt. Viele Leute wissen nicht, dass er nur mit CSS erreicht werden kann!

Der Code lautet wie folgt:

/* slider in open state */.slider {overflow-y: hidden;max-height: 500px; /* approximate max height */
transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}
/* close it with the "closed" class */.slider.closed {max-height: 0;}

Eine geschickte Verwendung von Max-Height kann es ermöglichen, dass Elemente je nach gewünschtem Effekt reduziert und erweitert werden.

CSS-Zähler

Der Begriff „Zähler“ bedeutet im Web oft etwas, das uns zum Lachen bringt, aber auch CSS-Zähler sind etwas, das uns sogar zum Lachen bringt mehr Sache. Mit CSS-Zählern können Entwickler :before und :after verwenden, um einen Zähler für bestimmte Elemente zu erhöhen:

Der Code lautet wie folgt:

/* initialize the counter */ol.slides {counter-reset: slideNum;}
/* increment the counter */ol.slides > li {counter-increment: slideNum;}
/* display the counter value */ol.slides li:after {content: "[" counter(slideNum) "]";}

In Folien werden häufig CSS-Zähler verwendet. Der Effekt ist wie eine Liste von Formularinhalten.

Unicode-CSS-Stilnamen

Es gibt viele CSS-Best-Practice-Dokumente, und alle beginnen mit der Benennung von CSS-Stilen. Sie werden nie ein Dokument sehen, das besagt, dass Sie Unicode-Symbole zur Benennung Ihrer Stile verwenden sollen:

Der Code lautet wie folgt:

.ಠ_ಠ {border: 1px solid #f00;background: pink;}
.❤ {background: lightgreen;border: 1px solid green;}

Bitte verwenden Sie diese Symbole nicht. Es sei denn, du kannst!

CSS-Kreis

CSS-Dreieck ist eine technische Aufgabe, und das Gleiche gilt für CSS-Kreis. Durch Missbrauch des CSS-Rahmenradius können Sie perfekte Kreise erstellen!

Der Code lautet wie folgt:

circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* width and height can be anything, as long as they're equal */
}

Sie können Ihren Kreisen Farbverläufe hinzufügen und sogar CSS-Animationen verwenden, um Ihre Kreise zu bewegen! CSS wird demnächst über einheitlichere APIs für diese Formen verfügen, aber vorerst können Sie Kreise auf diese Weise erstellen.

Das Obige sind einige Beispiele für kleine Funktionen, die mit reinem CSS erstellt wurden. Ich hoffe, sie können jedem helfen.

Verwandte Empfehlungen:

Tipps zum Zeichnen verschiedener grundlegender Grafiken mit CSS3

Verwenden Sie CSS 3, um lange Schatten zu erstellen

Ein paar nützliche CSS-Funktionstipps

Das obige ist der detaillierte Inhalt vonMehrere Beispiele für kleine Funktionen, die mit reinem CSS erstellt wurden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!