Yığılmış kağıt Etkisi Giriş Formu Oluşturma

Bu makale bizim bölümümüzün bir parçası. "HTML5 / CSS3 Dersleri serisi" - sizi daha iyi bir tasarımcı ve / veya geliştirici yapmanıza yardımcı olmak için. Buraya TIKLAYIN Aynı serideki daha fazla makale görmek için.

Giriş formları, herhangi bir dinamik web sitesinin temel bir parçasıdır. Web sitesi kullanıcılarının sınırlı içeriğe erişmeleri için bir mekanizma sağlarlar. Bu eğitici yazıda, yığılmış kağıt görünümüyle basit ve zarif bir giriş formu oluşturmak için metin gölgesi, kutu gölgesi, doğrusal gradyanlar ve geçişler gibi CSS3 özelliklerinin çoğunu inceleyeceğiz.

Yukarıdaki resimde, oluşturacağımız giriş formunun bir önizlemesi gösterilmektedir. Dalmaya hazır mısın? Başlayalım!

1. Temel HTML işaretlemesi

Kullanacağımız HTML işaretlemesi çok basittir, HTML5 Doctype bildirisinden sonra, ve </code> etiketleri. İçinde <code><body></code> etiketi, biz bir <code><section></code> 'yığılmış' bir sınıfla etiketleyin. Bu <code><section></code> etiketi, içerik kutusunun genişliğini tanımlamak ve sayfanın ortasına hizalamak için kullanılır. Bu etiketi CSS kullanarak hedeflemek için bu etiketin sınıf adını da kullanırız. bir <code><form></code> etiket takip ediyor <code><section></code> etiket. Form etiketi 'eylem' niteliği için geçerli bir değere sahip değildir, çünkü yalnızca tanıtım amacıyla kullanılmıştır. Form alanı içinde e-posta ve şifre etiketleri ve giriş alanı ile ilgili bildirimler ve ardından gönder düğmesine basılır. Burada dikkat edilmesi gereken önemli nokta, 'e-posta' türünde bir giriş alanı kullandığımızdır. Bu bize HTML5 bildirimi tarafından sağlanmıştır ve daha eski tarayıcılarda normal bir metin girişi alanına incelikle düşer..</p> <p>İşte tüm HTML işaretlemesi:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Basit Giriş Formu

  Oturum aç
   E-posta  
   Parola

     Ve şimdiye dek yarattıklarımızın bir önizlemesi:
  
 2. Temel Stiller Ekleme
 Yeni bir css dosyası oluşturun master.css ve ana HTML dosyanızda bu dosyaya bir bağlantı ekleyin. Farklı tarayıcılarda tekdüzelik sağlamak için CSS dosyamıza hızlı bir sıfırlama ile başlayacağız. Ayrıca sayfamıza hoş bir arka plan resmi ekleyelim. Kullandığım resim alındı İnce desenler. Zevkinize uygun bir arka plan resmi bulmak için siteye göz atmaktan çekinmeyin. Arkaplan resmini aşağıdaki beyanname yardımı ile ekleyebiliriz. Ayrıca kullanıyorum Sans'ı aç gövde metni için Google Web Yazı Tipinden yazı tipi.
  / * -------- Temel Stiller --------- * / body, html margin: 0; dolgu maddesi: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") sol üst tekrar; font: 16px / 1.5 "Açık Sans", Helvetica, Arial, sans-serif;  div.wrap genişlik: 400 piksel; marj: 80 piksel otomatik; 
 3. Yığılmış-Kağıt etkisi
 Artık temel düzene sahip olduğumuz için, formu tasarlamaya başlayalım. Yığılmış kağıt efekti elde etmek için, :sonra ve :önce sözde elemanları. Bu sözde unsurlar çoğunlukla herhangi bir seçiciye görsel efektler eklemek için kullanılır. 
  :önce sözde eleman, seçicinin içeriğinden ve içerikten önce içerik eklemek için kullanılır. :sonra Bir seçici içeriği sonra için sözde eleman. 
 Bölüme, "yığılmış" bir sınıf, 400 piksel genişlik ve 300 piksel yüksekliğe sahip olarak başlayacağız. Ayrıca, bu kutuya # f6f6f6 arka plan rengini ve #bbb renkle 1 piksel kalınlığında bir sınır vereceğiz. Burada dikkat edilmesi gereken önemli noktalar sınır yarıçapı bildirimi ve kutu gölgesi bildirimidir. Burada, "-moz-" ve "-webkit-" tarayıcı önekleri, bunun gecko ve webkit tabanlı tarayıcılarda çalışmasını sağlamak için kullanılmıştır.. 
 Sınır yarıçapı bildirimi çok basittir ve yuvarlatılmış köşeler oluşturmak için kullanılır, eğriyi temsil eden 3 piksel. Kutu gölge bildirimi sözdizimi karmaşık görünebilir, ancak daha iyi anlamak için onu daha küçük parçalara ayıralım. 
  / * -------- Sınır Yarıçapı --------- * / -webkit-border-radius: 3px; -moz-sınır yarıçapı: 3px; sınır yarıçapı: 3px; / * -------- Kutu Gölge --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, 0,2); -moz-kutu-gölge: 0 0 3 piksel rgba (0,0,0, 0,2); kutu-gölge: 0 0 3px rgba (0,0,0, 0,2);
 İlk iki sıfır, x-offset'i ve y-offset'i, 3px ise bulanıklığı gösterir. Sıradaki renk beyanı. Burada rgba değerlerini kullandım; RGBba kırmızı yeşil mavi ve alfa (opaklık) anlamına gelir. Böylece parantez içindeki 4 değer kırmızı, yeşil, mavi ve alfa miktarını gösterir (opaklık).
  .yığılmış background: # f6f6f6; sınır: 1px katı #bbb; yükseklik: 300px; marj: 50 piksel otomatik; pozisyon: göreceli; genişlik: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, 0,2); -moz-kutu-gölge: 0 0 3 piksel rgba (0,0,0, 0,2); kutu-gölge: 0 0 3px rgba (0,0,0, 0,2); -webkit-border-radius: 3px; -moz-sınır yarıçapı: 3px; sınır yarıçapı: 3px; 
 Şimdi formun temel sınırlayıcı kutusunu oluşturduk, şimdi başlayalım. :sonra ve :önce sözde elemanları. 
  .yığılmış: sonra, .stacked: önce background: # f6f6f6; kenarlık: 1px katı #aaa; alt: -8px; içerik: "; yükseklik: 250px; sol: 2px; konum: mutlak; genişlik: 394px; z dizini: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); - moz-box-shadow: 0 0 3px rgba (0,0,0, .2); kutu-gölge: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; border-radius: 3px; .stacked: önce alt: -14px; sol: 5px; genişlik: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px kenarlık yarıçapı: 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); kutu -shadow: 0 0 15px rgba (0,0,0,0,5);
 Şunun için: after ve: sözde elemanlardan önceki kod, yukarıda tartışılan sınırlama kutusunun neredeyse aynısıdır. Burada dikkat edilmesi gereken tek önemli şey, sözde elemanların kesinlikle sınırlayıcı kutuya göre konumlandırılmış olmalarıdır. Yığın kağıt görünümünü sağlamak için sözde öğenin her biri birkaç piksel kademeli olarak düşürülür..
 4. Giriş Alanları
 HTML işaretlemesinde, bu öğeleri CSS beyannamelerimizle kolayca hedeflememize izin vermek için hem e-posta alanına hem de şifre alanına bir 'text-input' sınıfı ekledik. Her iki giriş alanına uygulanan CSS bildirimi.
  form input.text-input outline: 0; Ekran bloğu; genişlik: 330px; dolgu maddesi: 8px 15px; sınır: 1px katı gri; yazı tipi boyutu: 16 piksel; yazı tipi ağırlığı: 400; -webkit-border-radius: 25 piksel; -moz-sınır yarıçapı: 25 piksel; sınır yarıçapı: 25 piksel; kutu-gölge: gömülü 0 2px 8px rgba (0,0,0,0,3); 
 Burada yine sınır yarıçapı ve kutu gölgesi bildirimlerini kullandık. Metin alanları söz konusu olduğunda, daha fazla eğrilik sağlamak için sınır yarıçapına daha yüksek bir değer verilir. Kutu-gölge bildirimi durumunda, anahtar kelime içindekiler gölgenin metin alanının içinde olacağını belirtmek için kullanılmıştır. Burada, gölge için dikey uzaklık 2px'dir ve 8px'lik bir bulanıklığa sahiptir, renk rgba formatı kullanılarak bildirilir..
 Giriş alanlarına biraz etkileşim eklemek için, 'vurgulu' durumunda giriş alanı için box-shadow özelliğini değiştireceğiz. Yeni kutu-gölge bildirimi sıfır x ve y ofsetlerine sahiptir, ancak rgba biçiminde bildirilen renk ile 5px bulanıklığa sahiptir.
 5. Gönder Düğmesi
 Bu formun doldurmamız gereken son kısmı gönder butonudur. Giriş alanına benzer şekilde, kenarlık yarıçapı özelliğini kullanarak gönder düğmesine 25 piksel yarıçapı vereceğiz. Butona bir düğme vermek için 1-x y-ofsetli bir kutu-gölge özelliği de eklenmiştir. “İç gölge” Efekt.
  form input [type = 'Gönder'] float: sağ; dolgu maddesi: 10px 20px; Ekran bloğu; imleç: işaretçi; yazı tipi boyutu: 16 piksel; yazı tipi ağırlığı: 700; renk: #fff; metin gölgesi: 0 1 piksel 0 # 000; arkaplan rengi: # 0074CC; sınır: 1px katı # 05C; -webkit-border-radius: 25 piksel; -moz-sınır yarıçapı: 25 piksel; sınır yarıçapı: 25 piksel; arka plan görüntüsü: -moz-lineer-gradyan (üst, # 08C, # 05C); background-image: -ms-linear-gradyan (üst, # 08C, # 05C); background-image: -webkit-linear-gradyan (üst, # 08C, # 05C); arka plan görüntüsü: doğrusal gradyan (üst, # 08C, # 05C); -webkit-box-shadow: iç içe geçmiş 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: iç içe geçmiş 0 1px 0px rgba (255, 255, 255, 0.5); kutu-gölge: gömülmüş 0 1px 0px rgba (255, 255, 255, 0.5); 
 Burada dikkat edilmesi gereken önemli nokta, bu butona degradenin eklendiğine dair beyandır. CSS3 degradeleri oldukça büyük bir konudur ve sadece yüzeyi çizeceğiz. Bu gönder düğmesi için, # 08C'den # 05C'ye giden bir doğrusal degrade ekleyeceğiz. Şimdiye kadar kullandığımız diğer tüm CSS3 özelliklerinde olduğu gibi, degradenin farklı tarayıcılarda çalışmasını sağlamak için "-moz", "-webkit" ve "-ms" satıcı öneklerini ekleyeceğiz.
 6. Demo ve İndirme
 Giriş formumuz şimdi tamamlandı. Doldurulmuş formun nasıl göründüğünü görmek için gösterime göz atın. Herhangi bir noktada kaybedilirseniz veya öğreticiyi takip edemiyorsanız endişelenmeyin, dosyaları masaüstünüze indirin ve nasıl çalıştığını anlamak için mevcut CSS kodunu inceleyin.
 Umarım bu eğitimden hoşlanmışsınızdır. Bu özellikleri denemekten çekinmeyin ve düşüncelerinizi paylaşmayı unutmayın.
 gösteri
 Dosyaları indir
 
Editörün Notu: Bu gönderi tarafından yazılmıştır Bharani M Hongkiat.com için. Bharani Hindistan, New Delhi'den bir tasarımcı / geliştiricidir. Halen Resumonk.com üzerinde çalışıyor - birkaç dakika içinde profesyonel ve güzel bir özgeçmiş oluşturmanıza yardımcı olan çevrimiçi bir özgeçmiş üreticisi. Ayrıca onun yan projesini inceleyin - Quotescube.com - günlük teklif dozunuz.