Създайте Twitter карта за потребители, използващи HTML5 и CSS3

Профилът на потребителя е една от най -важните части в приложението, оттам той има достъп до личните си данни, опции за конфигуриране и всички функционалности, присъщи на неговия профил.
Потребителските профили почти винаги следват стандарт в уеб приложенията, но понякога можем да внедрим нещо различно и това също зависи от бизнес модела на нашата страница, например, ако управляваме някаква общност от всякакъв вид, няма да навреди да приложим картичка в стила на Twitter за потребители на нашата общност.
Изграждане на HTML
Ще използваме нашата потребителска карта в стил Twitter HTML5 Y CSS3, така че ще имаме само два файла; нашия .html и нашата таблица със стилове. Ние включваме нашата таблица със стилове и започваме да създаваме нашата вложена div структура, която след това с някои стилове в CSS ще ги накараме да изглеждат както искаме.

Дейв Грол @DaveGrohlТуитове 3,500Следвайки 140Последователи 2,700

След като имаме това, трябва само да създадем своя стилов лист.
Създаване на CSS
За него CSS ще използваме някои градиентни свойства, сенки и конвенционални свойства за буквата и позицията на елементите:

 body {фон: # F0EFED; фоново изображение: -webkit-линеен градиент (отгоре, # E5E4E5, # C2C1C2); фоново изображение: линеен градиент (до долу, # E5E4E5, # C2C1C2); семейство шрифтове: 'ProximaNova-Regular', Helvetica neue, sans-serif; } .контейнер {max-width: 350px; ширина: 100%; височина: 100%; позиция: относителна; марж: авто; }

В допълнение към това трябва да добавим стиловете за картата като такава, нека да разгледаме някои стилове за нея:

 .card-profile_visual: преди, .card-profile_visual: след {display: block; съдържание: ''; ширина: 100%; височина: 100%; позиция: абсолютна; z-индекс: 0; фон: url (profile.jpg.webp) център / корица без повторение в центъра; непрозрачност: 0,5; mix-blend-mode: осветяване; } .card-profile_visual: преди {-webkit-filter: оттенъци на сивото (100%); филтър: оттенъци на сивото (100%); } .card-profile_user-infos {позиция: абсолютна; z-индекс: 3; ляво: 0; вдясно: 0; марж: авто; отгоре: изчислено (68% - 100px); цвят: #fff; подравняване на текст: център; } .card-profile_user-infos a {width: 64px; височина: 64px; позиция: абсолютна; ляво: 0; вдясно: 0; марж: авто; цвят на фона: # F96B4C; background-image: -webkit-linear-gradient ( # F96B4C, # F23182); фон-изображение: линеен градиент ( # F96B4C, # F23182); дисплей: блок; ясно: и двете; марж: авто; граница-радиус: 100%; отгоре: изчислено (500% + 66px); box-shadow: 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), вмъкнати 0 0 15px rgba (255, 255, 255, 0.05); преливане: скрито; }

Ако забележим в час .card-profile_visual Тук добавяме изображението за профила, така че там трябва да добавим изображението на предпочитанията си, за да адаптираме кода към нашите нужди. Нека да видим как изглежда нашият пример, когато го стартираме в браузъра.

И накрая, в края на урока ще има файлове, които всеки може да тества и адаптира на избрания от него уебсайт, така че не се колебайте да го изпробвате и дори да разширите функционалността му от това, което се вижда в този урок.
профилна карта twitter.zip 393.53K 251 изтеглянияХареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка