Im 1. Teil dieses Tutorials habe ich ja vorgestellt, wie man mit Hilfe von PHP und einer SQL-Datenbank ein Login- und Registrierungsformular erstellt. Doch das Ergebnis war zwar funktionell, aber zugegebenermaßen kein Designmeisterwerk.

Aber mit ein bisschen CSS kriegen wir es schon hin, dass es in einer halben Stunde oder so, so aussieht:

Alles was wir zusätzlich noch brauchen sind zwei Grafiken. Eine mit großer Auflösung für den Hintergrund, eine weitere als Icon über dem eigentlichen Formular. Danach öffnen wir die index.php aus dem 1. Teil des Tutorials und versorgen sie mit den notwendigen CSS-Klassen und weil es zuvor noch nicht vorhanden war, binden wir direkt über dem Formular (<form></form>) die Grafik für das Icon ein:

<?php
// PHP-Funktion, damit über mehrere Seiten hinweg
// eine Session/Sitzung ermöglicht wird.
// Wir benötigen Sie auf allen unseren Seiten
session_start();

?>
<html>
   <head>
     <title>Loginformular</title>
     <link rel="stylesheet" href="style.css" type="text/css"></link>
   </head>
<body>

<div class="container">
  <img src="images/icon.jpg" class="icon">
  <h1>Login</h1>
  <form action="inc/login-inc.php" method="POST">
  <input type="text" name="user" placeholder="Benutzername">
  <input type="password" name="password" placeholder="Passwort"><br>
  <button type="submit" name="submit" class="button">Login</button>
  </form>
  <a href="signup.php">Registrieren</a>
</div>

</body>
</html>

Im Head-Bereich der index.php muss außerdem natürlich noch die CSS-Datei verlinkt sein, über die wir das Design der Seite bestimmen. In diese style.css müssen nun folgende Anweisungen:

body {
    margin: 0 auto; 
    background-image: url("images/background.jpg");
    background-size: cover;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

a {
    color:#fff;
    font-weight: bolder;
}
a:visited {
    color:#fff;
}

Hier legen wir das Hintergrundbild mit background-image fest, mit background-size: cover sagen wir dem Browser, er soll das Bild über den gesamten Bildschirm strecken. Die beiden Anweisungen wie ein Link bzw. ein besuchter Link dargestellt werden soll, ist reine Geschmackssache. In unserem Beispiel ist eine fette weiße Schrift aber sichtbarer.

.container {
    width:500px; 
    height: 450px; 
    margin:130px auto; 
    padding-top:50px;
    text-align: center;
    background-color: rgba(69, 38, 38, 0.6);
    border-radius:10px;
}

Die Klasse container bestimmt das Aussehen des eingemitteten Bereichs, in dem sich das Formular befindet. Besonders interessant ist border-radius, damit erzeugen wir die abgerundeten Ecken. Und natürlich die Anweisungen für background-color. Damit der Farbhintergrund unseres Containers durchsichtig erscheint, müssen wir unseren üblicherweise mit #123123 dargestellten Farbwert erst einmal in RGB umwandeln. Das kann man zum Beispiel mit dem Color picker tool von Mozilla machen. RGB steht für die Rotwerte, Gelbwerte und Blauwerte einer Farbe, diese werden als erste Zahlen jeweils mit einem ‚,‘ getrennt eingetragen. Die vierte Zahl stellt den Wert der Durchsichtigkeit dar, in unserem Fall also 0.6 quasi 60%.

Als nächstes positionieren wir das Icon mit einem Minuswert bei margin-top, damit es über den Container hinausreicht:

.icon {
    margin-top:-120px;
}

Der nächste Punkt betrifft die Eingabefelder, die wir über ihre Typen text und password ansprechen, damit andere Elemente des Formulars davon nicht betroffen sind:

input[type="text"], input[type="password"] {
    width: 300px;
    height: 50px;
    font-size: 18px;
    margin-bottom: 20px;
    padding-left:5px;
}

Jetzt fehlt praktisch nur noch der Button, für ihn definieren wir zumindest zwei Zustände, den normalen und dann, wenn die Maus ihn berührt:

.button {
    width:150px;
    height: 50px;
    font-size:18px;
    background-color:#000;
    color:#fff;
    border:#fff solid 1px;
}

.button:hover {
    background-color:#fff;
    color:#000;
    cursor: pointer;
}

Ob und wie die Hintergrund- oder Schriftfarbe gewechselt wird, ist wieder Geschmacksfrage. Ich persönlich würde aber immer die Anweisung cursor: pointer; verwenden, damit verwandelt sich der Mausanzeiger in die gewohnte Hand.

Damit haben wir exemplarisch die index.php gestylt, mit den entsprechenden CSS-Klassen können wir dieses Design aber schnell auf unsere anderen Dateien übertragen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.