Кодинг
★ Рубрика: Кодинг
★ Тема: CSS3

Вертикальная шкала времени (time line)

Вертикальная шкала времени (time line). Шкала адаптируется, если ширина для отображения меньше установленной. Активное сообщение для конкретной даты можно включить.
  • 15.09.2015

    Описание первого события. Можно включить описание для любой даты.

  • 17.09.2015

    Описание второго события

  • 19.09.2015

    Описание третьего события.

  • 20.09.2015

    Описание события

Теперь приведем стиль для шкалы:
/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */
/* -------------------------------------
 * General Style
 * ------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

/* -------------------------------------
 * timeline
 * ------------------------------------- */
#timeline {
 list-style: none;
 margin: 50px 0 30px 120px;
 padding-left: 30px;
 border-left: 8px solid #e8e8e8;
}
#timeline li {
 margin: 40px 0;
 position: relative;
}
#timeline p {
 margin: 0 0 15px;
}

.date {
 margin-top: -10px;
 top: 50%;
 left: -158px;
 font-size: 0.95em;
 line-height: 20px;
 position: absolute;
}

.circle {
 margin-top: -10px;
 top: 50%;
 left: -44px;
 width: 10px;
 height: 10px;
 background: #08adda;
 border: 5px solid #e8e8e8;
 border-radius: 50%;
 display: block;
 position: absolute;
}

.content {
 max-height: 20px;
 padding: 50px 20px 0;
 border-color: transparent;
 border-width: 2px;
 border-style: solid;
 border-radius: 0.5em;
 position: relative;
}
.content:before, .content:after {
 content: "";
 width: 0;
 height: 0;
 border: solid transparent;
 position: absolute;
 pointer-events: none;
 right: 100%;
}
.content:before {
 border-right-color: inherit;
 border-width: 20px;
 top: 50%;
 margin-top: -20px;
}
.content:after {
 border-right-color: #fff;
 border-width: 17px;
 top: 50%;
 margin-top: -17px;
}
.content p {
 max-height: 0;
 color: transparent;
 text-align: justify;
 word-break: break-word;
 hyphens: auto;
 overflow: hidden;
}

label {
 font-size: 1.3em;
 position: absolute;
 z-index: 100;
 cursor: pointer;
 top: 20px;
 transition: transform 0.2s linear;
}

.radio {
 display: none;
}

.radio:checked + .relative label {
 cursor: auto;
 transform: translateX(42px);
}
.radio:checked + .relative .circle {
 background: #08adda;
}
.radio:checked ~ .content {
 max-height: 180px;
 border-color: #08adda;
 margin-right: 20px;
 transform: translateX(20px);
 transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
 max-height: 200px;
 color: #9c9c9c;
 transition: color 0.3s linear 0.3s;
}

/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */
@media screen and (max-width: 767px) {
 #timeline {
 margin-left: 0;
 padding-left: 0;
 border-left: none;
 }
 #timeline li {
 margin: 50px 0;
 }

 label {
 width: 85%;
 font-size: 1.1em;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 display: block;
 transform: translateX(18px);
 }

 .content {
 padding-top: 45px;
 border-color: #e8e8e8;
 }
 .content:before, .content:after {
 border: solid transparent;
 bottom: 100%;
 }
 .content:before {
 border-bottom-color: inherit;
 border-width: 17px;
 top: -16px;
 left: 50px;
 margin-left: -17px;
 }
 .content:after {
 border-bottom-color: transparent;
 border-width: 20px;
 top: -20px;
 left: 50px;
 margin-left: -20px;
 }
 .content p {
 font-size: 0.9em;
 line-height: 1.4;
 }

 .circle, .date {
 display: none;
 }
}
И контейнер:

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]