Ich habe gerade diese coole kleine Website von Max Bittker gesehen: broider. Sie entwerfen ein Bild auf einem 9-Felder-Raster (außer dem mittleren Teil) und es generiert ein Bild, das Sie mit border-image zusammen mit dem CSS zum Kopieren und Einfügen verwenden können.
Schauen Sie sich mein kleines Design an
Die Bereiche des Bildes werden schließlich in eine base64-PNG-Datei mit den Designs in jedem Bereich ausgegeben. Wenn Sie beispielsweise nur im oberen mittleren Quadranten gezeichnet haben, sieht das generierte PNG wie folgt aus
Was Ihnen einen einzelnen Rand wie diesen gibt, der vielleicht genau das ist, was Sie wollen
Auf der neuen ShopTalk Show-Website haben wir an einigen Stellen einen ähnlichen Effekt, wie diesen
Wir haben das auf eine etwas andere Weise gemacht. Anstatt border-image verwendeten wir ein background-image und background-repeat: round; Auf diese Weise konnten wir ein Bild auf ziemlich die gleiche Weise verwenden, nur dass wir den zusätzlichen Schritt unternehmen mussten, ein "inneres" Element zu platzieren, um die Mitte auszulöschen (wodurch ein Rand vorgetäuscht wird).
So wie das
Wenn ich es mir jetzt ansehe, hätten wir wahrscheinlich einfach border-image verwenden sollen, da es dasselbe tun kann und etwas sauberer ist. Unsere Almanac-Seite enthält weitere Beispiele.