В этой статье вы найдете подборку примеров кода с ресурса 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 Elen (@ambassador) 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 Elen (@ambassador) on CodePen.18892
И еще один подобный вариант, но с красным фоном при наведении и забавными фото.
Автор Mauritius D'Silva
See the Pen Team member profile display by Elen (@ambassador) 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
Автор Anton Rikhnovets
See the Pen This is our awesome team by Anton Rikhnovets (@rikhnovets) on CodePen.0
Автор Mark Murray
See the Pen Flippable CSS3 Business Card by Mark Murray (@markmurray) on CodePen.0
Автор Dmitry Korobov
See the Pen Flipping Card by Dmitry Korobov (@DmitryKorobov) on CodePen.0
Блок "Meet Magic Team" с анимацией смещения фотографий
Фото в этом блоке, скорее ассоциируются не с командой, а с друзьями, но эффект постоянного перемещения смотрится необычно на фоне остальных примеров.
Автор Paulina Hetman
See the Pen Meet our team by Elen (@ambassador) on CodePen.18892
Блок "Meet Team"
Интересный подход к расположению фото и информации о каждом из участников команды
Автор shamim khan
See the Pen Meet our team by Elen (@ambassador) 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
Интересный анимационный эффект приближения и ухода в сторону
Автор P использовал также фото актеров в черно-белом варианте, что и в примере выше, но с другими эффектами.
See the Pen Profile Card Hover Effect by P (@petegarvin1)
on CodePen.0
Информация о команде (пользователях) с несколькими вариантами пролистывания
Каждый пользователь как отдельный слайд с 4-мя эффектами появления. Прокрутите пример вниз, чтобы увидеть все варианты.
Автор Arafat Hussein
See the Pen Pure CSS Sliders by Elen (@ambassador) on CodePen.18892
Команда (профиль пользователей) в виде карточек
Вы пролистываете карточки, которые выглядывают друг из под друга, чтобы посмотреть информацию о каждом из пользователей. Управление - белыми стрелками справа и слева от карточек.
Автор Tobias
See the Pen Daily UI #006 User Profile by Tobias (@Tbgse) on CodePen.18892
Блок "Наша команда" в виде чередующихся блоков
Адаптивный вариант для блока "Наша команда", сверстанный с помощью сетки (Grid) с чередованием блоков с информацией и изображений.
See the Pen Grid Teams Section by Elen (@ambassador) 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
Выступающее фото на фоне
Интересный эффект для фото команды получился у автора Mikael Ainalem с использованием свойства clip-path - изображение человека выходит за пределы фона.
See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen.0
