Вы здесь: Главная » CSS » Варианты оформления блока "Наша команда" и профиля пользователя

Варианты оформления блока "Наша команда" и профиля пользователя

В этой статье вы найдете подборку примеров кода с ресурса codepen.io, которые предлагают интересные решения с точки зрения дизайна и кода для таких блоков вашего сайта (одной из страниц), как "Наша команда" ("Our Teams") и профиль пользователя или автора статьи.

Блок "Наши профессионалы"

Блок с эффектом появления прямоугольника с ссылками на соцсети

Автор shamim khan

See the Pen meet our team by shamim khan (@shamim539) on CodePen.18892

Фото в профиль + социконки

Изначально на странице можно увидеть только фото, причем в профиль. При наведении картинка поднимается вверх или разворачивается в другую сторону, и мы видим имя и должность человека, а также ссылки на соцсети в виде квадратных или круглых иконок.

Автор neil pearce

See the Pen UI Profile Cards by neil pearce (@2975) on CodePen.18892

Фото команды с интересным hover-эффектом

Разметка строится на основе Bootstrap 4.1.2 и иконках Font Awesome 4.7.0, которые мы видим при наведении на блок.

Автор FrankieDoodie

See the Pen Profile Card UI Design Cool Hover Effect by FrankieDoodie (@FrankieDoodie) on CodePen.18892

Блок "Наша команда" с затемнением

При наведении на фото все остальные затемняются. Пример сделан на Vue.js, информация о пользователях подтягивается из JavaScript.

Автор Mert Cukuren

See the Pen our team showcase by Mert Cukuren (@knyttneve) on CodePen.18892

Блок "Meet Our Team"

Вариант, ставший почти классическим, т.к. довольно часто встречается. При наведении на фото мы видим затемненный фон с соц. иконками и информацией.

Автор Aly

See the Pen Meet Our Team by Aly (@afasanistan) on CodePen.18892

Второй вариант оформления с несколько иным эффектом при наведении.

Автор Aashima

See the Pen Meet our team by Aashima (@Aashima) on CodePen.18892

Белые прямоугольники вместо черных.

Автор Nodws

See the Pen Team page hover profiles by Nodws (@nodws) on CodePen.18892

И еще один подобный вариант, но с красным фоном при наведении и забавными фото.

Автор Mauritius D'Silva

See the Pen Team member profile display by Mauritius D'Silva (@mauritiusdsilva) on CodePen.18892

Векторные фото вместо изображений и прикольный hover-эффект.

Автор Baahubali

See the Pen Our Team by Baahubali (@anupkumar92) on CodePen.18892

И еще один подобный блок от того же автора Baahubali:

See the Pen Our Team by Baahubali (@anupkumar92) on CodePen.18892

Вариант для профиля моделей

Автор Aashima

See the Pen Pure Css Team Showcase by Aashima (@Aashima) on CodePen.18892

Переворачивающиеся при наведении карточки

Автор Pop Razvan

See the Pen CSS Flip Cards by Pop Razvan (@roppazvan) on CodePen.18892

Блок "Our Team" с анимацией

Не все фото в этом блоке ассоциируются с командой, но эффект постоянного перемещения смотрится необычно на фоне остальных примеров.

Автор Paulina Hetman

See the Pen Meet our team by Paulina Hetman (@pehaa) on CodePen.18892

Блок "Meet Our Team"

Интересный подход к расположению фото и информации о каждом из участников команды

Автор shamim khan

See the Pen Meet our team by shamim khan (@shamim539) on CodePen.18892

Отзывчивые блоки "Наша команда" в стиле "Material Design"

Восхищает подход автора к созданию этого примера - он не только подобрал интересные фото известных американских актеров, но и добавил интересную информацию о них (на английском языке, разумеется). При клике на иконку-гамбургер мы можем прочитать о любом актере. Для разметки был использован Bootstrap 3 и Font Awesome 4.2. Есть также небольшой код на jQuery.

Автор David Foliti

See the Pen Material Design - Responsive card by David Foliti (@marlenesco) on CodePen.18892

Информация о команде (пользователях) с несколькими вариантами пролистывания

Каждый пользователь как отдельный слайд с 4-мя эффектами появления.

Автор Arafat Hussein

See the Pen Pure CSS Sliders by Arafat Hussein (@rfthusn) on CodePen.18892

Команда (профиль пользователей) в виде карточек

Вы пролистываете карточки, которые выглядывают друг из под друга, чтобы посмотреть информацию о каждом из пользователей. Управление - белыми стрелками справа и слева от карточек.

Автор Tobias

See the Pen Daily UI #006 User Profile by Tobias (@Tbgse) on CodePen.18892

Профиль пользователя в светлой и темной теме

Одни и те же данные реализованы на темном и светлом фоне.

Автор Wanderson Jackson

See the Pen Profile-card-ui by Wanderson Jackson (@Wandersonjack) on CodePen.18892

Профиль пользователя с градиентным фоном и скошенным углом

Очень приятное решение для профиля активного пользователя Dribble, Twitter и Instagram. Вверху есть иконки, которые оставляют место для добавления кода, позволяющего отправить сообщение или посмотреть более подробную информацию. Фото затенено градиентным фоном-оверлеем с помощью псевдоэлемента ::after.

Автор Arafat Hussein

See the Pen Profile Card with Slanted Edge by Codeshape (@codeshape) on CodePen.18892

Несколько вариантов профиля пользователя со скосом

Профиль с кнопкой для фильтрации данных. Хорош для мобильного приложения.

Автор Arjun Amgain

See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.18892

Профиль актера с видео-фоном и прокручиваемыми постерами от того же автора.

Автор Arjun Amgain

See the Pen User Profile by Travis Williamson (@travisw) on CodePen.18892

Здесь тоже использован градиент в качестве оверлея, но фото не сверху, а слева + добавлена анимация появления блока с профилем.

Автор Gabrielle Wee

See the Pen #dailyui 006: User Profile by Gabrielle Wee 🧧 (@gabriellewee) on CodePen.18892

Автор Genaro Colusso

See the Pen Daily UI #6 - Profile by Genaro Colusso (@genarocolusso) on CodePen.18892

Автор Paraskevas Dinakis

See the Pen User Profile (DailyUI #006) by Paraskevas Dinakis (@perry_nt) on CodePen.18892

Профиль пользователя соцсетей

В профиль подтягивается информация о количестве постов, лайков и подписчиков.

Автор Matthias Martin

See the Pen 006 - Profile by Matthias Martin (@roydigerhund) on CodePen.18892

Профиль пользователя с пролистыванием информации в виде слайдера

Автор Arafat Hussein

See the Pen CSS Profile Card by Arafat Hussein (@rfthusn) on CodePen.18892

Профиль пользователя с информацией по клику

Вам необходимо кликнуть по фото пользователя, чтобы увидеть ряд ссылок с информацией о нем. Используются HTML, CSS, SVG и jQuery.

Автор Gerry

See the Pen User Profile by Gerry (@PixelatedOre) on CodePen.18892

Разноплановая информация о пользователе в виде 3-х карточек

Автор Rosa

See the Pen User Profile Cards by Rosa (@RRoberts) on CodePen.18892

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *