Buchstaben & Sonderzeichen - ein Bild gestaltet mit CSS

Webbie · 14.04.2004

Hallo,

Inspiriert von CSS-Werken wie CSS House, habe ich ein Bild erstellt, welches nur aus Buchstaben und Sonderzeichen besteht.
Mittels unterschiedlicher Größenangaben und relativer Positionierung der Zeichen entsteht ein Bild von zwei nebeneinander stehenden Figuren.

Kopiert einfach den Quelltext und speichert diesen z.B. mit dem Windows-Editor als HTML-Datei ab.

Falls ihr auch CSS-Bilder erstellen wollt oder schon welche erstellt habt, könnt ihr in diesem Thread einen Link zur entsprechenden Seite setzen oder wenn ihr wie ich keinen Speicherplatz habt, fügt ihr den Quelltext ein.

Buchstaben & Sonderzeichen

Code:

&lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
    [url]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>[/url]

&lt;html xmlns=[url]http://www.w3.org/1999/xhtml[/url] xml:lang=de>

&lt;head>

&lt;title>Buchstaben &amp;amp; Sonderzeichen&lt;/title>

&lt;meta http-equiv=content-type content=text/xml; charset=ISO-8859-1 />

&lt;style type=text/css>
&lt;!--
body {
background-color: rgb(255,255,255);
font-family: Verdana, sans-serif;
line-height: 1em;
}



/* ========== blaue Figur | linke Seite (L) ========== */

#frisur1L {
color: #96BEF0; /* rgb(150,190,240) */
position: relative;
top: 0.5em;
left: 1em;
font-size: 10em;
}

#frisur2L {
color: #96BEF0;
position: relative;
top: 0.4em;
left: 1.2em;
font-size: 10em;
}

#kopfL {
color: #96BEF0;
position: relative;
top: 0.9em;
left: 0.5em;
font-size: 15em;
}

#augenL {
color: #96BEF0;
position: relative;
top: 3em;
left: 2.7em;
font-size: 4em;
letter-spacing: 5px;
}

#pupillenL {
color: #96BEF0;
position: relative;
top: 3.15em;
left: 3.85em;
font-size: 3em;
letter-spacing: 18px;
}

#mundL {
color: #96BEF0;
position: relative;
top: 2.1em;
left: 1.7em;
font-size: 7em;
}

#rumpfL {
color: #96BEF0;
position: relative;
top: 1.4em;
left: 0.5em;
font-size: 15em;
}



/* ========== gruene Figur | rechte Seite (R) ========== */

#hut1R {
color: #8CD296; /* rgb(140,210,150) */
position: relative;
top: -0.6em;
left: 2.46em;
font-size: 10em;
}

#hut2R {
color: #8CD296;
position: relative;
top: -0.49em;
left: 2.34em;
font-size: 10em;
}

#kopfR {
color: #8CD296;
position: relative;
top: 0.45em;
left: 1.5em;
font-size: 15em;
}

#brillenglaeserR {
color: #8CD296;
position: relative;
top: 1.3em;
left: 6.35em;
font-size: 4em;
letter-spacing: 20px;;
}

#brillengestell1R {
color: #8CD296;
position: relative;
top: -0.7em;
left: 12.4em;
font-size: 2em;
letter-spacing: 86px;
}

#brillengestell2R {
color: #8CD296;
position: relative;
top: -0.75em;
left: 13.73em;
font-size: 2em;
}

#pupillenR {
color: #8CD296;
position: relative;
top: 1.8em;
left: 17.3em;
font-size: 1.5em;
letter-spacing: 45px;
}

#mundR {
color: #8CD296;
position: relative;
top: 1.1em;
left: 3.85em;
font-size: 7em;
}

#rumpfR {
color: #8CD296;
position: relative;
top: 0.94em;
left: 1.5em;
font-size: 15em;
}
-->
&lt;/style>

&lt;/head>



&lt;body>

&lt;!-- blaue Figur -->

&lt;div id=kopfL>O&lt;/div>
&lt;div id=augenL>&amp;otilde;&amp;otilde;&lt;/div>
&lt;div id=mundL>-&lt;/div>
&lt;div id=rumpfL>&amp;Omega;&lt;/div>
&lt;div id=pupillenL>&amp;bull;&amp;bull;&lt;/div>
&lt;div id=frisur1L>&amp;quot;&lt;/div>
&lt;div id=frisur2L>&amp;quot;&lt;/div>



&lt;!-- gruene Figur -->

&lt;div id=kopfR>O&lt;/div>
&lt;div id=brillenglaeserR>oo&lt;/div>
&lt;div id=mundR>-&lt;/div>
&lt;div id=rumpfR>&amp;Omega;&lt;/div>
&lt;div id=pupillenR>&amp;bull;&amp;bull;&lt;/div>
&lt;div id=hut1R>&amp;Pi;&lt;/div>
&lt;div id=hut2R>&amp;mdash;&lt;/div>
&lt;div id=brillengestell1R>\/&lt;/div>
&lt;div id=brillengestell2R>&amp;mdash;&lt;/div>

&lt;/body>

&lt;/html>

Das war mein letzter Beitrag im WinTotal Forum, da ich mich aus der Computer-Welt zurückziehen möchte, weil mir der Zeitaufwand einfach zu groß ist, aus dem sich ständig weiterentwickelnden PC- und Internet-Bereich immer neues Wissen anzueignen und dies auch zu behalten bzw. zu erweitern. Desweiteren habe ich auch keine Lust mehr dazu.

Nichts desto trotz gefällt mir euer Forum sehr gut und ich wünsche euch allen weiterhin viel Spaß und Freude mit WinTotal.

Viele Grüße, Webbie

VolkerTF · 14.04.2004

Webbie schrieb:
Das war mein letzter Beitrag im WinTotal Forum, da ich mich aus der Computer-Welt zurückziehen möchte, weil mir der Zeitaufwand einfach zu groß ist, aus dem sich ständig weiterentwickelnden PC- und Internet-Bereich immer neues Wissen anzueignen und dies auch zu behalten bzw. zu erweitern. Desweiteren habe ich auch keine Lust mehr dazu.

Nichts desto trotz gefällt mir euer Forum sehr gut und ich wünsche euch allen weiterhin viel Spaß und Freude mit WinTotal.

Viele Grüße, Webbie

Super, wenn sich jemand final nochmal so in CSS hineinwurschtelt und dann alles hinschmeisst. Hast Du Deinen Rechner schon verschenkt oder (hoffentlich nicht) aus dem Fenster geschmissen? Geht sowas ueberhaupt, dass man sagt: Ab heute ist schluss mit PC? Da kann doch nur eines dahinterstecken: Du hast eine neue Liebe! Wie heisst sie? Wie sieht sie aus? Wie alt ist sie? Blond? Schlank? Welche Qualitaeten hat sie? (Du weisst schon :

) Was ist, wenn diese Liebe Gewohnheit wird? Und ueberhaupt: Meinen Computer verstehe ich viiiiiiiiiiiel besser, als jede Frau, zumal das Frauen-OS sicher auch von MS kommt, leider im Gegensatz zu meinem 2000 Prof aber staendig abstuerzt. Also ueberleg Dir das nochmal.

Mach lieber mal Urlaub - hier scheint die Sonne - Gruss von Teneriffa

JanaS · 16.04.2004

VolkerTF schrieb:
Meinen Computer verstehe ich viiiiiiiiiiiel besser, als jede Frau, zumal das Frauen-OS sicher auch von MS kommt, leider im Gegensatz zu meinem 2000 Prof aber staendig abstuerzt.

Ich habe noch nie erlebt, wie jemand in einem einzigen Satz, seine eigene Aussage, so eindrucksvoll selbst wiederlegt.

Buchstaben & Sonderzeichen - ein Bild gestaltet mit CSS

Webbie

VolkerTF

JanaS

Buchstaben & Sonderzeichen - ein Bild gestaltet mit CSS

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums