Tworzenie formularza logowania do arkusza papieru stosowego

Ten artykuł jest częścią naszego „Seria samouczków HTML5 / CSS3” - dedykowane, aby pomóc Ci stać się lepszym projektantem i / lub deweloperem. Kliknij tutaj aby zobaczyć więcej artykułów z tej samej serii.

Formularze logowania są istotną częścią każdej dynamicznej witryny. Stanowią mechanizm umożliwiający użytkownikom witryny dostęp do ograniczonej zawartości. W tym samouczku zapoznamy się z wieloma funkcjami CSS3, takimi jak cieniowanie tekstu, cienie w pudełku, gradienty liniowe i przejścia, aby stworzyć prosty i elegancki formularz logowania z wyglądem na stosie papieru.

Obrazek powyżej pokazuje podgląd formularza logowania, który będziemy budować. Gotowy do nurkowania? Zacznijmy!

1. Podstawowy znacznik HTML

Znaczniki HTML, których będziemy używać, są bardzo proste, po deklaracji HTML5 Doctype mamy i </code> tagi. W ramach <code><body></code> tag, mamy <code><section></code> tag z klasą „stacked”. To <code><section></code> znacznik służy do zdefiniowania szerokości pola zawartości i wyrównania go do środka strony. Będziemy również używać nazwy klasy tego tagu, aby kierować ten tag za pomocą CSS. ZA <code><form></code> tag następuje <code><section></code> etykietka. Znacznik formularza nie ma poprawnej wartości atrybutu „akcja”, ponieważ jest używany tylko w celu demonstracji. W polu formularza znajdują się deklaracje dotyczące etykiet e-mail i haseł oraz pola wprowadzania, a następnie przycisk przesyłania. Ważne jest, aby pamiętać, że użyliśmy pola wejściowego z typem „emaila”. Jest to zapewnione przez deklarację HTML5, która ulega degradacji do zwykłego pola wprowadzania tekstu w starszych przeglądarkach.</p> <p>Oto cały znacznik HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Prosty formularz logowania

  Zaloguj Się
   E-mail  
   Hasło

     A oto podgląd tego, co do tej pory stworzyliśmy:
  
 2. Dodawanie podstawowych stylów
 Utwórz nowy plik css o nazwie master.css i dodaj link do tego pliku w głównym pliku HTML. Uruchomimy nasz plik CSS z szybkim resetem, aby uzyskać jednolitość w różnych przeglądarkach. Dodajmy również ładny obraz tła do naszej strony. Obraz, którego użyłem, został pobrany SubtlePatterns. Zapraszam do przeglądania strony, aby znaleźć obraz tła, który pasuje do Twojego gustu. Możemy dodać obraz tła za pomocą następującej deklaracji. Zauważ również, że używam Open Sans czcionka z Google Web Font dla tekstu ciała.
  / * -------- Style bazowe --------- * / body, html margin: 0; dopełnienie: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") powtórz lewą górną; czcionka: 16px / 1,5 „Open Sans”, Helvetica, Arial, sans-serif;  div.wrap width: 400px; margin: 80px auto; 
 3. Efekt ułożonego papieru
 Teraz, gdy już mamy podstawowy układ, uruchommy projektowanie formularza. W celu uzyskania efektu ułożonego papieru skorzystamy z :po i :przed pseudoelementy. Te pseudoelementy są najczęściej używane do dodawania efektów wizualnych do dowolnego selektora. 
 The :przed pseudoelement służy do dodawania treści przed treścią selektora i :po pseudoelement dla treści po selektorze. 
 Zaczniemy od podania sekcji z klasą „stacked”, o szerokości 400px i wysokości 300px. Ponadto nadamy temu polu kolor tła # f6f6f6 i obramowanie o grubości 1 piksela z kolorem #bbb. Najważniejsze rzeczy do odnotowania to deklaracja promienia granicznego i deklaracja box-shadow. Tutaj prefiksy przeglądarki „-moz-” i „-webkit-” zostały użyte w celu zapewnienia, że działa to w przeglądarkach opartych na gecko i webkitach. 
 Deklaracja border-radius jest bardzo prosta i służy do tworzenia zaokrąglonych narożników, przy czym 3px reprezentuje krzywiznę. Składnia deklaracji box-shadow może wyglądać na skomplikowaną, ale podzielmy ją na mniejsze części, aby lepiej ją zrozumieć. 
  / * -------- Promień obramowania --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2);
 Pierwsze dwa zera wskazują przesunięcie x, a przesunięcie y, a 3px wskazuje rozmycie. Następna jest deklaracja koloru. Użyłem tutaj wartości rgba; rgba oznacza czerwony zielony niebieski i alfa (krycie). Zatem 4 wartości w nawiasie wskazują ilość czerwonego, zielonego, niebieskiego i jego alfa (krycie).
  .skumulowany tło: # f6f6f6; border: 1px solid #bbb; wysokość: 300px; margin: 50px auto; pozycja: względna; szerokość: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 
 Teraz, gdy stworzyliśmy podstawową ramkę ograniczającą dla formularza, zacznijmy od :po i :przed pseudoelementy. 
  .stacked: after, .stacked: before background: # f6f6f6; border: 1px solid #aaa; bottom: -8px; content: "; height: 250px; left: 2px; position: absolute; width: 394px; z-index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; border-radius: 3px; .stacked: before bottom: -14px; left: 5px; width: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; border-radius: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0,5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5); -shadow: 0 0 15px rgba (0,0,0,0,5);
 Kod pseudoelementów: after i: before jest prawie dokładnie podobny do opisanego powyżej obwiedni. Jedyną ważną rzeczą, którą należy tutaj zauważyć, jest to, że te pseudoelementy są ustawione bezwzględnie względem obwiedni. Każdy z pseudoelementów jest stopniowo obniżany o kilka pikseli, aby nadać mu wygląd papieru złożonego.
 4. Pola wejściowe
 W znaczniku HTML dodaliśmy klasę „wprowadzania tekstu” zarówno do pola e-mail, jak i do pola hasła, aby umożliwić nam łatwe kierowanie tych elementów za pomocą naszych deklaracji CSS. Oto deklaracja CSS, która jest stosowana do obu pól wejściowych.
  formularz input.text-input outline: 0; Blok wyświetlacza; szerokość: 330px; padding: 8px 15px; obramowanie: 1px jednolity szary; rozmiar czcionki: 16px; waga czcionki: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; box-shadow: wstawka 0 2px 8px rgba (0,0,0,0,3); 
 Tutaj ponownie skorzystaliśmy z deklaracji border-radius i box-shadow. W przypadku pól tekstowych promień graniczny ma wyższą wartość, aby zapewnić większą krzywiznę. W przypadku deklaracji box-shadow użyto wstawki słowa kluczowego, aby określić, że cień będzie wewnątrz pola tekstowego. Tutaj pionowe przesunięcie dla cienia wynosi 2px i ma rozmycie 8px, a kolor jest deklarowany przy użyciu formatu rgba.
 Aby dodać interaktywność do pól wejściowych, zmienimy właściwość box-shadow dla pola wejściowego w stanie 'hover'. Nowa deklaracja box-shadow ma zero przesunięć x i y, ale ma rozmycie 5px, z kolorem deklarowanym w formacie rgba.
 5. Prześlij przycisk
 Ostatnia część tego formularza, którą musimy wypełnić, to przycisk Prześlij. Podobnie jak w przypadku pola wejściowego, podamy przycisk wysyłania o promieniu 25px, używając właściwości border-radius. Dodano również właściwość box-shadow z przesunięciem y 1px, aby dać przycisk an “Wewnętrzny cień” efekt.
  formularz input [type = 'submit'] float: right; dopełnienie: 10px 20px; Blok wyświetlacza; cursor: pointer; rozmiar czcionki: 16px; waga czcionki: 700; kolor: #fff; text-shadow: 0 1px 0 # 000; kolor tła: # 0074CC; granica: 1px bryła # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-image: -moz-linear-gradient (góra, # 08C, # 05C); background-image: -ms-linear-gradient (góra, # 08C, # 05C); background-image: -webkit-linear-gradient (góra, # 08C, # 05C); background-image: linear-gradient (góra, # 08C, # 05C); -webkit-box-shadow: wstawka 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: wstawka 0 1px 0px rgba (255, 255, 255, 0,5); box-shadow: wstawka 0 1px 0px rgba (255, 255, 255, 0,5); 
 Ważną rzeczą do odnotowania jest tutaj deklaracja dodania gradientu do tego przycisku. Gradienty CSS3 to dość duży temat i będziemy tylko drapać powierzchnię. W przypadku tego przycisku przesyłania dodamy gradient liniowy przechodzący z # 08C na # 05C. Podobnie jak w przypadku wszystkich innych właściwości CSS3, z których korzystaliśmy do tej pory, dodamy przedrostki dostawców „-moz”, „-webkit” i „-ms”, aby zapewnić, że gradient działa w różnych przeglądarkach.
 6. Demo i Pobierz
 Nasz formularz logowania jest teraz ukończony. Sprawdź demo, aby zobaczyć, jak wygląda wypełniony formularz. Jeśli zgubisz się w jakimkolwiek momencie lub nie możesz śledzić samouczka, nie martw się, po prostu pobierz pliki na pulpit i majstruj przy istniejącym kodzie CSS, aby zrozumieć, jak to działa.
 Mam nadzieję, że podobał ci się ten tutorial. Eksperymentuj z tymi funkcjami i nie zapomnij podzielić się swoimi przemyśleniami.
 Próbny
 Pobierz pliki
 
Nota redaktora: Ten wpis jest napisany przez Bharani M dla Hongkiat.com. Bharani jest projektantem / deweloperem z New Delhi w Indiach. Obecnie pracuje nad Resumonk.com - internetowym konstruktorem CV, który pomaga stworzyć profesjonalne i piękne CV w ciągu kilku minut. Sprawdź także jego projekt poboczny - Quotescube.com - dzienną dawkę cytatów.