Очень интересные профили, в которых фон подстраивается под цвет аватарки.
Установка под себя!
Установка:
1#: В самый низ вашего CSS вставьте:
Код
.artist {
width: 240px;
height: 360px;
margin-right: 20px;
background: #282828;
float: left;
}
.artist:last-child {
margin: 0;
}
.artist__thumbnail {
position: relative;
width: 240px;
height: 240px;
overflow: hidden;
}
.artist__blur {
position: absolute;
top: 0;
left: 0;
-webkit-filter: blur(40px);
filter: blur(40px);
z-index: 1;
}
.artist__image {
width: 120px;
height: 120px;
border-radius: 50%;
z-index: 3;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.artist__ring {
width: 160px;
height: 160px;
border-radius: 50%;
background: -webkit-linear-gradient(0deg,rgba(255,255,255,0.2) 0%,transparent 20%,transparent 80%,rgba(255,255,255,0.2) 100%);
background: linear-gradient(90deg,rgba(255,255,255,0.2) 0%,transparent 20%,transparent 80%,rgba(255,255,255,0.2) 100%);
z-index: 2;
box-shadow: 4px 0 2px -4px rgba(255,255,255,0.9),-4px 0 2px -4px rgba(255,255,255,0.9);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.artist__ring--outer {
width: 200px;
height: 200px;
}
.artist__label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 120px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px 10px;
color: #fff;
}
.capital {
color: #7f7f7f;
text-transform: uppercase;
}
.artist * {
box-sizing: border-box;
}
2#: HTML код мини-профиля:
Код
<div class="artist">
<div class="artist__thumbnail">
<img class="artist__blur" src="ССЫЛКА_НА_АВАТАР">
<img class="artist__image" src="ССЫЛКА_НА_АВАТАР">
<div class="artist__ring"></div>
<div class="artist__ring artist__ring--outer"></div>
</div>
<div class="artist__label">
<p>Ник пользователя</p>
<p class="capital">Подпись пользователя</p>
</div>
</div>