Artikel mit Schlagwort

Es gibt eine content Eigenschaft in CSS, die zusammen mit den ::before und ::after Pseudo-Elementen verwendet wird. Sie fügt Inhalte in das Element ein.

Hier ist ein Beispiel:

<div 
  data-done="&#x2705;"
  class="email">
    [email protected]
</div>

.email::before {
  content: attr(data-done) " Email: 

…

Vielleicht kennen Sie diesen: Wenn ein Teil eines Selektors ungültig ist, macht er den gesamten Selektor ungültig. Zum Beispiel

div, span::butt {
  background: red;
}

Auch wenn div ein völlig gültiger Selektor ist, ist span:butt es nicht, daher der gesamte …

Ich habe neulich eine kleine Demo namens HTML5 Terminal gesehen. Sie hat einige Funktionen, aber es scheint, als ob sie einfach nur zum Spaß da ist. Trotzdem hat mir die Ästhetik davon gefallen! Unschärfe im Monospace-Schriftstil mit sichtbaren Monitorlinien …

Beachten Sie den Doppelpunkt ::before im Vergleich zum Doppelpunkt :before. Welcher ist korrekt?

Technisch gesehen ist die richtige Antwort ::before. Aber das bedeutet nicht, dass Sie es automatisch verwenden sollten. …

Wussten Sie, dass CSS Turing-vollständig ist? Wussten Sie, dass Sie damit sehr ernsthaftes logisches Styling betreiben können? Nun, das können Sie! Sie müssen nicht alle Ihre logikbasierten Styling-Regeln in JavaScript festlegen oder überhaupt JavaScript verwenden, um Klassen zu setzen, gegen die Sie stylen. In vielen Fällen kann CSS das selbst erledigen. Ich entdecke jeden Tag neue CSS-Tricks und das lässt mich es nur noch mehr lieben.

Mit „CSS-Bildern“ meine ich Bilder, die ausschließlich mit HTML-Elementen und CSS erstellt werden. Sie sehen aus, als wären sie in Adobe Illustrator gezeichnete SVGs, wurden aber direkt im Browser erstellt. Einige Techniken, die ich gesehen habe …

Keith Grant erörtert, wie HTML 5.2 ein eigenartiges neues Element eingeführt hat: <dialog>. Dies ist ein absolut positioniertes und horizontal zentriertes Modal, das über anderem Inhalt auf einer Seite erscheint. Keith schaut, wie man dieses …

Wussten Sie schon, dass Sie die content Eigenschaft von Pseudo-Elementen animieren können? Laut der Liste der animierbaren Eigenschaften in der Spezifikation sollten Sie das nicht können, aber in der neuesten Version von Desktop Chrome können Sie es. Die Demo unten …

Wenn es um die Zentrierung von Dingen im Webdesign geht, gilt: Je mehr Informationen Sie über das zu zentrierende Element und sein Elternelement haben, desto einfacher ist es. Was ist also, wenn Sie nichts wissen? Es ist immer noch irgendwie machbar. …