+ Antworten
Ergebnis 1 bis 6 von 6

Loginscreen mit Photoshop - jetzt in HTML und CSS

Eine Diskussion über Loginscreen mit Photoshop - jetzt in HTML und CSS im Forum Technik Ecke. Teil des Off Topic-Bereichs; Hallo, hab folgenden Loginscreen mit Photoshop erstellt: habs gesliced und mit Photoshop HTML-Code erstellen lassen. hab aber gehört das soll ...

  1. #1
    Oberfeldwebel
    Avatar von OG Loc
    Registriert seit
    21.04.2007
    Ort
    Neuss
    Alter
    22
    Beiträge
    2.525
    Nick
    OG Loc

    Loginscreen mit Photoshop - jetzt in HTML und CSS

    Hallo,

    hab folgenden Loginscreen mit Photoshop erstellt:



    habs gesliced und mit Photoshop HTML-Code erstellen lassen. hab aber gehört das soll nur müll sein und man solls lieber selbst machen. Aber wie tue ich das ? Momentan sieht meine HTML-Datei so aus:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title>
    Hell vs. Heaven - Free Online Strategy Role Play Browsergame. Spiele fuer die Hoelle oder fuer den Himmel und fuehre deine Partei zum Sieg!
    </title>
    
    <link href="index_style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="loginfield" align="center">
    	<form target="_self">
        	<label for="username" class="loginfield">USERNAME</label><br />
            <input type="text" id="username" /><br />
            
            <label for="password" class="loginfield">PASSWORD</label><br />
            <input type="password" id="password" /><br />
            
          <input name="Senden" type="submit" id="Login" value="Login" /><br />
            
            <a href="#">Passwort vergessen?</a>
        <br />
    	</form>
    </div>
    </body>
    </html>
    Meine CSS-Datei

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    .loginfield {
        width:185px;
        height:183px;
        font-family:"Lithos Pro Regular";
        background:url(../48750495bf252,angels-heaven.jpg);
        opacity:50%
    }
    
    input[type="submit"] {
        background:url(../Log-In/images/Loginscreen_10.gif)
    }
    Aber es sieht nicht mal annährend so aus wie es sollte... Help Pls :x
    Alles mitnehm', viel zu wenig Kraft haben
    Doch vor dem Tod meinen Wunschzettel abhaken
    Und ohne Wünsche sterben, scheiß auf fünfzig werden
    Ist mir egal, wann, Hauptsache, glücklich sterben

  2. #2
    ᒣᒥᒪᒲ ̿ ᐟ⊿ ᒥᐪᒣ ಠ_ృ
    Avatar von deamon
    Registriert seit
    05.07.2002
    Alter
    27
    Beiträge
    4.768
    Clans
    AGFA
    du hast die klassenbezeichner durcheinander geworfen... class="xx" bezeichnet mehrere elemente der klasse xx die sich alle gleich verhalten... id="xx" existiert dagegen explizit nur einmal für ein element xx... ich rotz die lösung jetzt hier einfach hin und hoffe du lernst dadraus was fürs nächste mal...


    Spoiler:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title>
    Hell vs. Heaven - Free Online Strategy Role Play Browsergame. Spiele fuer die Hoelle oder fuer den Himmel und fuehre deine Partei zum Sieg!
    </title>
    <style type="text/css">
    @charset "utf-8";
    /* CSS Document */
    
    
    #lolinfield {
    	background:url(uh44337,1227729183,hippo_bump.jpg);
    	height:9001px;}
     
    #lolinfield form {
    	color:#fff;
    	font-family:"Lithos Pro Regular";
    	background:rgba(0,0,0,0.5);
        width:185px;
        height:183px;
    	margin:auto;
    	text-align:center;
    	border-radius: 10px;
    	border: 1px solid #777;
    	box-shadow: 0px 2px 14px #fff;}
    	
    a:link{
    	color:#fff;
    	text-shadow: 0px 2px 3px #000;}
    	
    	
    .loginfield {
        font-family:"Lithos Pro Regular";
    	text-shadow: 0px 2px 3px #000;
    }
    
    input[type="submit"] {
        background:rgba(255,255,255,0.4);
    	float:right;
    }
    
    #lolinfield form label { 
    	float:left;
    	padding: 2px;}
    
    </style>
    </head>
    <body>
    <div id="lolinfield">
    	<form target="_self">
        	<label for="username" class="loginfield">USERNAME</label><br />
            <input type="text" id="username" /><br />
            
            <label for="password" class="loginfield">PASSWORD</label><br />
            <input type="password" id="password" /><br />
            
          <input name="Senden" type="submit" id="Login" value="Login" />
            
            <a href="#" style="float:right;">Passwort vergessen?</a>
        <br />
    	</form>
    </div>
    </body>
    </html>
    geschrieben für chrome; also is nich für firefox optmiert, d.h. da gibts keine runden ecken zu sehen...

  3. #3
    Oberfeldwebel
    Avatar von OG Loc
    Registriert seit
    21.04.2007
    Ort
    Neuss
    Alter
    22
    Beiträge
    2.525
    Nick
    OG Loc
    Deine Lösung hat mir nicht geholfen, allerdings das davor mit class & id. Da hab ich jetzt einfach die Zeile in

    <div class="loginfield" align="center">

    geändert und jetzt läufts ty.
    Alles mitnehm', viel zu wenig Kraft haben
    Doch vor dem Tod meinen Wunschzettel abhaken
    Und ohne Wünsche sterben, scheiß auf fünfzig werden
    Ist mir egal, wann, Hauptsache, glücklich sterben

  4. #4
    ᒣᒥᒪᒲ ̿ ᐟ⊿ ᒥᐪᒣ ಠ_ృ
    Avatar von deamon
    Registriert seit
    05.07.2002
    Alter
    27
    Beiträge
    4.768
    Clans
    AGFA
    du kopierst den code in eine datei, benennst sie in *.html und packst das hippobild in den gleichen ordner..

    in deinem css fehlen teilweise auch einfach nur semikolons... und opacity:.... naja kannste benutzen, kannst dir auch nen brennenden löffel ins ohr stecken, ich würd beides vermeiden
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken gekloeppelt..PNG  

  5. #5
    Oberfeldwebel
    Avatar von OG Loc
    Registriert seit
    21.04.2007
    Ort
    Neuss
    Alter
    22
    Beiträge
    2.525
    Nick
    OG Loc
    E: Sehe jetzt dein Bild.

    Hm, bei mir siehts komplett anders aus ôO - Ich lads mal hcoh wie es bei mir ausschaut.

    Ok, alles klar, jetzt läufts. Ty.





    Aber 1zu1 wie bei PS kriegt mans nich hin, right?
    Geändert von OG Loc (05.04.2011 um 14:50 Uhr)
    Alles mitnehm', viel zu wenig Kraft haben
    Doch vor dem Tod meinen Wunschzettel abhaken
    Und ohne Wünsche sterben, scheiß auf fünfzig werden
    Ist mir egal, wann, Hauptsache, glücklich sterben

  6. #6
    ᒣᒥᒪᒲ ̿ ᐟ⊿ ᒥᐪᒣ ಠ_ృ
    Avatar von deamon
    Registriert seit
    05.07.2002
    Alter
    27
    Beiträge
    4.768
    Clans
    AGFA
    is halt nur fummelei..
    custom fonts einbinden is halt auch sone sache... kannst die aufm server hinterlegen
    oder halt bilder dafür verwenden..

    spiel einfach n bisschen an den tags rum bis du verstehst was se tun
    border-radius: 10px;
    border: 1px solid #777;
    box-shadow: 0px 2px 14px #fff;
    text-shadow: 0px 2px 3px #000;

+ Antworten

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •