Alexander Zerr » styles http://www.xelaz.de Meine Erfahrungen in der Web Entwicklung Mon, 19 Jul 2010 15:05:31 +0000 en hourly 1 Homer Simpson mit CSS http://www.xelaz.de/homer-simpson-mit-css/ http://www.xelaz.de/homer-simpson-mit-css/#comments Wed, 14 May 2008 20:12:47 +0000 Alexander Zerr http://www.xelaz.de/?p=27 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
(
-
]]> http://www.xelaz.de/homer-simpson-mit-css/feed/ 1 Input Buttons Part I http://www.xelaz.de/input-buttons-part-i/ http://www.xelaz.de/input-buttons-part-i/#comments Thu, 28 Feb 2008 18:04:09 +0000 Alexander Zerr http://www.xelaz.de/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.

]]> http://www.xelaz.de/input-buttons-part-i/feed/ 0