Webdesign & UX

Elegancki panel logowania

Przygotowując witryny internetowe najmniej czasu poświęcamy, z pozoru najmniej znaczącym, elementom, takim jak formularze, czy choćby pola wyszukiwania. W kolejnych poradnikach tworzyć będziemy przyjemnie wyglądające, wybrane elementy stron www. Zaczniemy od przygotowania elegancko wyglądającego panelu logowania, który możecie użyć podczas budowania przyszłych projektów. Nie wykorzystamy w tym celu elementów graficznych. Posłużymy się samym formatowaniem CSS3. Zabierzmy się więc do działania. Zacznijmy od zbudowania podstawowego szkieletu w kodzie HTML.

Krok 0. Podstawowy szkielet panelu logowania

Oczywiście same podstawy. Pole tekstowe, pole hasła i przycisk wysyłania. Dodatkowo umieścimy możliwość zaznaczenia, czy należy zapamiętać logowanie użytkownika.

<div id="panel">
<form>
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">
<label for="password">Hasło:</label>
<p><a href="#">Zapomniałeś hasła?</a></p>
<input type="password" id="password" name="password">
<div id="lower">
<input type="checkbox"><label class="check" for="checkbox">Zapamiętaj mnie!</label>
<input type="submit" value="Login">
</div>
</form>
</div>

Spójrzmy do okna przeglądarki. Oto dotychczasowy, surowy efekt.

Krok 1. Tworzymy tło panelu

Przechodzimy do podpiętego arkusza CSS3. Dla bloku „panel” tworzymy tło, cień, oraz delikatne obramowanie.

#panel {
width: 400px; 
margin: 0 auto; 
padding: 15px 0 0;
background: #fff;
border: 1px solid silver;
font: 16px calibri;
letter-spacing: -1px;
-webkit-box-shadow: 0 0 2px silver; 
-moz-box-shadow: 0 0 2px silver; 
box-shadow: 0 0 2px silver;
}
form {
margin: 0;
}

Krok 2. Formatujemy etykiety

Nadajemy odpowiednie ustawienia dla wyświetlanych etykiet, kolor tekstu, opływanie i delikatny cień.

label {
display: block;
width: 260px;
padding: 10px 20px;
color: #696969;
font-size: 16px;
text-shadow: 0 0 1px silver;
}

Krok 3. Pola tekstowe

Teraz nadszedł czas na kod pól do wpisywania loginu i hasła.

#username, #password {
display: block;
width: 360px; 
margin: 0 auto;
padding: 10px 5px;
border: 1px solid silver;
outline: 5px solid #ebebeb;
font-size: 22px;
}
#username:focus, #password:focus {
outline: 5px solid #e5f2f8;
}

Krok 4. Sekcja dolna

Wyróżnić trzeba dolną sekcję, z przyciskiem logowania i przyciskiem do zapamiętywania.

#lower {
background: #ecf2f5;
width: 360px;
padding: 5px 20px;
margin-top: 20px;
}

Krok 5. Elementy w dolnej sekcji

Czas na sformatowanie przycisku do logowania i pola opcji.

.check {
display: inline;
float: none;
font-size: 11px;
padding: 5px;
}
input[type="submit"] {
width: 70px;
padding: 5px 13px;
border: 1px solid #005f85;
color: white;
text-shadow: 0 0 1px black;
background: #98c9dc;
position: relative;
left: 180px;
}

Krok 6. Nadawanie zaokrągleń

W tym kroku podrasujemy trochę nasz panel, dodając zaokrąglenia niektórych rogów.

#panel, input[type="submit"] {
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
}

Osiągnęliśmy etap końcowy. Na koniec wpisu udostępniam Wam pliki źródłowe, oraz DEMO online.

Pobierz pliki źródłowe | Zobacz DEMO

Wszelkie pytania dotyczące tutorialu zostawiajcie tylko i wyłącznie w komentarzach pod artykułem.

komentarzy 29

  • Awatar
    :)

    6 lipca 2012 19:52

    Elegancko :)

    Odpowiedz
  • Awatar
    Rafał A. Nowakowski

    9 września 2012 21:06

    Przydatne. Dzięki.

    Odpowiedz
  • Awatar
    Bartłomiej

    3 listopada 2012 23:24

    Witaj.
    Menu Logowania wygląda wyśmienicie, ale mam pytanie jak to wsadzić w Joomla’e ,że grało i działało nie znam PHP i dokładniej budowy Joomla stąd moje pytanie

    Odpowiedz
    • Awatar
      Michał Kortas

      5 listopada 2012 09:05

      W którym miejscu dokładnie chciałbyś umieścić ten panel logowania? Do zaplecza witryny, czy przy logowaniu frontowym?

      Odpowiedz
  • Awatar
    MrBean

    15 listopada 2012 18:31

    Takie małe pytanie, gdzie uciekło pole „Zapomniałeś hasła?” :P

    Odpowiedz
  • Awatar
    Mariusz

    8 kwietnia 2013 04:50

    Wybaczcie zapewne prostote pytania ale dopiero zaczynam :) udało mi sie wstawić panel na serwer i dopasować wygląd. Nie wiem 2 rzeczy: gdzie wpisać ustanowione hasło dla danego użytkownika oraz ustalić akcje po wpisaniu niepoprawnego hasła oraz prawidłowego ( w tym przypadku przejscie do mojej strony ) Pozdrawiam !!

    Odpowiedz
  • Awatar
    Darek

    28 maja 2013 14:58

    Witam jak dodać tutaj do panelu kilka kont które działają a inne nie

    Odpowiedz
  • Awatar
    Tpk-Games

    2 października 2013 19:05

    Jak do tego zrobić aby każda podstrona wiedziała że użytkownik a nie gość na niej jest ?
    Np.Pokazywała jego nick w prawym górnym rogu.

    Odpowiedz
    • Awatar
      ogar

      18 stycznia 2014 10:38

      Musisz się odnieść w php czyli „if loged”.

      Odpowiedz
  • Awatar
    Internet.maniak

    3 listopada 2013 11:23

    Jak stworzyć użytkownika?
    (początkujący jestem)

    Odpowiedz
    • Awatar
      Nuley

      16 marca 2015 18:04

      Musisz mieć już bazę danych MySQL, przy czym tam zarejestrować ‚użytkownika specjalnego’. Należy połączyć się z bazą danych MySQL, aby ktokolwiek istniał.
      Przy połączeniu do bazy danych (w PHP) należy podać hosta, hasło do MySQL.
      Jeśli jesteś ‚internet maniak’, pogrzeb trochę w sieci, i coś na pewno znajdziesz.
      Pozdrowienia!

      Odpowiedz
      • Awatar
        Adam Małetka

        30 października 2015 15:13

        Ja nie jestem „sieciowym maniakiem” i nie wiem jak to zrobić. Proszę pomóż mi.

        Pozdrawiam!!!
        Adam Małetka

        Odpowiedz
  • Awatar
    MichałNH

    17 marca 2016 13:43

    Jak przesunąć ten panel w prawo?

    Odpowiedz
    • Awatar
      Michał Kortas

      19 marca 2016 19:15

      Bardziej w prawo, czy zupełnie do prawej krawędzi? Centruje go {margin: 0 auto;} więc proponuję zacząć od usunięcia tego formatowania w CSS.

      Odpowiedz
    • Awatar
      Kirus

      2 grudnia 2016 14:50

      div#x{
      Position:relative;
      right,left,top,bottom: wartość w px bądź %;

      Odpowiedz
  • Awatar
    Pan Władek

    8 kwietnia 2016 09:26

    Sprzedam opla

    Odpowiedz
    • Awatar
      Gienek

      8 kwietnia 2016 09:27

      jaki stan ?

      Odpowiedz
      • Awatar
        Pan Władek

        8 kwietnia 2016 09:28

        Panie, nic nie stuka, nic nie puka.

        Odpowiedz
      • Awatar
        Gienek

        8 kwietnia 2016 09:29

        jak dorzucisz Pan zimówki to biere.

        Odpowiedz
      • Awatar
        Pan Władek

        8 kwietnia 2016 09:30

        Mogę dorzucić żone, niski przebieg.

        Odpowiedz
      • Awatar
        Gienek

        8 kwietnia 2016 09:31

        Jak ma dobry lakier i nie jest zdezelowana to też biere.

        Odpowiedz
      • Awatar
        Pan Władek

        8 kwietnia 2016 09:33

        Niemiec płakał, jak sprzedawał.

        Odpowiedz
      • Awatar
        Krystian

        8 kwietnia 2016 10:06

        Żona z niskim przebiegiem to pułapka. Pewnie od kilku lat na kanale i nijak nie da się jej poużywać. ;)

        Odpowiedz
  • Awatar
    11

    3 czerwca 2016 16:29

    Nie działa (Najlepiej zrób filmik bo tu Gł***o wytłumaczone)

    Odpowiedz
    • Awatar
      Jonatan Łyczek

      15 czerwca 2016 18:03

      toż to jest tylko wygllad panelu, chcesz zeby dzialalo naucz sie php i SQL’a

      Odpowiedz
  • Awatar
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    3 czerwca 2016 16:45

    1. Strona ma do dupy kodowanie
    2. Zróbcie jakis film bo tu jest niewytlumaczone wienc skond mam wiedziec
    gdzie to zapisac i wogule (Nic tu w tym przydatnego nie ma!)

    Odpowiedz
    • Awatar
      kacper3100

      5 sierpnia 2016 07:53

      Jesteś debilem czy takiego udajesz?

      Odpowiedz
      • Awatar
        Sławek

        24 sierpnia 2016 19:30

        A masz wątpliwości patrząc na umiejętność wysławiania się?

        Odpowiedz

Zostaw odpowiedź