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


10 (Mehr) CSS Tricks, die Sie wahrscheinlich übersehen haben

Es gibt viele CSS-Snippets, die Webentwickler verwenden können, um bestimmte Ergebnisse zu erzielen, und dann gibt es CSS-Tricks, die Sie beispielsweise 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.

Im heutigen Beitrag stelle ich Ihnen 10 weitere CSS-Attribute und Tricks vor, die Sie vielleicht nicht kennen .

1. Schreibe vertikal

Es gibt ein CSS-Attribut namens writing-mode das einen dieser drei Werte akzeptiert. horizontal-tb, vertical-rl und vertical-lr .

horizontal-tb ist der Standardwert und verursacht den typischen horizontalen Textfluss von links nach rechts in einem Element.

Die vertical-* Werte sind jedoch für den vertikalen Blockfluss, wodurch Text von den Browsern von oben nach unten geschrieben wird. In vertical-rl werden neue Zeilen links von den vorherigen hinzugefügt und umgekehrt für vertical-lr .

Dies ist nützlich für die Anzeige von Sprachen wie Chinesisch und Japanisch, die normalerweise von oben nach unten geschrieben werden, und für den Fall, dass Sie Text vertikal anzeigen möchten, um horizontalen Speicherplatz zu sparen, wie in Tabellenköpfen.

Hinweis: Wenn Sie die Ausrichtung einzelner Buchstaben steuern möchten, können Sie die Textausrichtung verwenden, indem Sie sie wie gewünscht aufrecht oder seitwärts drehen.

 -webkit-Schreibmodus: vertikal-rl; -ms-Schreibmodus: tb-rl; Schreibmodus: vertikal-rl; 

2. Verwenden Sie den Farbwert erneut

Das Schlüsselwort currentColor trägt den Wert des Farbattributs und kann in anderen Attributen verwendet werden, die Farbwerte wie background akzeptieren.

 div {Hintergrund: linear-gradient (90 Grad, currentColor 50%, schwarz 50%); ... Farbe: # FFD700; / * aktuelleFarbe ist # FFD700 * /} 

3. Hintergründe mischen

Ein Element kann mehr als einen Hintergrund haben (eine Hintergrundfarbe und mehrere Hintergrundbilder). Der background-blend-mode mischt alle von ihnen zusammen gemäß dem gegebenen Mischmodus. Momentan gibt es insgesamt 16 Mischmodi.

 Hintergrund-Blend-Modus: Unterschied; 

4. Elemente mischen

Mix-Blend-Modus blendet den Inhalt und Hintergrund überlappender Elemente ein. Chrome scheint nicht alle Modi zu unterstützen, obwohl Firefox dies tut.

 Mix-Blend-Modus: Farbe; 

Ich nahm zwei Elemente, ein Bild, das das Bild einer Rose und eine span mit einem grafischen Hintergrund zeigt, stapelte sie und wendete ein paar Mix-Blend-Modi an.

5. Ignoriere Zeiger-Ereignisse

Sie können ein Element für jedes Zeigerereignis unsichtbar machen, indem Sie ein einzelnes Attribut namens pointer-events . Indem pointer-events der Wert von none in einem Element gegeben wird, verhindert dies, dass es ein Ziel für Zeiger-Ereignisse ist. IE11 + Unterstützung enthalten.

In der folgenden Demo gibt es ein Kontrollkästchen unter zwei übereinander gestapelten Bildern. Beide Bilder tragen pointer-events: none, so dass wir auf das darunter liegende Kontrollkästchen klicken können. Basierend auf dem aktivierten Status des Kontrollkästchens wird das gewünschte Bild angezeigt, während das andere ausgeblendet wird.

6. Verzieren Sie geteilte Boxen

Wenn eine Box geteilt wird (z. B. wenn ein Inline-Element Zeilenumbrüche feststellt), weisen die Kanten der geteilten Bereiche normalerweise keine Boxstile auf und sind in Scheiben geschnitten. Um das zu vermeiden, können Sie box-decoration-break:clone .

Nun, um das mit einem Beispiel und einer frühen "Christmas in the horizon" -Mahnung nachzuvollziehen, hier ist eine Liste von Santa's Rentier, die alle in einem einzigen Feld eingegeben wurden! Ho! Ho! Ho!

Hinweis : Obwohl der moderne IE box-decoration-break, ist das Rendern am Rand des Split-Portionsrahmens nicht glatt und der Hintergrund sieht abgeschnitten aus. Aber es macht box-shadow schön, weshalb ich Box-Schatten für Rand und Hintergrund verwendet habe. Es gibt auch keine horizontale Auffüllung an den Kanten im IE, die Sie mit Leerzeichen füllen könnten.

7. Reduzieren Sie Tabellenelemente

visibility: collapse ist ein Attribut, das nur für die Tabellenelemente wie Zeilen und Spalten erstellt wird. Wenn es für etwas anderes verwendet wird, verhält es sich wie visibility: hidden . Chrome behandelt es jedoch wie hidden selbst für Tabellenelemente.

Wenn Sie visibility: collapse für ein Tabellenelement definieren, wird es ausgeblendet und sein Platz wird durch den Inhalt in der Nähe ausgefüllt - so wie es sich bei der Verwendung von display:none verhalten würde.

Im Gegensatz zu display:none, das das Tabellenlayout nach dem Entfernen des Platzes ändert, bleibt das Layout in der visibility:collapse . Sie können sehen, wie es hier genauer arbeitet.

8. Erstellen Sie Spalten

Sie können mit dem Attribut columns ein Spaltenlayout für Ihre Inhalte erstellen. Sie können angeben, wie viele Spalten ( column-count ) und wie jede Spaltenbreite ( column-width ) in einem Element gerendert werden soll.

Wenn es sich bei dem Inhalt um einen anderen Text handelt, z. B. ein Bild, müssen Sie die Breite der Spalte berücksichtigen. Für das folgende Beispiel habe ich nur column-count um anzugeben, wie viele Spalten ich haben möchte.

 -webkit-column-count: 2; -moz-column-count: 2; Spaltenanzahl: 2; 

9. Stellen Sie Elemente in der Größe veränderbar ein

Ein Element kann mit der CSS3-Attribut- resize der resize verändert werden (vertikal, horizontal oder beides). Die Größenanpassung in einem textarea kann unter Verwendung derselben deaktiviert werden.

 Größe ändern: vertikal; Größe ändern: horizontal; Größe ändern: beides; Größe ändern: keine; 

10. Erstellen Sie Muster

Es kann mehrere CSS3-Gradienten (sowohl linear als auch radial) für ein einzelnes Element geben und sie können aufeinander gestapelt werden, um Muster zu erzeugen. Dies ermöglicht uns , schöne Hintergründe für Elemente zu erstellen, ohne externe Bilder zu verwenden . Damit es funktioniert, kann es allerdings etwas Übung erfordern.

7 beste Sites zur Überprüfung der DNS-Ausbreitung

7 beste Sites zur Überprüfung der DNS-Ausbreitung

Wenn Änderungen an DNS- oder Domain Name Server-Datensätzen vorgenommen werden, wird die DNS-Weiterleitung aktiviert. Dies kann mehrere Stunden oder sogar Tage dauern. Während dieser Zeit schwankt die DNS-IP-Adresse. Ihre Besucher können auf Ihrer neuen Website oder auf der alten Website landen.Wenn Sie den aktuellen Status Ihrer DNS-Einträge während der DNS-Verbreitung überprüfen möchten, haben wir eine Liste von sieben nützlichen Online-Tools, die Sie dazu verwenden können. Die Tools

(Tech- und Design-Tipps)

20 erstaunliche Drohnen-Aufnahmen

20 erstaunliche Drohnen-Aufnahmen

Drohnen sind vielleicht die innovativsten Technologien unserer Zeit und die nützlichsten Werkzeuge für Fotografen. Mit Drohnen können Sie Luftaufnahmen machen oder Luftaufnahmen machen. Solche Fotos sehen total aus der Welt, da man sich kaum vorstellen kann, wie die Orte wirklich vom Himmel aus aussehen .Ei

(Tech- und Design-Tipps)