Elegancki panel logowania


20 maja 2012 / Michał Kortas


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.

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.

Krok 2. Formatujemy etykiety

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

Krok 3. Pola tekstowe

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

Krok 4. Sekcja dolna

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

Krok 5. Elementy w dolnej sekcji

Czas na sformatowanie przycisku do logowania i pola opcji.

Krok 6. Nadawanie zaokrągleń

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

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.



30 odpowiedzi na “Elegancki panel logowania”

  1. :) pisze:

    Elegancko :)

  2. Rafał A. Nowakowski pisze:

    Przydatne. Dzięki.

  3. Bartłomiej pisze:

    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

  4. MrBean pisze:

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

  5. Mariusz pisze:

    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 !!

  6. Darek pisze:

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

  7. Tpk-Games pisze:

    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.

  8. Internet.maniak pisze:

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

    • Nuley pisze:

      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!

      • Adam Małetka pisze:

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

        Pozdrawiam!!!
        Adam Małetka

  9. MichałNH pisze:

    Jak przesunąć ten panel w prawo?

  10. Pan Władek pisze:

    Sprzedam opla

  11. 11 pisze:

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

  12. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! pisze:

    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!)

  13. cyścyś pisze:

    dziękuję bardzo. zdecydowanie przydatne.

    jedno pytanie: jak teraz dodać opcję rejestracji?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *