Webkit input-autocomplete – Entfernen der gelben background-color


Wie entferne ich den gelben Hintergrund in Webkit autocomplete-input-Feldern?

Der Webkit-Browser gibt uns mit seinem autocomplete-input-Feldern ein echtes Rätsel auf. Niemand möchte einen gelben Hintergrund in seinen input-Feldern sehen. Trotzdem ist es ein echter Akt, die Hintergrundfarbe dieser autocomplete-Felder zu ändern.

Sicher habt ihr auch schon ein paar Möglichkeiten durchprobiert. Mit

input:-webkit-autofill {
  background-color: #fff !important;
}

kommt man leider nicht weiter. Natürlich gibt es die Möglichkeit die autocomplete-Funktion ganz abzuschalten:

<input type="text" name="name" autocomplete="off">

Allerdings ist das auch nicht die Königslösung. Hier ist ein kleiner Trick, um zum Ziel zu gelangen, bis es eine wirklich saubere Lösung für dieses Problem gibt:

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}

Das war es schon. Weg ist der hässliche gelbe Balken:-)

Du magst den Post?
Loading...Loading...

Base64 image encoding – Bilder Base64 kodiert in HTML/CSS einbinden


Base64 kodierte Bilder verwenden – Vorteil, Nachteil und Tools

Mit Hilfe einer Base64 Kodierung können wir Bilder direkt ins HTML oder CSS coden ohne zusätzliche Requests zu verursachen. Das kann in vielen Situationen ein großer Vorteil sein, hat allerdings auch Nachteile, die man berücksichtigen muss.

Vorteil

Wir benötigen keinen Request mehr um Bilder in eine Webseite einzubinden. Das reduziert die Gesamtladezeit der Webseite und entfernt potentielle Fehlerquellen durch nicht korrekt geladene Bilder.

Nachteil

Beim Einbinden des Base64 kodierten Bildes via CSS erhöht sich die Ladezeit der CSS Datei etwas. Die Webseite muss also einen Tick länger auf ihre Styledefinitionen warten. Das kann bei langsamen Internetverbindungen sehr störend sein.

Beispiel

HTML image embedding

<img src"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoCAYAAAC7HLUcAAAABHNCSVQICAgI..."/>

Weiterlesen

Du magst den Post?
Loading...Loading...

Font-Icons – Super Lösung für Icons auf der Website


Font-Icons für Icons mit top Qualität und super Performance

Font-Icons sind, meiner Meinung nach, die beste Lösung um Icons auf der Website zu platzieren. Die Vorteile im Überblick:

  • Cross-Browser kompatibel
  • Höchste browserfähige Auflösung
  • Nur ein Request für alle Icons
  • Als Schriftart verwendbar (Farbe, Größe, etc.)
  • Kleine Datenmenge

Wie funktionieren Font-Icons?

Hat man sich für eine Auswahl an Icons entschieden, generiert man sich eine Schriftart (siehe unten) und bindet diese via CSS in das Projekt ein.

Ich empfehle, zum generieren der Font-Icons, ein Tool zu benutzen, dass einem die Icons auch gleichzeitig als .class verfügbar macht.

Die Font-Icons bestehen üblicherweise aus den Formaten: .svg, .eot, .ttf, .woff und werden je nach Browserkompatiblität verwendet. Beim Skalieren auf dem Handy sieht man sehr schön den qualitätsvorteil von Font-Icons.

Wo bekomme ich kostenlose Icons her?

Glücklicherweise haben wir einen Artikel über kostenlose Icons online:-)

Natürlich könnt ihr auch nach Herzenslust selbst .svg erstellen. Das beste kostenlose Programm dafür: Inkscape.

Wie erstelle ich aus meinen Icons eine Schriftart?

Weiterlesen

Du magst den Post?
Loading...Loading...

Kostenlose Icons für ihre Webseite


Kostenlose Icons zum Downloaden

Heute gibt es ein paar Tipps, wo ihr kostenlos Icons mit voller Lizenz herunterladen könnt. Diese kleinen Helfer sorgen dafür, dass eine Webseite einfach und intuitiv zu bedienen ist. Dazu sind sie auf mobilen Webseiten und in fluiden responsiv Design unverzichtbar.

Meine absoluten Favoriten sind:

Hier bekommt ihr eine Unmenge an Icons und dazu noch als .svg! Wer mag, kann sich die Icons aber auch als .png in verschiedenen Auflösungsvarianten ausgeben lassen. Dazu finde ich die Seite auch sehr gelungen.

Hier findet ihr viele kostenlose Icons zum Einbinden auf der Webseite. Leider gibt es hier keine .svg zum Downloaden, dafür bietet IcoMoon 2 andere sehr wichtige Vorzüge:

  1. Ausgabe als Sprite
  2. Ausgabe als Font-Icons

Was Font-Icons und deren Vorteile sind, dass könnt ihr in diesem Artikel lesen.

Es gibt natürlich noch viel mehr Seiten. Aber die Vorteile, wie .svg, Font-Icons und Sprites haben mich zu einem Fan von iconmonstr und IcoMoon werden lassen. Gerade wenn man die Icons noch etwas anpassen möchte, ist es sehr hilfreich, wenn man diese als .svg zur Verfügug hat!

Weiterlesen

Du magst den Post?
Loading...Loading...

Sass/SCSS & Compass in Projekt einbinden und effektives CSS3 erstellen


Schöner und effektiver Frontend bauen – Sass/SCSS & Compass

Heute beschäftigen wir uns mit Sass/SCSS und Compass. Da wir uns ja alle gerne am Puls der technischen Entwicklung bewegen, wollen wir natürlich auch beim Frontendbau “state of the art” sein. Mit Sass/SCSS und Compass machen wir uns das Leben beim Frontendbau erheblich leichter.

Was ist Sass/SCSS?

Sass ist eine Metasprache zum Compilieren von CSS. SCSS (= Sassy CSS) ist die neueste Entwicklungsstufe von Sass und basiert auf CSS3. Mittels Ruby (Haml-Compiler) wird Sass/SCSS in CSS umgewandelt.

Welche Vorteile hat Sass/SCSS?

  • Übersichtliche Struckturierung von CSS.
  • Globale Änderungen durch Variablen.
  • Einfache mathematischer Rechnungen sind möglich.
  • Performanceoptimierung bei Importen.

Die Unterschiede zwischen Sass und SCSS

Sass: Minimalisierung, keine Semikolon, keine Klammern. Arbeitet mit einrücken (4 Leerzeichen).

.sidebar li
    padding: 5px 0

SCSS: Basierend auf CSS. Normales CSS kann einkopiert werden.

.sidebar li {
  padding: 5px 0;
}

Wie starte ich mit Sass/SCSS?

Windows benutzer müssen zuerst Ruby und Haml intallieren: http://rubyinstaller.org/downloads/. Auf OSX ist bereits alles vorhanden.

Weiterlesen

Du magst den Post?
Loading...Loading...