Mario Del Valle aus Valladolid im sonnigen Spanien ist ein waschechter Kreativer aus ganzem Herzen. Nach eigener Aussage war er schon als kleiner Junge ein begeisterter Zeichner. In jüngerer Zeit kam noch der Wunsch dazu, seine Werke mit anderen zu teilen. Also setzte er sich an sein Tablett und begann Ideen zu generieren, zu verwerfen,… Captain Icon: Kostenloses Set mit 350+ Flat Icons in vielen Formaten weiterlesen
Schlagwort: svg
SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet
SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets… SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet weiterlesen
Freebie: 50 derb-lustige Funny Icons
Oh, äh. Entschuldigung, der ist mir so raus gerutscht. Halte einfach eine Weile die Luft an. Hier draußen verzieht sich sowas ja schnell… Ja, das finde ich lustig. Sehr lustig sogar. Lies am besten nur weiter, wenn es dir auch so geht.
Responsives SVG: Was geht, was geht nicht?
Im Webdesign sind responsive Layouts nicht mehr wegzudenken. Da gibt es auf der einen Seite immer mehr kleine Displays auf Smartphones und auf der anderen Seite immer größer werdende Monitore. Dazwischen finden sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es technisch kein Problem, eine Website für all die verschiedenen Auflösungen zu optimieren.… Responsives SVG: Was geht, was geht nicht? weiterlesen
Besser platzieren und transformieren dank verschachtelter SVGs
Das Erstellen von SVG-Grafiken ist eine recht unkomplizierte Sache. Wer HTML beherrscht, findet sich auch schnell in der SVG-Syntax zurecht. Allerdings gibt es einige kleine, aber durchaus relevante Unterschiede zwischen HTML und SVG, was die Positionierung von SVG-Formen betrifft. Denn diese werden grundsätzlich absolut innerhalb einer SVG-Zeichenfläche platziert. So werden Formen in SVG-Grafiken platziert Was… Besser platzieren und transformieren dank verschachtelter SVGs weiterlesen
Glyphter: Mit dieser kostenlosen Web-App bauen Sie im Handumdrehen Ihren eigenen Icon Font aus beliebigen SVGs
Glyphter.com ist einer dieser Dienste, der mich aus dem Stand überzeugte. Er ist sehr einfach zu bedienen, arbeitet komplett fehlerfrei, sieht schick aus und hält auch ansonsten alle seiner Versprechen. Noch dazu ist er kostenlos nutzbar. Was könnte man mehr wollen? Lesen Sie weiter und sehen Sie, wie Sie Ihren eigenen Icon Font aus beliebigen… Glyphter: Mit dieser kostenlosen Web-App bauen Sie im Handumdrehen Ihren eigenen Icon Font aus beliebigen SVGs weiterlesen
Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash
Flash war lange Zeit der Standard für vektorbasierte Animationen im Web. Mit dem Aufkommen mobiler Endgeräte wurde Flash immer mehr von HTML5 und CSS3 verdrängt. Dank des SVG-Formates, welches mittlerweile von allen modernen Browsern unterstützt wird, können vektorbasierte Grafiken ohne Plug-in im Browser dargestellt werden. Mit der JavaScript-Bibliothek Snap.svg aus dem Hause Adobe ist es… Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash weiterlesen
SVG und JavaScript: Was ist möglich, was muss beachtet werden?
Das SVG-Format gibt es zwar schon länger, war mangels flächendeckender Browserunterstützung jedoch nur bedingt einsatzfähig. Da mittlerweile alle aktuellen Browser das Format unterstützen und Flash immer mehr verdrängt wird, ist SVG noch interessanter geworden. Wie Flash ist auch das SVG-Format vektorbasiert und kann Animationen enthalten. Aber es hat noch eine Gemeinsamkeit zu Flash: Per Scriptsprache… SVG und JavaScript: Was ist möglich, was muss beachtet werden? weiterlesen
HTML 5 und SVG: Per PHP und ImageMagick generiertes PNG-Fallback für ältere Browser
Das SVG-Format hat zahlreiche Vorteile: Vor allem, dass es vektorbasiert ist, macht es zu einer Besonderheit unter den gängigen Bildformaten für Browser. Auch wenn alle modernen Browser das Format mittlerweile unterstützen, gibt es gerade beim Internet Explorer noch Probleme. Denn dieser unterstützt SVG erst ab Version 9. Da auch ältere Versionen noch stark verbreitet sind,… HTML 5 und SVG: Per PHP und ImageMagick generiertes PNG-Fallback für ältere Browser weiterlesen
CSS und SVG: 2 neue, kostenlose Dienste für Hintergründe und Verläufe in HTML 5
Zum Jahresende hin stolpere ich über zwei Dienste, die sich auf die Erstellung von Website-Hintergründen mit HTML 5 konzentrieren. Dabei setzt das Tool CSS Color Gradient Generator von ScriptsConnect auf CSS 3 und das Tool SVGeneration auf SVG. Mit mehreren Farbmodellen und Unterstützung für mehr als nur CSS kann der CSS Generator punkten, während SVGeneration… CSS und SVG: 2 neue, kostenlose Dienste für Hintergründe und Verläufe in HTML 5 weiterlesen
Freebie der Woche: Dschungel aus Vektoren
Für unsere große Schwester haben wir gemeinsam mit den Grafikern von Freevector.com ein Set von Vektor-Dateien mit Dschungelmotiven entwickelt. Wir finden die so gelungen, dass wir sie auch den Leserinnen und Lesern von Dr. Web nicht vorenthalten wollen. Immerhin findet man so etwas, anders als das nächste Speichern-Icon, nicht alle Tage. Viel Spaß mit den… Freebie der Woche: Dschungel aus Vektoren weiterlesen
Exklusives Vektor Freebie: 250 Ultimate World Monuments Icon Pack von Freepik
Und wieder einmal können wir unseren Leserinnen und Lesern in Kooperation mit unserer großen Schwester Noupe und den Betreibern der Design-Ressourcen-Suchmaschine Freepik aus dem sonnigen Spanien einen Satz Icons schenken. Heute haben wir 250 Vektor-Symbole, nämlich das „Ultimate World Monuments Icons Pack“ zu bieten. Jedes dieser Icons repräsentiert ein berühmtes Gebäude oder anderen prominenten Ort… Exklusives Vektor Freebie: 250 Ultimate World Monuments Icon Pack von Freepik weiterlesen
Fontastic.me: Frische Web-App zum freien Zusammenstellen eigener Icon Fonts
Vincent Le Moign aka Webalys ist kein Unbekannter unter Webdesignern. Erst kürzlich stellten wir Ihnen sein Projekt Agile Designers, ein Sammelbecken hochwertiger Design-Ressourcen vor. Darüber hinaus erstellt und vertreibt Webalys das Riesenset Minicons mit rund 1.500 einzelnen Piktogrammen. Massenhaft Freebies säumen seinen Weg. Heute stellen wir Ihnen mit Fontastic.me Le Moigns Interpretation eines gelungenen Icon… Fontastic.me: Frische Web-App zum freien Zusammenstellen eigener Icon Fonts weiterlesen
Lazy Line Painter für jQuery zeichnet SVG-Grafiken per Animation auf Websites
Dank des Canvas-Elementes und der Zeichenfunktionen von JavaScript ist es möglich, Grafiken im Browser zu berechnen und darzustellen. So kann man Zeichnungen per Animation auf eine Website zeichnen. Wer eine solche Animation nicht selbst programmieren will, findet im jQuery-Plugin Lazy Line Painter ein hilfreiches Tool, welches diese Aufgabe für SVG-Grafiken per JavaScript im Browser erledigt.… Lazy Line Painter für jQuery zeichnet SVG-Grafiken per Animation auf Websites weiterlesen