Bilder ohne width/height

Mittwoch, August 31st, 2011

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 »

Homer Simpson mit CSS

Mittwoch, Mai 14th, 2008

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.

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
•
•
•
•
•
_
_
_
•
•
•
C
C
O
(
-


Posted in Design | 1 Comment »

Input Buttons Part I

Donnerstag, Februar 28th, 2008

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 »

Post (RSS) und Kommentare (RSS).