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

animeshnik_ALT
@animeshnik_ALT,
часть 2
>6<
Фикс для WYSIWYG
[div=Ssylki-anime Дополнительный-класс][b][anime=ID][/b][/anime][div=Evaluation]Текст на красном фоне[/div][div=Text-2]Текст на постере[/div][/div]
Разные градиенты
.Ssylki-anime strong::before {
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  background-size: 600%;
}
.Ssylki-anime strong::before {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
  background-size: 600%;
}
/*Золотой*/
.Ssylki-anime strong::before {
  background: radial-gradient(ellipse farthest-corner at right bottom, #fedb37 0%, #FDB931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-size: 600%;
}
/*Синий*/
.Ssylki-anime strong::before {
  background: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
  background-size: 600%;
}
Текст на постере
.Ssylki-anime .Text-2 {
  color: #dda2a2;
}
Красная линия
.Ssylki-anime .Evaluation
    top: 0.9rem;
    left: 0;
    background: #6e1515;
    border-color: #6e1515;
    color: #d9c9e0;
}

добавить того, кого нет на шикимори
Выбираем аниме, которого не будет у нас в "обо мне". Пусть это будет аниме с ID 1.
[div=Ssylki-anime Дополнительный-класс][b][anime=1][/b][/anime][div=Evaluation]text[/div][div=Text-2]TEXT2[/div]
[/div]
Далее отключаем подсказку у этого аниме.
/*Отключение подсказки у Ковбоя Бибоп*/
#profiles_show .about.block a[href*="animes/1-"] {
  pointer-events: none;
}
.Ssylki-anime {
  cursor: pointer;
}
И наконец ставим постер
.Ssylki-anime.Дополнительный-класс > strong > a::before {
  background-image: url(постер);
}
2 постера в одном
скрин
В bb code добавляем ещё 1 тайтл:
[div=Ssylki-anime krest-rokunin][b][manga=125076 крест-рокунин][/b][/manga][b][manga=13 ван-пис][/b][/manga][div=Evaluation][/div][div=Evaluation][/div][div=Text-2][/div][/div]
Смещаем вторую красную полоску
/* Двойной постер красная полоска */
.Ssylki-anime .Evaluation:nth-child(4) {
    left: 49%;
}
хочу менять постер при наведении
Тогда обязательно добавляем Дополнительный-класс.
Вот так:
[div=Ssylki-anime Дополнительный-класс][b][anime=ID][/b][/anime][div=Evaluation]Текст на красном фоне[/div][div=Text-2]Текст на постере[/div][/div]
Далее менять постеры мы, конечно же, будем в CSS.
Оставляем текст при наведении на постер:
.Ssylki-anime:hover > .Text-2, .Ssylki-anime:hover .Evaluation {
  opacity: 1 !important;
}
Пишем текст в CSS:
.Ssylki-anime.ваш-класс:hover .Evaluation, .Ssylki-anime.ваш-класс:hover > .Text-2 {
  font-size: 0;
}
.Ssylki-anime.ваш-класс:hover .Evaluation:after {
  font-size: 14px;
  content: "Текст на красном фоне при наведении";
}
.Ssylki-anime.ваш-класс:hover > .Text-2:after {
  font-size: 15px;
  content: "Текст на постере при наведении";
}
Постер через ваш класс
.Ssylki-anime.ваш-класс > strong > a::before {
  background-image: url("https://avatars.mds.yandex.net/i?id=78925d9a8fcb39475dc5ac5a95f97c67_l-4034571-images-thumbs&n=13"); /* Картинка */
}
.Ssylki-anime.ваш-класс:hover > strong > a::before {
  background-image: url("https://i.pinimg.com/564x/18/31/07/18310767f33a8733abedd1498c194f7d.jpg"); /* Картинка при наведении */
}
как убрать всплывающую подсказку
Но вместе с этим вы отключите возможность переходить по постеру на страницу тайтла.
.Ssylki-anime a.b-link.bubbled-processed {
  pointer-events: none;
}
/* Курсор меняется при наведении */
.Ssylki-anime {
  cursor: pointer;
}
>7<
Фикс для WYSIWUG
[div=Ssylki-Characters][b][anime=20 наруто][/b][/anime][div=Text-1]1 весна2021[/div][/div]
Размер
.Ssylki-Characters {
  width: calc(100% / 5); /*где 5 - кол-во в строке*/
}
Фон
.Ssylki-Characters {
  background-image: url("https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13");
}
Фон при наведении
div.Ssylki-Characters:hover {
    background-image: url(https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13);
}
Фон у текста при наведении
.Ssylki-Characters .Text-1:after {
  height: calc(100% - 2%); /* Изображение немного выходило за рамки */
  width: calc(100% - 2%);
  content: url("https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13");
  filter: blur(4px); /* Размытие */
}
Отключить поворот
div.Ssylki-Characters {
  transform: none;
  transition: none;
}
Видимость на телефонах
@media screen and (max-width: 767px) {
  .magnet {
    display: unset;
  }
  /*Размер*/
  .Ssylki-Characters {
    width: calc(100% / 3);
  }
  .Ssylki-Characters .b-link {
    pointer-events: none; /*Кликабельность*/
  }
}
@media screen and (max-width: 1023px) {
  .Ssylki-Characters .Text-1 {
    visibility: unset;
  }
}

добавить того, кого нет на шикимори
Выбираем аниме, которого не будет у нас в "обо мне". Пусть это будет аниме с ID 1.
[div=Ssylki-Characters Дополнительный-класс][b][anime=1 ковбой-бибоп][/b][/anime][div=Text-1]300 Скоро[/div][/div]
Далее отключаем подсказку у этого аниме.
/*Отключение подсказки у Ковбоя Бибоп*/
#profiles_show .about.block a[href*="animes/1-"] {
  pointer-events: none;
}
.Ssylki-Characters {
  cursor: pointer;
}
И наконец ставим постер
.Ssylki-Characters.Дополнительный-класс a::before {
  background: url(постер) 50% / cover;
}
Ответы
IR
IR#
@animeshnik_ALT, благодарен тебе за прошлый раз хотел спросить , можно ли поменять цвет в коде а то я ищу и там 3-4 поцизии с цветом какой из них?
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть