Создать Twitter-карту для пользователей, использующих HTML5 и CSS3

Профиль пользователя является одной из наиболее важных частей в приложении, откуда он может получить доступ к вашим личным данным, параметрам конфигурации и всем функциям, которые присущи вашему профилю.
Профили пользователей почти всегда следуют стандарту в веб-приложениях, но иногда мы можем реализовать что-то другое, и это также зависит от бизнес-модели нашей страницы, например, если мы управляем каким-либо сообществом любого типа, внедрение карты не помешает Стиль Твиттер для пользователей нашего сообщества.
Сборка HTML
Для создания пользовательской карты в стиле Twitter мы будем использовать HTML5 и CSS3, поэтому у нас будет только два файла; наш .html и наша таблица стилей. Мы включаем нашу таблицу стилей и начинаем создавать нашу структуру гнезд, которая позже с некоторыми стилями в CSS, мы заставим их выглядеть так, как мы хотим.

Дейв Грол @DaveGrohl
3500 твитов
Подписан на 140
Подписчики 2, 700

Если у нас есть это, мы можем только создать нашу таблицу стилей.
Создание CSS
Для CSS мы будем использовать некоторые свойства градиента, тени и обычные свойства для буквы и положения элементов:

 body {background: # F0EFED; background-image: -webkit-linear-Gradient (вверху, # Ошибка4E5, # C2C1C2); background-image: линейный градиент (снизу, # Время4E5, # C2C1C2); семейство шрифтов: «ProximaNova-Regular», Helvetica neue, без засечек; } .container {max-width: 350px; ширина: 100%; высота: 100%; положение: относительное; наценка: авто; } 

В дополнение к этому мы должны добавить стили для карты как таковой, давайте рассмотрим некоторые стили для нее:

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

• 
• 0