Мини-профили с фоном, берущим цвета из аватарок на CSS3

Разместил: Apocalypse
11 мая 2016

Очень интересные профили, в которых фон подстраивается под цвет аватарки Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 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;
}

.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>

</div>

<p>Ник пользователя</p>

<p class="capital">Подпись пользователя</p>

</div>

Метки: Blur CSS3 аватар Мини-профиль Размытие Фон

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

Вы точно не робот?

0 Комментарий

Межтекстовые Отзывы

Посмотреть все комментарии

VVL99

ctrl +f5

2023-09-23 16:37:07

Apocalypse

@VVL99, просто пожалей своих посетителей с хотя бы средними ПК

2023-09-23 16:37:09

VVL99

@Apocalypse, это да перегружать тоже не хорошо..

2023-09-23 16:37:58

Apocalypse

@VVL99, ну. Важен баланс. Один раз я тоже настолько нагрузил свой сайт, что он 1фпс выдавал на том моём старом ПК

2023-09-23 16:39:43

VVL99

@Apocalypse, обычно начинаешь понимать только когда уже приелись все эти украшательства.

2023-09-23 16:41:25

Apocalypse

@VVL99, раньше я тоже пытался каждый день сделать сайт уникальным, а потом понял, что это никому вообще не нужно, кроме меня

2023-09-23 16:44:03

VVL99

@Apocalypse, согласен.

2023-09-23 17:08:28

VVL99

@Apocalypse, изменил анимацию падающих листьев и решил подсмотреть как у тебя сделано, ты используешь расчёт свойств Transform, а я генерирую анимацию...

2023-09-26 18:16:57

VVL99

Обновил анимацию падающих листьев, теперь они реагируют не только на направление ветра и его силу, но и когда ветер стихает, листьев падает меньше, а когда ветер достигает высоких значений, то листья начинают кружить в 3d пространстве.

2023-09-27 18:16:13

VVL99

При этом листья выполняют все возможные вращения и с разнообразной скоростью.

2023-09-27 18:19:03

......

Для публикации сообщений в чате необходимо авторизоваться

Мини-профили с фоном, берущим цвета из аватарок на CSS3

Вам может также понравиться...

Посетители сайта

Панель управления

Сентябрь 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Мини-профили с фоном, берущим цвета из аватарок на CSS3

Вам может также понравиться...

Вращающаяся Новогодняя ёлка на чистом CSS

Ламповый зимний пейзаж со снегом, фонарём и качелями на чистом CSS

Переливающиеся драгоценные камни на CSS3

Посетители сайта

Панель управления