Комментарий #8102789
S4G3S4G3

S4G3
в профиле пользователя Cosmo ☭
Добрый вечер, очень заинтересовала временная линия просмотренных аниме (100, 200, 300 и тд), как сделать такую же или примерно похожую?:tea2:
@Cosmo ☭
Ответы
Cosmo ☭
Cosmo ☭#
@S4G3,
1 полоска 1268x84 
[div=fish]
[b][/b][i][url=https://shikimori.one/animes/20-naruto] 100
[u]Наруто[/u][s]Май 2018[/s]
[/url][url=https://shikimori.one/animes/35994-satsuriku-no-tenshi] 200
[u]Ангел кровопролития[/u][s]сентябрь 2018[/s]
[/url][url=https://shikimori.one/animes/3782-kara-no-kyoukai-2-satsujin-kousatsu-zen] 300
[u]Граница пустоты 2: Теория убийства — Часть 1[/u][s]ноябрь 2018[/s]
[/url][url=https://shikimori.one/animes/7588-saraiya-goyou] 400
[u]Дом Пяти Листьев[/u][s]январь 2019[/s]
[/url][url=https://shikimori.one/animes/34382-citrus] 500
[u]Цитрус[/u][s]24 июня 2019[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 600
[u]----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 650
[u]----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 700
[u]-----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.one/animes/z34096-gintama] 750
[u]-----[/u][s]13.10.2018[/s]
[/url][b]???[/b][b]???[/b][b]???[/b][b]???[/b][b]???[/b][b]???[/b][b]😵[/b][/i][/div]
2 полоски 1218x143
@S4G3, 
[div=fish]
[b][/b][i][url=https://shikimori.one/animes/20-naruto] 100
[u]Наруто[/u][s]Май 2018[/s]
[/url][url=https://shikimori.one/animes/35994-satsuriku-no-tenshi] 200
[u]Ангел кровопролития[/u][s]сентябрь 2018[/s]
[/url][url=https://shikimori.one/animes/3782-kara-no-kyoukai-2-satsujin-kousatsu-zen] 300
[u]Граница пустоты 2: Теория убийства — Часть 1[/u][s]ноябрь 2018[/s]
[/url][url=https://shikimori.one/animes/7588-saraiya-goyou] 400
[u]Дом Пяти Листьев[/u][s]январь 2019[/s]
[/url][url=https://shikimori.one/animes/34382-citrus] 500
[u]Цитрус[/u][s]24 июня 2019[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 600
[u]----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 650
[u]----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 700
[u]-----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.one/animes/z34096-gintama] 750
[u]-----[/u][s]13.10.2018[/s]
[/url][b]???[/b][b]???[/b][b]???[/b][b]???[/b][b]???[/b][b]???[/b][b]😵[/b][/i][/div]
[div=fish]
[b][/b][i][url=https://shikimori.one/animes/20-naruto] 800
[u]Наруто[/u][s]Май 2018[/s]
[/url][url=https://shikimori.one/animes/35994-satsuriku-no-tenshi] 850
[u]Ангел кровопролития[/u][s]сентябрь 2018[/s]
[/url][url=https://shikimori.one/animes/3782-kara-no-kyoukai-2-satsujin-kousatsu-zen] 900
[u]Граница пустоты 2: Теория убийства — Часть 1[/u][s]ноябрь 2018[/s]
[/url][url=https://shikimori.one/animes/7588-saraiya-goyou] 950
[u]Дом Пяти Листьев[/u][s]январь 2019[/s]
[/url][url=https://shikimori.one/animes/34382-citrus] 1000
[u]Цитрус[/u][s]24 июня 2019[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 1050
[u]----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 1100
[u]----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 1150
[u]-----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 💙
[u]-----[/u][s]13.10.2018[/s]
[/url][url=https://shikimori.org/animes/1346-ad-police] 1250
[u]3[/u][s]13.10.2020[/s]
[/url][b]???[/b][b]???[/b][b]???[/b][b]???[/b][b]???[/b][b]😵[/b][/i][/div]
css
.fish {
  margin: 5px auto 10px auto;
}
/*** Прогресс бар ***/
.fish strong + em {
  position: relative;
  height: 27px;
  border: 0;
  padding: 3px;
  font-style: normal;
  display: flex;
  justify-content: center;
  opacity: 0.8;      /*убрать прозрачность!*/   /*не стоит задирать! а то видны будут переходы и косяки*/
}
.fish strong + em:hover {
  z-index: 99;
}
.fish strong + em > br {
  display: none;
}
/* Прогресс бар - деления */
.fish strong + em > a.b-link,
.fish strong + em > strong {
  line-height: 1.65; /* Высота строки равна высоте делений */
  float: left;
  position: relative;
  width: calc((100% * 1) / 17);
  height: 100%;
  margin-right: 3px; /* отступ между делениями, желательно равный padding у  Прогресс бара */
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.fish strong + em > a.b-link:last-child,
.fish strong + em > strong:last-child {
  margin-right: 0;
}

/* Прогресс бар - заполненные деления-ссылки */
.fish strong + em > a.b-link,
.fish strong + em > a.b-link:not(:first-child) {
  cursor: pointer;
  color: #acb1b4!important;
}
.fish strong + em > a.b-link:hover,
.fish strong + em > a.b-link:not(:first-child):hover {
  background-color: #363052;
  color: #c8cfd5!important;
}
/* Прогресс бар - пустые деления */
.fish strong + em > strong {
  background: #3f4244;
  font-size: 0;
}

.fish strong + em > strong:after,
.fish strong + em > a.b-link:not(:first-child):after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  margin: auto 0;   
  transform: rotate(45deg);
  transition: 0.3s;
  outline: 4px solid
}
.fish strong + em > strong:after {
  background: inherit;
  outline-color: #171717;
}
.fish strong + em > a.b-link:not(:first-child):after {
  outline-color: #171717;
}

.fish strong + em > a.b-link:last-of-type + strong:after,
.fish strong + em > a.b-link:not(:first-child):after,
.fish strong + em > a.b-link {
  background-color: #232323;
}
.fish strong + em > a.b-link:hover + a.b-link:after,
.fish strong + em > a.b-link:last-of-type:hover + strong:after {
  background-color: #363052;
}

/* Всплывающие подсказки */
.fish strong + em > a.b-link u,
.fish strong + em > a.b-link > del {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  left: -1000%;
  right: -1000%;
  bottom: 0;
  width: 150px;
  padding: 5px;
  margin: auto;
  background-color: #222021;
  box-shadow: 0 2px 4px #0000003d;
  color: #bbb;
  font-size: 14px;
  border-radius: 0.25rem;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
/* Всплывающие подсказки - появление */

.fish strong + em > a.b-link:hover > del,
.fish strong + em > a.b-link:hover > u {
  opacity: 1;
  transition: 0.3s;
  z-index: 100;
}
.fish strong + em > a.b-link:hover > del {
  bottom: -46px;
}
.fish strong + em > a.b-link:hover > u {
  bottom: 36px;
}
/* Прогресс бар - Clearfix */
.fish strong + em:after {
  content: "";
  display: block;
  clear: both;
}

/* Всплывающие подсказки - первая подсказка липнет к левому краю */
.fish strong + em > a.b-link:first-child > u,
.fish strong + em > a.b-link:first-child > del {
  left: 0;
  right: auto;
}
/* Всплывающие подсказки - последняя подсказка липнет к правому краю */
.fish strong + em > a.b-link:last-child > u,
.fish strong + em > a.b-link:last-child > del {
  right: 0;
  left: auto;
}
.fish strong + em > a.b-link:not(:first-child) {
  padding-left: 1rem;
}
.fish strong + em > a.b-link:nth-child(1),
.fish strong + em > strong:nth-child(1) {
  z-index: 20;
  border-radius: 2rem 0 0 2rem;
}
.fish strong + em > a.b-link:nth-child(2),
.fish strong + em > strong:nth-child(2) {
  z-index: 19;
}
.fish strong + em > a.b-link:nth-child(3),
.fish strong + em > strong:nth-child(3) {
  z-index: 18;
}
.fish strong + em > a.b-link:nth-child(4),
.fish strong + em > strong:nth-child(4) {
  z-index: 17;
}
.fish strong + em > a.b-link:nth-child(5),
.fish strong + em > strong:nth-child(5) {
  z-index: 16;
}
.fish strong + em > a.b-link:nth-child(6),
.fish strong + em > strong:nth-child(6) {
  z-index: 15;
}
.fish strong + em > a.b-link:nth-child(7),
.fish strong + em > strong:nth-child(7) {
  z-index: 14;
}
.fish strong + em > a.b-link:nth-child(8),
.fish strong + em > strong:nth-child(8) {
  z-index: 13;
}
.fish strong + em > a.b-link:nth-child(9),
.fish strong + em > strong:nth-child(9) {
  z-index: 12;
}
.fish strong + em > a.b-link:nth-child(10),
.fish strong + em > strong:nth-child(10) {
  z-index: 11;
}
.fish strong + em > a.b-link:nth-child(11),
.fish strong + em > strong:nth-child(11) {
  z-index: 10;
}
.fish strong + em > a.b-link:nth-child(12),
.fish strong + em > strong:nth-child(12) {
  z-index: 9;
}
.fish strong + em > a.b-link:nth-child(13),
.fish strong + em > strong:nth-child(13) {
  z-index: 8;
}
.fish strong + em > a.b-link:nth-child(14),
.fish strong + em > strong:nth-child(14) {
  z-index: 7;
}
.fish strong + em > a.b-link:nth-child(15),
.fish strong + em > strong:nth-child(15) {
  z-index: 6;
}
.fish strong + em > a.b-link:nth-child(16),
.fish strong + em > strong:nth-child(16) {
  z-index: 5;
}
.fish strong + em > a.b-link:nth-child(17),
.fish strong + em > strong:nth-child(17) {
  z-index: 4;
}
.fish strong + em > a.b-link:nth-child(18),
.fish strong + em > strong:nth-child(18) {
  z-index: 3;
}
.fish strong + em > a.b-link:nth-child(19),
.fish strong + em > strong:nth-child(19) {
  z-index: 2;
}
.fish strong + em > a.b-link:nth-child(20),
.fish strong + em > strong:nth-child(20) {
  z-index: 1;
}
.fish strong + em > a.b-link:last-child,
.fish strong + em > strong:last-child {
  margin-right: 0;
  border-radius: 0 2rem 2rem 0;
}
/*** Конец Прогресс бара ***/
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode