Logo in CSS anstatt Bild
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
after
all
bild
code
darstellen
datei
erstellen
farbwechsel
form
format
frage
grafik
http
jemand
ladezeit
richtig sinn
sagen
sinn
text
url
-
Hallo
Ich habe mal das Experiment versucht, ein einfaches Logo mit CSS anstatt Bild zu gestalten. Momentan sieht das so aus: (Nur in der neusten Chrome Version getestet)
Demo: https://db.tt/cxfeD5qV
<html> <head> <style> div#container > div{ background: #000; } .schluessel1{ position: relative; left: 10px; width: 60px; height: 60px; border-radius: 30px; float: left; } .schluessel11{ position: relative; background: #fff; left: 15px; top: 15px; width: 30px; height: 30px; border-radius: 15px; } .schluessel2{ position: relative; top: 15px; width: 110px; height: 25px; float: left; color: white; text-align: center; } .schluessel3{ position: relative; top: 15px; width: 15px; height: 60px; float: left; border-radius: 0px 0px 5px 5px } .schluessel4{ position: relative; top: 15px; width: 5px; height: 25px; float: left; } .schluessel5{ position: relative; top: 15px; width: 15px; height: 60px; float: left; border-radius: 0px 5px 5px 5px; } </style> </head> <body> <div id="container"> <div class="schluessel1"> <div class="schluessel11"></div> </div> <div class="schluessel2"></div> <div class="schluessel3"></div> <div class="schluessel4"></div> <div class="schluessel5"></div> </div> </body> </html>
Geht das auch irgendwie einfacher? Und hat jemand allgemein Verbesserungsvorschläge für das CSS?
Beitrag zuletzt geändert: 7.2.2014 18:15:30 von c143 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Link zum Beispiel? Niemand hat Lust auf Copy & Paste um dein Meisterwerk anzuschauen und zu kommentieren.
-
Keiner außer ich schätze ich
.
Also so sieht das Ergebnis von ihm aus.
Meine Frage wäre jetzt wieso du überhaupt derartiges in CSS umsetzen möchtest?
Der Aufwand muss sich ja lohnen und ich sehe da ehrlich gesagt keine Vorteile.
Wenn du jetzt meinst man kanns immer wieder vergrößern ohne Qualitätsverluste, dann verwende svg`s denn die haben dasselbe Feature und sind erheblich einfacher zu erstellen bzw. erfordern nicht einen derartigen Aufwand.
Wenn dir das aber einfach unglaublichen Spaß macht, dann ist das mal nebenbei erwähnt die richtige Methode es in CSS umzusetzen. Aber wie gesagt ich denke nicht das CSS dafür gedacht ist... . -
Mein eigener Versuch mit Divs und Grafik bezog sich auf eine Flimmerseite aus sich ändernden Farbwerten von ca 3-3 px großen Divs.
Alles, was ich da an Erfahrung mitgenommen habe, besteht aus "Rendern mit Divs ist moppelkotze"
Letztendlich hat eine Gestaltung von Grafiken mittels CSS - berichtigt mich gerne - keinen tieferen Sinn.
Beitrag zuletzt geändert: 7.2.2014 0:04:20 von sonok -
Der einzige sinn ist, das eine mit css gerenderte "Grafik" afaik schneller lädt,was aber bei kleineren bzw niedrigauflösenden bildern egal ist
-
Wenn man nur Geometrie darstellen will, also keine Fotos, sondern halt Logos, kann ich SVGs sehr empfehlen. Man speichert wie in deinem CSS-Code einfach die Positionen der Elemente, muss aber mit nicht im Code "rumgurken" (kann das aber natürölich, svgs, sind auf xml basiert). Als Open-Source-Editor würde ich zu Inkscape raten. Da muss man sich ein bisschen renarbeiten, aber dann schafft man echt schöne Sachen.
-
Da kann ich jalstudios nur zustimmen, wobei ich sagen muss, dass Inkscape hässlichen Code erzeugt mit vielen Transformationen und unnötigen Definitionen.
Ich bin mittlerweile soweit dass ich SVG-Grafiken grundlegend im Texteditor schreibe und vom Browser rendern lasse.
Zur programmatikalischen Umwandlung gibts Biblotheken für Java, C, C++ etc. Auf der Konsole gibts Tools wie ImageMagick.
Svg hat sich zur Erstellung von skalierbaren Grafiken in meinen Augen wirklich durchgesetzt. -
OK, der Code mag vllt etwas groß sein, aber wenn man sich eingearbeitet hat, kann man wirklich alles damit machen. Das hat so vele praktische Funktionen, da will ihc nicht drauf verzichten. Selbst, wenn das ganze ansonsten nur ein 10tel des Speicherplatzes verbraucht.
-
Kann mir nochmal jemand sagen, warum man ein Bild "online zusammenbauen läßt" statt es einfach als normale Grafik (in Form von JPG, TIFF, BMP, GIF, etc.) darstellen zu lassen
Wenn das LOGO kopiert wird sollte man sich freuen.
Damit wird die eigene Corporate Identity in Form des LOGOs doch nur aufgewertet
Wer glaubt wirklich ein schützenswertes Unikat zu haben das Marktfähigkeit hat, sollte sich sowieso die ganze Marke vom Patenanwalt schützen lassen
-
Macht man, damit das Logo
1. immer scharf ist, auch auf einem 2k-Bildschirm
2. Kein unnötiger Speicher verwendet wird, denn SVGs sind häufig kleiner als pngs/gifs
3. Weil in dem Bild dann nach Text gesucht werden kann (z b von Google). Aber das ist bei einem Logo wohl meißtens auch mit dem Alt-Attibut zu schaffen -
Hatte ich ja bereits in meinem Beitrag erwähnt, dass man für sowas eigentlich svg`s verwendet.
Inkscape erzeugt schlechten Code? Bzw. unnötige Teile?
Dafür gibt es SVG Cleaner einmal drüber laufen und alles ist draußen was man nicht unbedingt benötigt.
Beispielsweise -
Der Sinn dabei ist in meinem Falle, dass man die Farbe ganz leicht verändern kann (Ganz oben im CSS). Sonst müsste ich für jeden Farbcode ein neues Bild erstellen. Ich will nur mal was ausprobieren, aber wenn das gut funktioniert hab ich eine Idee für ein Design.
Ich bin momentan noch bei der Arbeit, aber schau mir den Tipp mit SVG's gleich zuhause an, danke.
Meine Frage war Grundsätzlich wie man das einfacher machen könnte, am besten in einer einzelnen Zeile.
Beitrag zuletzt geändert: 7.2.2014 15:40:28 von c143 -
Sinn hätte es nur, wenn 1. Text im Logo vorkommt und 2. man die richtigen Tags benutzt für SEO. Ansonsten ist SVG oder ein png Bild doch einfacher. Und wegen der Skalierbarkeit muss es kein SVG sein. Denn wer ein Logo erstellt hat dann auch die dazugehörigen Dateien im tiff oder psd Format, wo man dann auch immer skalieren kann.
-
all-in1 schrieb:
Sinn hätte es nur, wenn 1. Text im Logo vorkommt und 2. man die richtigen Tags benutzt für SEO. Ansonsten ist SVG oder ein png Bild doch einfacher. Und wegen der Skalierbarkeit muss es kein SVG sein. Denn wer ein Logo erstellt hat dann auch die dazugehörigen Dateien im tiff oder psd Format, wo man dann auch immer skalieren kann.
Damit alle meinen Sinn verstehen: https://db.tt/cxfeD5qV -
Ja natürlich der Farbwechsel. Das mach dann richtig Sinn. Mit Grafiken egal ob SVG oder andere Formate, ist so etwas natürlich mit mehr Ladezeiten verbunden, als mit einer CSS.
-
all-in1 schrieb:
Ja natürlich der Farbwechsel. Das mach dann richtig Sinn. Mit Grafiken egal ob SVG oder andere Formate, ist so etwas natürlich mit mehr Ladezeiten verbunden, als mit einer CSS.
Nur geht das nicht irgendwie schöner?<div id="logo"></div>
Bei diesem Artikel http://pixeltuner.de/css3-formen/ können mit :before und :after 3 Formen in einander 'verschmelzen' Also 1 div tag entsprechen 3 Formen, würde das ganze schonmal verschönern.
Ich habs probiert, aber irgendwie zeigt es mir doch nur die erste Form an. -
eventuell mit before und after etwas durcheinander geraten?
Irgendwie habe ich so verstanden, das es ähnlich wie beim Airbrush funktioniert. Du legst ja die Formen nacheinander übereinander. -
all-in1 schrieb:
eventuell mit before und after etwas durcheinander geraten?
Irgendwie habe ich so verstanden, das es ähnlich wie beim Airbrush funktioniert. Du legst ja die Formen nacheinander übereinander.
Anscheinend hab ich was durcheinander gebracht, ja. Soeben noch mal probiert:
<html> <head> <style> #schluessel{ background: white; position: relative; left: 10px; width: 30px; height: 30px; border: 15px solid black; border-radius: 30px; } #schluessel:before{ width: 110px; height: 25px; left: 40px; background: black; content:""; position: absolute; } #schluessel:after{ left: 150px; width: 15px; height: 60px; border-radius: 0px 0px 5px 5px; background: black; content:""; position: absolute; } </style> </head> <body> <div id="schluessel"></div> </body> </html>
Einen Schlüssel bekomm ich aber leider nicht in 3 Teilen hin. :D -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
