Мини-профили с фоном, берущим цвета из аватарок на CSS3
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
.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; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
