Neben der Möglichkeit Bilder online zu optimieren, gibt es mittels entsprechender Online-Services auch die Möglichkeit Bilder online zu bearbeiten. Das heißt Bild unabhängig ihres Formates zuzuschneiden, Modifikationen bezüglich der Farbe vorzunehmen, Kontraste zu verändern, Effekte oder Filter einzusetzen und das ganz ohne Kauf und Installation einer Software. Eines der bisherigen Argumente, welches von der Nutzung eines solchen Online-Services abgehalten hat, war meistens eine recht schlechte Benutzerführung die wenig ansprechend und intuitiv war. Da sich hier in den letzten Jahren einiges getan hat, werden Euch in diesem Artikel einige kostenlose Bildbearbeitungsanwendungen vorgestellt für die es auch keiner Registrierung bedarf, die mehr als nur über ein paar Funktionen verfügen und sich hinter kostenpflichtigen Bildbearbeitungsprogrammen wie Photoshop oder aber kostenlosen Programmen wie GIMP, nicht mehr verstecken müssen. (weiterlesen …)

Die Optimierung von Bildern beruht wie jede andere Anwendung der Datenkompression auch, darauf den ursprünglichen Datensatz dermaßen zu komprimieren, dass deren Qualitätsverlust nicht bzw. kaum wahrnehmbar ist. Die drei gängigen Webformate für Bilder stellen ohne Frage JPG, PNG und GIF dar. Doch worin liegen die Unterschiede dieser Formate und welche Vor- bzw. Nachteile bringen diese mit sich? Eine Frage mit der man sich spätestens beim Erstellen des Bildmaterials für eine Webseite auseinander setzen muss. Ein Gastbeitrag von Heiko Stiegert. (weiterlesen …)

Die CSS3-Eigenschaft background-size ermöglicht es Bildern, die mittels CSS als Hintergrundbilder eingebunden wurden, diese unabhängig ihrer Ausmaße zu skalieren. Solch angelegte Hintergrundgrafiken können dann bspw. per CSS als Hintergrundbild dem body-Element zugewiesen werden, so dass sich die Grafik je nach Viewport und Ausrichtung den zur Verfügung stehenden Ausmaßen, wie in der ersten Abbildung von FifthyThree Inc. und deren Zeichenanwendung für das iPad, anpasst. Ein Gastbeitrag von Heiko Stiegert. (weiterlesen …)

Sprechblasen oder sogenannte Tooltips sind im Webdesign keine neuen Gestaltungsmittel. Sie werden zur Verbesserung der Benutzerführung als textergänzendes Mittel verwendet, als auch als gestalterisches Mittel um bspw. Sprechblasen, wie im Logo des Blogs hier bei Codingpeople.  Das für die Umsetzung einer solchen Sprechblase, nicht immer eine Grafik herangezogen werden muss und man sich auch aus Performancegründen so diesen Request (ein)sparen kann, soll folgenden CSS Tutorial belegen. Zielsetzung ist hierbei die blau eingefärbte Sprechblase des Blogs hier bei Codingpeople. Wie der weitere Verlauf dieses Tutorial zeigen wird, wird dieser rein auf CSS basierende Tooltip mit wenigen Eigenschaften umgesetzt werden. Ein Gastbeitrag von Heiko Stiegert (weiterlesen …)

Nach der Einführung in das Thema Icon Fonts und den damit verbundenen Möglichkeiten und Vorteilen, wird der heutige zweite Teil sich der Einbindung eines Icon Font Sets in den HTML-Code und der Gestaltung mittels CSS widmen. Anhand der im weiteren Verlauf erstellten Schritt-für-Schritt Anleitung sollte ein Nachvollziehen dieser Vorgehensweise, selbst für ungeübte Anwender, kein Problem darstellen. Ein Gastbeitrag von Heiko Stiegert (weiterlesen …)