HTML5 ve CSS3 kullanan kullanıcılar için Twitter kartı oluşturun

Kullanıcı profili, bir uygulama içindeki en önemli kısımlardan biridir, buradan kişisel verilerine, yapılandırma seçeneklerine ve profiline özgü tüm işlevlere erişebilir.
Kullanıcı profilleri web uygulamalarında neredeyse her zaman bir standardı takip eder, ancak bazen farklı bir şey uygulayabiliriz ve bu aynı zamanda sayfamızın iş modeline de bağlıdır, örneğin herhangi bir tür topluluğu yönetiyorsak, bir uygulama yapmaktan zarar gelmez. tarzında kart heyecan topluluğumuzun kullanıcıları için.
HTML'yi Oluşturma
Twitter tarzı kullanıcı kartımızı yapmak için kullanacağız HTML5 Y CSS3, bu yüzden sadece iki dosyamız olacak; .html ve stil sayfamız. Stil sayfamızı ekliyoruz ve iç içe div yapımızı oluşturmaya başlıyoruz, daha sonra bazı stiller CSS onları istediğimiz gibi göstereceğiz.

Dave Grohl @DaveGrohlTweetler 3,500Takip etmek 140Takipçiler 2,700

Buna sahip olduğumuzda, sadece stil sayfamızı oluşturmamız gerekiyor.
CSS'yi Oluşturma
Onun için CSS harf ve öğelerin konumu için bazı gradyan özellikleri, gölgeler ve geleneksel özellikler kullanacağız:

 gövde {arka plan: # F0EFED; arka plan görüntüsü: -webkit-doğrusal-gradyan (üstte, # E5E4E5, # C2C1C2); arka plan görüntüsü: doğrusal gradyan (alta doğru, # E5E4E5, # C2C1C2); font ailesi: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .container {maksimum genişlik: 350 piksel; genişlik: %100; yükseklik: %100; pozisyon: göreceli; kenar boşluğu: otomatik; }

Buna ek olarak, kart için stilleri de bu şekilde eklemeliyiz, bunun için bazı stillere bir göz atalım:

 .card-profile_visual: önce, .card-profile_visual: sonra {display: blok; içerik: ''; genişlik: %100; yükseklik: %100; pozisyon: mutlak; z-endeksi: 0; arka plan: url (profile.jpg.webp) tekrarsız merkez merkez / kapak; opaklık: 0,5; mix-blend-modu: hafifletmek; } .card-profile_visual: önce {-webkit-filter: gri tonlamalı (%100); filtre: gri tonlamalı (%100); } .card-profile_user-infos {konum: mutlak; z-endeksi: 3; sol: 0; sağ: 0; kenar boşluğu: otomatik; üst: hesap (%68 - 100 piksel); renk: #fff; metin hizalama: merkez; } .card-profile_user-infos a {width: 64px; yükseklik: 64 piksel; pozisyon: mutlak; sol: 0; sağ: 0; kenar boşluğu: otomatik; arka plan rengi: # F96B4C; arka plan görüntüsü: -webkit-doğrusal-gradyan (# F96B4C, # F23182); arka plan görüntüsü: doğrusal gradyan (# F96B4C, # F23182); Ekran bloğu; ikisini de temizle; kenar boşluğu: otomatik; sınır yarıçapı: %100; üst: hesap (%500 + 66 piksel); kutu gölgesi: 0 2px 0 # D42D78, 0 3px 10px rgba (243, 49, 128, 0.15), 0 0px 10px rgba (243, 49, 128, 0.15), 0 0px 4px rgba (0, 0, 0, 0.35 ), 0 5px 20px rgba (243, 49, 128, 0.25), 0 15px 40px rgba (243, 49, 128, 0.75), iç metin 0 0 15px rgba (255, 255, 255, 0.05); taşma: gizli; }

sınıfta fark edersek .card-profile_visual Profil için görüntüyü eklediğimiz yer burasıdır, bu yüzden kodu ihtiyaçlarımıza uyarlamak için tercih ettiğimiz görüntüyü eklemeliyiz. Tarayıcıda çalıştırdığımızda örneğimizin nasıl göründüğünü görelim.

Son olarak, öğreticinin sonunda, herkesin kendi seçtikleri web sitesinde test edip uyarlaması için dosyalar olacak, bu yüzden denemekten ve hatta bu öğreticide görülenden işlevselliğini genişletmekten çekinmeyin.
profil kartı twitter.zip 393.53K 251 İndirilenlerBu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.