Artikel mit Schlagwort

Was ich hier tun werde, ist eine Art Experiment, um Tricks zu erforschen, die einen Fehler in der Art und Weise nutzen, wie CSS-Verläufe mit der Subpixel-Rendering umgehen, um einen statischen Rauscheffekt zu erzielen – wie man ihn vielleicht bei einem Fernseher ohne Signal sieht.

Wir haben uns inzwischen durch eine Reihe von Beiträgen über interessante Ansätze für CSS-Hover-Effekte gearbeitet. Wir begannen mit einer Reihe von Beispielen, die CSS-background-Eigenschaften verwenden, und gingen dann zur text-shadow-Eigenschaft über, wo wir technisch gesehen nicht …

Ich bin kürzlich auf einen coolen Effekt gestoßen, der als Glassmorphism in einem Dribbble-Shot bekannt ist. Mein erster Gedanke war, dass ich ihn schnell in wenigen Minuten nachbauen könnte, wenn ich nur Emojis für die Icons verwende, ohne Zeit zu verschwenden...

Kürzlich habe ich nach Ideen gesucht, was ich programmieren könnte, da ich keinen künstlerischen Sinn habe, also ist das Einzige, was ich tun kann, hübsche Dinge zu finden, die andere Leute sich ausgedacht haben, und sie mit sauberem und...

Ich kann nicht sagen, dass ich background-clip oft benutze. Ich wette, es wird im alltäglichen CSS-Gebrauch kaum verwendet. Aber ich wurde in einem Beitrag von Stefan Judis daran erinnert, der zufällig selbst eine Lernantwort auf ... war.

Sie wissen, wie Sie mehrere Hintergründe haben können?

body {
  background-image: 
    url(image-one.jpg),
    url(image-two.jpg);
}

Das ist nur background-image. Sie können auch deren Position festlegen, wie Sie es erwarten würden. Wir werden es abkürzen

body {
  background: 
    url(image-one.jpg) no-repeat top right,
    url(image-two.jpg) 

…

background-clip ist eine dieser Eigenschaften, die ich seit Jahren kenne, aber selten verwendet habe. Vielleicht nur ein- oder zweimal als Teil einer Lösung für eine Stack Overflow-Frage. Bis letztes Jahr, als ich begann, meine riesige Sammlung zu erstellen...

background-clip ermöglicht es Ihnen zu steuern, wie weit ein Hintergrundbild oder eine Hintergrundfarbe über den Rand oder Inhalt eines Elements hinausgeht.

.frame {
  background-clip: padding-box;
}

Werte

• border-box ist der Standardwert. Dies ermöglicht, dass sich der Hintergrund bis zum

…