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

Комментарий #8938469

в топике Авторы14 ноября 2022

Показал на франшизной, но у авторской то же самое, так что не суть.

Да идея та же, о чем тут речь и идет. Разница в конкретных символах/цветах/анимациях.
Звезда напоминает про "Добавить в избранное" у тайтла (т.е. кликабельный функционал сайта), поэтому такой вариант мне не очень.

ReDiskInA

А звезда выглядит как пометка "избранное".

Вот, сперва написала то же самое, а потом прочитала.

ReDiskInA

Они (цвета) все выглядят либо плоско, либо "грязно".

Глаза от вариантов цвета разбегаются) Чем больше вариантов, тем сложнее выбор...

tdok57

анимации утяжеляют прогрузку страниц и потому как бы лучше их не плодить

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

tdok57

уже имеющуюся цветовую гамму из белого и синего, которая используется по всей ачивковой странице

nessensis

Имхо, корона или что-то аналогичное ей выглядит как расфуфыренная галочка

Просто галочки и разноцветные рамки в ачивках и так есть (без рамок только франшизы), поэтому надо как-то выделить все равно. Если не короной, так другим символом, или короной в другом дизайне. Или саму галочку тоже какой-нибудь золотой, в одной гамме с рамкой.
Вот например достаточно близкое по стилю к текущей галочке изображение: www.flaticon.com/ru/free-icon/crown_4476170
А вот лавр www.flaticon.com/ru/free-icon/olives_1792882
Или такое www.flaticon.com/ru/free-icon/certified_3757397
А тут сильно расфуфырено) www.flaticon.com/ru/free-icon/exclusive_2652185

4-1-|2 g-e-a-r

Так это же чисто фича для обложки, вроде речи о том, что бы добавлять в ачивку обязательные к просмотру тайтлы не шла...

Ну я это так прочитала про "ключевые работы" /comments/8927252 И включила паникера.

tdok57

Мы не в европе и тут не фем-клуб.

А вот таких высказываний я, скажем мягко, не поощряю.

спойлер

Для справки, в совке программинг был больше женской профессией, пока в школах не начали вбивать детям в голову всякие штампы.

Ты написал:

tdok57

ты предложил

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

@4-1-|2 g-e-a-r, почему сомнительно, ты сомневаешься в возможностях CSS? У меня однокурсница как-то торт нарисовала с кремом и горящими свечками анимированными чисто на ЦСС. Там есть разные команды шире, чем в базовом ЦСС для профилей, та же самая команда анимации. Я просто ЦСС вскользь коснулась не углубляясь именно в картинки и уже почти забыла.

Seth

чтобы картинку обходила рамка в виде короны с зубцами внутрь картинки

А это не слишком расфуфырено ли как раз?

Забьет же зубцами изображение.

@tdok57, напоминает скорее картину в раме на стене, имхо.

спойлер

800x551

ReDiskInA

Возможно, можем градиентом (бликами, о которых Houp писала) - разные оттенки цвета взять, в том числе максимально приближенного к белому.

Нашла такой вариант как раз градиентной анимации, как оно: codepen.io/mike-schultz/pen/NgQvGO Достаточно плавный, но по идее можно еще замедлить, а цвета поменять на оттенки желтого из гаммы золота encycolorpedia.ru/f9d012

@Seth, @ReDiskInA, @4-1-|2 g-e-a-r

Ответы

Seth15 ноября 2022#

World_Houp

А это не слишком расфуфырено ли как раз?

Забьет же зубцами изображение.

И что? Зато точно будет выделяться. Просто если поставить что-то не сильно измененное, то ничем не будет отличаться.

ReDiskInA15 ноября 2022#

World_Houp

Нашла такой вариант как раз градиентной анимации, как оно: codepen.io/mike-schultz/pen/NgQvGO

Переделала шаблон. Пробуйте, смотрите.
Оттенок у иконки менять в значениях функций sepia, brightness и contrast.
Остальное, вроде, понятно где менять.

518x268

код

<div class="gradient-border" id="box">
<img class="maxlvl" src="https://cdn-icons-png.flaticon.com/512/2652/2652185.png" width="70" height="70">
</div>

html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #1D1F20;
}
#box {
  display: flex;
  width: 500px;
  height: 250px;
  align-items: right;
  justify-content: right;
}
.maxlvl{
  filter: invert(85%) sepia(100%) saturate(6354%) hue-rotate(347deg) brightness(80%) contrast(100%);
  margin:8px;
}
.gradient-border {
  --borderWidth: 5px;
  background: url(https://shikimori.one/assets/achievements/anime/author/makoto_shinkai.jpg);
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #ffefbb, #e8d24a, #f4d64f, #fff7dd, #eecd40, #f4d64f, #fbdd53);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}
@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@Seth, @World_Houp

4-1-|2 g-e-a-r19 ноября 2022#

World_Houp

ты сомневаешься в возможностях CSS?

Сомневаюсь что их можно реализовать в расширенном виде там, где нам нужно...
@ReDiskInA, это всё выглядит достаточно безвкусно на самом деле...

Твой комментарий

Комментарий #8938469 World_Houp

Комментарий #8938469
World_Houp