10 (mehr) CSS-Tricks, die Sie wahrscheinlich übersehen haben
Es gibt viele CSS-Ausschnitte, die Webentwickler verwenden können, um bestimmte Ergebnisse zu erzielen. Außerdem gibt es CSS-Tricks, die Sie zum Beispiel für die vertikale Ausrichtung von Inhalten verwenden können. Da sich CSS ständig weiterentwickelt, stolpern wir immer wieder über coole CSS-Tricks, die Spaß machen.
In dem heutigen Beitrag stelle ich Sie vor 10 weitere CSS-Attribute und Tricks, die Sie möglicherweise nicht kennen.
1. Schreiben Sie vertikal
Es gibt ein CSS-Attribut namens Schreibmodus das akzeptiert einen dieser drei Werte; horizontal-tb, vertikal-rl und vertikal-lr.
horizontal-tb ist die Standardeinstellung und bewirkt den typischen horizontalen Textfluss von links nach rechts in einem Element.
Das Vertikale-* Die Werte beziehen sich jedoch auf den vertikalen Blockfluss, sodass der Text von den Browsern von oben nach unten geschrieben wird. Im vertikal-rl, Neue Zeilen werden links von den vorherigen Zeilen eingefügt und umgekehrt vertikal-lr.
Dies ist nützlich für Anzeigen von Sprachen wie Chinesisch und Japanisch Diese werden normalerweise von oben nach unten geschrieben und auch, wenn Sie Text vertikal anzeigen möchten, um horizontalen Platz zu sparen, wie in Tabellenköpfen.
Hinweis: Wenn Sie die Richtung der einzelnen Buchstaben steuern möchten, können Sie die Textausrichtung nach Bedarf aufwärts oder seitlich drehen.
-Webkit-Schreibmodus: Vertical-rl; -ms-writing-mode: tb-rl; Schreibmodus: vertikal-rl;
2. Farbwert wiederverwenden
Das Schlüsselwort currentColor trägt den Wert von Farbe Attribut und kann in anderen Attributen verwendet werden, die Farbwerte akzeptieren, wie z Hintergrund.
div Hintergrund: linearer Gradient (90 Grad, currentColor 50%, Schwarz 50%);… Farbe: # FFD700; / * currentColor ist # FFD700 * /
3. Hintergründe mischen
Ein Element kann mehr als einen Hintergrund haben (eine Hintergrundfarbe und mehrere Hintergrundbilder). Das Hintergrund-Mischmodus fügt alle gemäß dem angegebenen Mischmodus zusammen. Zur Zeit gibt es insgesamt 16 Mischmodi.
Hintergrund-Mischmodus: Unterschied;
4. Elemente mischen
Im Mix-Blend-Modus werden Inhalt und Hintergrund überlappender Elemente gemischt. Chrome scheint nicht alle Modi zu unterstützen, obwohl Firefox dies tut.
Mix-Mix-Modus: Farbe;
Ich habe zwei Elemente genommen img zeigt das Bild einer Rose und a Spanne mit einem grafischen Hintergrund, stapelten sie und wendeten einige Mix-Mix-Modi an.
5. Zeigerereignisse ignorieren
Sie können ein Element für jedes Zeigerereignis ignorieren, indem Sie ein einzelnes Attribut verwenden Zeigerereignisse. Durch das Geben Zeigerereignisse der Wert von keiner In einem Element wird dadurch verhindert, dass es sich um ein Ereignis handelt, bei dem Ereignisse angezeigt werden. IE11 + Unterstützung enthalten.
In der folgenden Demo befindet sich ein Kontrollkästchen unter zwei übereinander gestapelten Bildern. Beide Bilder tragen Zeigerereignisse: keine, So können wir das unter ihnen verdeckte Kontrollkästchen aktivieren. Basierend auf dem aktivierten Status des Kontrollkästchens wird das gewünschte Bild angezeigt, während das andere ausgeblendet wird.
6. Dekorieren Sie Split-Boxen
Normalerweise wird, wenn eine Box geteilt wird (z. B. wenn ein Inline-Element Zeilenumbrüche feststellt), die Kanten der aufgeteilten Teile frei von Boxstilen und wirken aufgeschnitten. Um dies zu vermeiden, können Sie verwenden Box-Deko-Pause: Klon.
Um dies mit einem Beispiel und einer frühen Erinnerung an "Weihnachten am Horizont" nachzuvollziehen, folgt hier eine Liste von Santa's Reindeer, die alle in einem einzigen Text eingetippt sind Spanne! Ho! Ho! Ho!
Hinweis: Auch wenn moderne IE unterstützt Box-Deko-Pause, Am Rand der Trennliniengrenze ist das Rendern nicht glatt und der Hintergrund wirkt aufgeschnitten. Aber es wird gerendert Box Schatten schön, weshalb ich Box-Schatten für Rahmen und Hintergrund verwendet habe. Es gibt auch keine horizontale Auffüllung an den Kanten in IE, die Sie möglicherweise mit Leerzeichen füllen möchten.
7. Reduzieren Sie Tabellenelemente
Sichtbarkeit: Zusammenbruch ist ein Attribut, das nur für Tabellenelemente wie Zeilen und Spalten erstellt wird. Wenn es für irgendetwas anderes verwendet wird, verhält es sich wie Sichtbarkeit: versteckt. Chrome behandelt es jedoch gerne versteckt auch für tischelemente.
Bei der Zuweisung Sichtbarkeit: Zusammenbruch Bei einem Tabellenelement wird es verborgen und der Raum wird durch den Inhalt in der Nähe gefüllt - so, wie er sich bei der Verwendung verhalten würde Anzeige: keine stattdessen.
Aber nicht wie Anzeige: keine Dadurch wird das Tabellenlayout nach dem Entfernen des Bereichs geändert. Das Layout bleibt in unverändert Sichtbarkeit: Zusammenbruch. Sie können hier genauer sehen, wie es funktioniert.
8. Erstellen Sie Spalten
Sie können ein Spaltenlayout für Ihre Inhalte erstellen Säulen Attribut. Hier können Sie angeben, wie viele Spalten (Spaltenanzahl) und wie jede Spaltenbreite (Spaltenbreite) sind in einem Element darzustellen.
Wenn der Inhalt kein Text ist, wie zum Beispiel ein Bild, müssen Sie die Breite der Spalte entsprechend der Spalte berücksichtigen. Für das folgende Beispiel habe ich nur verwendet Spaltenanzahl um anzugeben, wie viele Spalten ich möchte.
-Webkit-Spaltenanzahl: 2; -Zahlsäulenzahl: 2; Spaltenanzahl: 2;
9. Gestalten Sie die Größe der Elemente
Ein Element kann mit dem CSS3-Attribut in der Größe (vertikal, horizontal oder beides) vergrößert werden Größe ändern . Die Veränderbarkeit in a Textbereich kann mit dem gleichen deaktiviert werden.
Größe ändern: vertikal; Größe ändern: horizontal; Größe ändern: beide; Größe ändern: keine;
10. Erstellen Sie Muster
Es können mehrere CSS3-Gradienten (sowohl linear als auch radial) für ein einzelnes Element vorhanden sein, und sie können aufeinander gestapelt werden, um Muster zu erstellen. Das erlaubt uns zu Erstellen Sie schöne Hintergründe für Elemente, ohne externe Bilder zu verwenden. Damit es funktioniert, kann es etwas Übung erfordern.
