Alexander Zerr

Kostenlose Web Icons

Immer wieder trifft das Problem die Designer und Webmaster wenn sie Icons in die Seite einbauen. Man nimm welche aus eigener Sammlung und passt sie an, entwickelt was neues oder man nimm welche aus den Bestehenden Sammlungen wie Famfamfam und anderen Quellen. Seit kurzen erschien eine Web Symbol Sammlung an meist benutzten Icons die ausreichen um Wichtige Elemente zu symbolisieren. Das Geniale ist, dass es eine WebFont ist die skalierbar ist, einfach zu integrieren ist, einfach zu nutzen weil man braucht nur Buchstaben um die Icons zu symbolisieren und die Farbe direkt anpassen. Nachteil ist bei der Schrift die Semantik da man die Icons mit Buchstaben sich merken muss. Eigentlich ist handelt es sich die Gleiche Technik wie bei Webdings nur für Web.

Man lädt die Font auf der Web Symbols Seite runter und bindet sie im Style ein.

@font-face{ 
	font-family: 'WebSymbolsRegular';
	src: url('/fonts/websymbols-regular-webfont.eot');
	src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/websymbols-regular-webfont.woff') format('woff'),
	     url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
	     url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
	}
 
.symbol { font-family: 'WebSymbolsRegular'; font-size:16px; }

Und im Html kann man jetzt ganz einfach die Icons mit Buchstaben nachbilden:

<div><span class="symbol">I</span>Bild</div>
<div><span class="symbol">S</span>Zahnrad</div>
<div><span class="symbol">C</span>Wolke</div>

Die Web Symbols Font wird immer weiter Entwickelt und bekommt bald neue Icons wie Telefon und E-Mail. Die Benutzung ist frei und unterliegt der OFL Lizenz. Somit hat man eine simple Möglichkeit mit wenigem Einsatz Standard Icons in die Seite zu integrieren.

Und ich möchte noch auf ein Projekt hinweisen wenn es um Öffentliche Icons/ Symbole geht. Das The Noun Project beinhaltet eine Große Sammlung an Vector Grafiken die alltägliche Sachen symbolisieren. Man kann die Icons frei nutzen und man finden eigentlich zu jedem Thema passendes Symbol.

Posted in Design | No Comments »

Bilder ohne width/height

Die Richtlinien schreiben vor die Größen Angaben für Bilder immer zu setzen um dem Browser die Arbeit zu erleichtern das Layout richtig darzustellen und die Geschwindigkeit nicht zu beeinträchtigen. Da man aber öfters vergisst die width/height zu setzen, ist es sehr aufwendig im Quellcode nach den Stellen zu suchen.

Um das zu erleichtern, haben die Jungs aus 37signals.com einen simplen und Genialen CSS Helper geschrieben:

img:not([width]):not([height]) {
  border: 2px solid red !important;
}

Nach dem Einbau in die Seite, kann man im Developer Modus die Bilder mit einem Roten Rahmen einfacher im Layout finden.

Posted in Design | 1 Comment »

Heise Design

Wau grad ging ich auf heise drauf und hab erst nicht verstanden was es abgeht. Hab die Seite nochmal Aktualisiert und es wurde mir klar, dass die heise Seite relauncht wurde mit neuer Benutzer Führung und in einem Blog ähnlichen Layout.
So wie man schon an Info Blogs gewöhnt ist, ist auch hier schön Aufgeräumt worden. Und natürlich haben sie für einen Artikel extra Patz geschaffen um schön die Werbung zu verkaufen.
Die anderen Seiten sind gleich geblieben, welche ich eigentlich nicht so viel nutze wie die Start Seie der heise.

Posted in Design | No Comments »

Homer Simpson mit CSS

Homer Simpson: HTML + CSS + Buchstaben mit Zechen

Quelle: www.romancortes.com

Dazu gibt es noch eine JavaScript Animation des ganzen wie der Homer aufgebaut ist.

Posted in Design | 1 Comment »

Input Buttons Part I

Dieses Problem ist schon vielen Hml Designern begegnet. Die Input Buttons sehen einfach in allen Browsern anders aus und im IE noch schlimmer.
Aber man kann sie doch Bändigen die Browser und die Buttons. Man muss nur die CSS anpassen und schon hat man ein 95% Ergebnis.
Die vorteile an solchen Buttons ist die Flexibilität, man kann sie internationalisieren und man hat gleiches Bild in IE, Firefox und Opera.

Also als erstens legen wir ein Input Button an:

<input class="button" type="submit" name="send" value="Mein Text" />

Dann legen wir eine CSS Klasse an:

input.button     {
 display:inline;
 margin:0 5px;
 padding:0px 5px;
 height:21px;
 font-weight:bold;
 font-size:12px;
 color:#000;
 border:1px solid #666;
 background:#ccc;
 cursor:pointer;
 overflow:visible;<;/blockquote>;
}

Der wichtigste Attribut in der CSS, ist das overflow:visible. Es entfernt in dem IE die seitlichen Abstände.

Ihr könnt jetzt eure eigene Styles mischen wie color, margin, padding , background-color und die border.

Man kann mehrere solche Buttons in ein Container tun und Zentriert anzeigen:

<div style="text-align:center">
 <input class="button" type="submit" name="preview" value="Vorschau" />
 <input class="button" type="submit" name="send" value="Absenden" />
</div>

Und hier ist das ergebnis:

Das war erstmal alles zu den Input Buttons, im nächsten Teil werde ich zeigen wie man Web2.0 Buttons mit Runden Ecken und Verlauf macht.

Posted in Design | No Comments »