Buchstaben & Sonderzeichen - ein Bild gestaltet mit CSS

Dieses Thema Buchstaben & Sonderzeichen - ein Bild gestaltet mit CSS im Forum "Windows XP Forum" wurde erstellt von Webbie, 14. Apr. 2004.

Thema: Buchstaben & Sonderzeichen - ein Bild gestaltet mit CSS Hallo, Inspiriert von CSS-Werken wie CSS House, habe ich ein Bild erstellt, welches nur aus Buchstaben und...

  1. 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:
    <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
        [url]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>[/url]
    
    <html xmlns=[url]http://www.w3.org/1999/xhtml[/url] xml:lang=de>
    
    <head>
    
    <title>Buchstaben & Sonderzeichen</title>
    
    <meta http-equiv=content-type content=text/xml; charset=ISO-8859-1 />
    
    <style type=text/css>
    <!--
    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;
    }
    -->
    </style>
    
    </head>
    
    
    
    <body>
    
    <!-- blaue Figur -->
    
    <div id=kopfL>O</div>
    <div id=augenL>õõ</div>
    <div id=mundL>-</div>
    <div id=rumpfL>Ω</div>
    <div id=pupillenL>••</div>
    <div id=frisur1L>"</div>
    <div id=frisur2L>"</div>
    
    
    
    <!-- gruene Figur -->
    
    <div id=kopfR>O</div>
    <div id=brillenglaeserR>oo</div>
    <div id=mundR>-</div>
    <div id=rumpfR>Ω</div>
    <div id=pupillenR>••</div>
    <div id=hut1R>Π</div>
    <div id=hut2R>—</div>
    <div id=brillengestell1R>\/</div>
    <div id=brillengestell2R>—</div>
    
    </body>
    
    </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
     
  2. 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
     
  3. Ich habe noch nie erlebt, wie jemand in einem einzigen Satz, seine eigene Aussage, so eindrucksvoll selbst wiederlegt.
     
Die Seite wird geladen...

Buchstaben & Sonderzeichen - ein Bild gestaltet mit CSS - Ähnliche Themen

Forum Datum
Tastatur Buchstaben Abrieb Hardware 28. März 2016
Geänderte Laufwerkbuchstaben Windows 7 Forum 16. Aug. 2015
Buchstabenänderung ext. Laufwerk Sonstiges rund um den PC & Kaufberatung 6. Aug. 2015
Win7: Bei Office 2010 Word springen die Buchstaben E-Mail-Programme 7. Sep. 2014
Laufwerk C mit allen Laufwerksbuchstaben ... Windows 7 Forum 27. Feb. 2014