Erinnern Sie sich noch, als Ahmad Shadeed über den border-radius „Schalter“ schrieb, den er im CSS von Facebook gefunden hat? Das war interessant! Ich habe darüber berichtet. Einige Wochen nach dieser Flut von Links erschienen ein paar Artikel, die sich damit etwas genauer befassten. …
Ahmad Shadeed dokumentiert einen echten CSS-Trick aus dem CSS-Code von Facebook. Die Idee ist, dass ein Element keinen border-radius hat, wenn es die volle Breite des Viewports einnimmt. Andernfalls hat es 8px border-radius. …
Jeder Buchstabe in dieser „Schriftart“ von Davor Suljic ist ein einzelnes div und nur mit border gezeichnet. Das bedeutet, einige Tricks wie Rand-Radius mit exotischer Syntax wie border-radius: 100% 100% 0 0 / 37,5% 37,5% 0 0;, was ...
Blobs sind die glatten, zufälligen, gallertartigen Formen, die eine skurrile Qualität haben und einfach nur Spaß machen. Sie können als Illustrationselemente und Hintergrundeffekte im Web verwendet werden.
Also, wie werden sie gemacht? Öffnen Sie einfach eine Illustration ...
Ich wette, in den meisten Fällen, in denen wir Ecken in CSS runden, wenden wir einen einheitlichen `border-radius`-Wert über den gesamten Rand an. Das ist in vielen Designs ein schöner Schliff. Aber es gibt Situationen, in denen wir vielleicht unterschiedliche Radien für …
Die erste Regel für Animationen im Web: animiere nicht width und height. Das zwingt den Browser, eine Menge neu zu berechnen, und es ist langsam (oder, wie man sagt, „teuer“). Wenn man damit davonkommt, eine Animation zu machen …
In der dieswöchigen Zusammenfassung ist die Zeichenlänge von zwei Emojis nicht immer gleich, etwas, das man vor der Erstellung dieses runden Buttons berücksichtigen sollte, und wir haben vielleicht eine neue Möglichkeit, Web-Apps zwischen Geräten zu teilen, auch wenn sie offline sind....
Nils Binder hat die Neuigkeiten, wie man Elemente durch die Verwendung von border-radius manipuliert, indem man acht Werte wie folgt an die Eigenschaft übergibt
.element {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}Das ist so cool …
