Logo Design mit reinem CSS

8

Ich habe also ein paar wirklich coole Dinge gesehen, die mit CSS gemacht wurden und einige Websitemarken von Leuten gesehen haben, die in reinem CSS, ohne Bilder, fertig sind.

Ich möchte wirklich verstehen, wie es gemacht wurde, ich habe ein Logo gezeichnet, das ich mit CSS umgestalten wollte, aber ich habe erkannt, wie schwer es wirklich ist! Also, um mir zu helfen, es ein bisschen mehr zu verstehen, könnte jemand meinen Code korrigieren, damit ich verstehen kann, wie es gemacht wurde!

Jede Hilfe wird geschätzt :) Danke.

(p.Schreckliche Codierung, aber Sie können sehen, wo ich herkam?)

Dies ist eine schnelle Skizze dessen, was ich erreichen wollte

%Vor% %Vor%
    
Lawrence William Trigg 23.05.2016, 11:20
quelle

2 Antworten

2

online gibt es eine Menge img zu css Konverter wie DIES , aber Sie sollten ein gutes Qualitätsbild machen und versuchen, es zu konvertieren.

Der Converter, den ich Ihnen gerade vorgeschlagen habe, verwendet Pixel für Pixel mit einer Tabelle wie dieser:

%Vor%

DEMO

    
paolobasso 23.05.2016 12:29
quelle
1

Es ist nicht leicht zu erklären, weil es keine "genauen Regeln" zu erklären gibt. Sie können ein Werkzeug wie das von Paolobasso verwenden, aber es ist ein pixelbasiertes Werkzeug, das einfach durch eine Matrix (Tabelle - & gt; Zelle) ein Bild erstellt.

Wovon redest du stattdessen, es ist eine Zerlegung einer Figur in N rectagles.

Jedes Rechteck

  • Es wird mit Rändern positioniert (Beispiel: Rand links: Auto, Rand rechts: Auto bedeutet "zentriert") und Fluss (Positionsattribut).

  • Es ist von background property eingefärbt.

  • Es ist nach width und height dimensioniert.

  • Es ist von border-radius geformt (gekrümmt) und ähnlich zu jedem Browser (es: moz-border-radius)

  • es ist geformt und dimensioniert durch Rotation in Grad ( transform: rotate(315deg) )

Also, von Hand ist es schwierig, solche Dinge zu tun, aber wenn Sie verstehen wollen, dass Sie etwas wie OpenGL und nicht reines CSS studieren müssen, sind Prinzipien die gleichen wie für 2D-Grafiken, aber es gibt nichts mehr zu sagen , Ruhe, es ist alles über css Fluss und fließen, um Ihre "Rechtecke" bleiben und bleiben in der richtigen Entfernung. Oft brauchen Sie Überschneidungen und wenn Sie viele Farben haben (stellen Sie sich einen Knopf über einem Hemd vor), um auch css z-index property zu verwalten.

    
MrPk 23.05.2016 12:53
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Kann ich eine lokale Blockchain mit Ruby on Rails oder Node.js anstelle von Ethereum + Geth erstellen?