Artikel mit Schlagwort

Ich werde einzelne Pens verlinken, während ich die Lektionen bespreche, die ich gelernt habe. Wenn Sie jedoch einen Eindruck vom gesamten Projekt bekommen möchten, schauen Sie sich „60 days of Animation“ auf Undead Institute an. Ich habe dieses Projekt begonnen, um es am 1. August 2020 abzuschließen, passend zur Veröffentlichung eines Buches, das ich über CSS-Animationen, Humor und Zombies geschrieben habe – denn offensichtlich werden Zombies die Welt zerstören, wenn Sie nicht Ihre Webfähigkeiten einsetzen und die Apokalypse stoppen. Nichts bereitet der Horde mehr zu schaffen als ein HTML-Element in Bewegung!

Ich sehe Bild-Sprites nicht mehr so häufig, aber es ist immer noch eine gute Technik, um heruntergeladene dekorative Bildassets zu reduzieren, wenn Sie mehrere auf einer Seite haben. Die Hauptidee ist, alle Grafiken zu einer zu kombinieren und dann ...

Ich stelle mir einen SVG-Sprite so vor:

<svg display="none">
  <symbol id="icon-one"> ... </symbol><symbol>
  </symbol><symbol id="icon-two"> ... </symbol><symbol>
  </symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>

Ich war lange ein Fan dieses Ansatzes für Icon-Systeme (sie mit <use></use> nach Bedarf zu verwenden) …

HTTP/2 war eines meiner Interessengebiete. Tatsächlich habe ich allein im letzten Jahr einige Artikel dazu geschrieben. In einem dieser Artikel habe ich diese ungeprüfte Behauptung aufgestellt:

Wenn der Benutzer HTTP/2 verwendet: Sie werden

…

a {
  background: url(sprite.png) no-repeat;
  display: block;
  height: 30px;
  width: 250px;
}

a:hover {
  background-position: 0 -30px;
}

Die festgelegte Höhe und Breite stellen sicher, dass nur ein Teil der Sprite.png-Grafik angezeigt wird. Der Rollover verschiebt die Position des …