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.
Wszelkie pytania dotyczące tutorialu zostawiajcie tylko i wyłącznie w komentarzach pod artykułem.
Elegancko :)
Przydatne. Dzięki.
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
W którym miejscu dokładnie chciałbyś umieścić ten panel logowania? Do zaplecza witryny, czy przy logowaniu frontowym?
Takie małe pytanie, gdzie uciekło pole „Zapomniałeś hasła?” :P
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 !!
Witam jak dodać tutaj do panelu kilka kont które działają a inne nie
Nie zrozumiałem chyba… Proszę opisać dokładniej pytanie na naszym forum. Pozdrawiam!
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.
Musisz się odnieść w php czyli „if loged”.
Jak stworzyć użytkownika?
(początkujący jestem)
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!
Ja nie jestem „sieciowym maniakiem” i nie wiem jak to zrobić. Proszę pomóż mi.
Pozdrawiam!!!
Adam Małetka
Jak przesunąć ten panel w prawo?
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.
div#x{
Position:relative;
right,left,top,bottom: wartość w px bądź %;
Sprzedam opla
jaki stan ?
Panie, nic nie stuka, nic nie puka.
jak dorzucisz Pan zimówki to biere.
Mogę dorzucić żone, niski przebieg.
Jak ma dobry lakier i nie jest zdezelowana to też biere.
Niemiec płakał, jak sprzedawał.
Żona z niskim przebiegiem to pułapka. Pewnie od kilku lat na kanale i nijak nie da się jej poużywać. ;)
Nie działa (Najlepiej zrób filmik bo tu Gł***o wytłumaczone)
toż to jest tylko wygllad panelu, chcesz zeby dzialalo naucz sie php i SQL’a
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!)
Jesteś debilem czy takiego udajesz?
A masz wątpliwości patrząc na umiejętność wysławiania się?
dziękuję bardzo. zdecydowanie przydatne.
jedno pytanie: jak teraz dodać opcję rejestracji?
Temat tworzenia panelu sterowania jest tutaj z 2012r. Jak to wyglądałoby obecnie w 2022 czyli po 10 latach.
Może przy użyciu funkcji. Nie wiem pytam. Może autor postarałby się o nowe rozwiązanie i moglibyśmy oba porównać.
ja to robię teraz i działa normalnie tak samo, tylko że musiałem sobie to trochę pozmieniać, ale poradnik GIT.