В данном уроке рассматривается создание временной шкалы на основе только CSS и HTML. Использование изображений сознательно избегается для организации чистой и простой разметки. Такая временная шкала может быть полезна в резюме проекта или специалиста для наглядного отражения развития во времени.
Что должно получиться в итоге?
У нас получится прекрасная шкала времени на основе CSS. Но что случится, если по каким-то причинам у посетителя сайта не будет доступен CSS? Так как мы используем неупорядоченный список, то события все еще будут выглядеть довольно привлекательно. Даты событий заключены в скобки, что придает им отличный вид, и их всегда можно спрятать с помощью свойства CSS display: none;. Вот пример нашего списка без применения стилей:
Графический дизайн и типографика (2007 - 2009)
Фотографирую (2006 - 2010)
Используют ООП в работах (2005 - 2010)
Занимаюсь веб дизайном (2004 - 2010)
Учился в школе (2004 - 2006)
Рисую иллюстрации к фэнтези (2003 - 2010)
Разметка
Используется неупорядоченный список. Все очень просто и ясно. Для такого решения используются строчные стили, что всячески порицается гуру веб дизайна. Дело в том, что если с помощью PHP или другого серверного языка формировать список для временной шкалы, то в скрипте можно рассчитать правильные значения ширины и положения каждого блока и установить значения свойств width и left в строчных стилях.
<div class="timeline">
<ul class="events">
<li style="width: 42.48%; left: 57.2%;">Графический дизайн итипографика <em>(2007 - 2009)</em></li>
<li style="width: 56.68%; left: 43%;">Фотографирую <em>(2006 - 2010)</em></li>
<li style="width: 71.3%; left: 28.4%;">Используют ООП в работах <em>(2005 - 2010)</em></li>
<li style="width: 85.5%; left: 14.2%;">Занимаюсь веб дизайном <em>(2004 - 2010)</em></li>
<li style="width: 42.75%; left: 0pt;">Учился в школе <em>(2004 - 2006)</em></li>
<li style="width: 99.5%; left: 0pt;">Рисую иллюстрации к фэнтези <em>(2003 - 2010)</em></li>
</ul><!-- .events -->
<ul class="intervals">
<li class="first"><em>2004</em></li>
<li><em>2005</em></li>
<li><em>2006</em></li>
<li><em>2007</em></li>
<li><em>2008</em></li>
<li><em>2009</em></li>
<li class="last"><em>2010</em></li>
</ul><!-- .intervals -->
</div>
CSS
CSS код такой же простой как и HTML. Используется свойство border-radius. Это свойство CSS3 и оно поддерживается еще не во всех браузерах.
ul.events {
list-style-type: none;
margin: 0;
padding: 0 0 20px 0;
}
ul.events li {
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
background: #eee;
border: 1px solid #ddd;
color: #707070;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 6px;
padding: 3px 0;
position: relative;
text-align: center;
}
ul.events li em {
color: #aaa;
font-weight: normal;
font-size: 0.9em;
}
ul.intervals {
list-style-type: none;
padding: 0;
display: block;
}
/* Ширина зависит от количества интервалов. Например, 100 / 7 = 14.29% -- затем вычитаем еще немного для окантовки */
ul.intervals li {
background: #fff url(/images/1x1_eee.gif) repeat-x left 10%;
border-right: 1px solid #ccc;
color: #999;
float: left;
font-size: 1.2em;
margin: 0;
padding: 15px 0;
text-align: center;
width: 14.17%;
}
ul.intervals li.first {
border-left: 1px solid #ccc;
}
Заключение
Довольно таки приличная временная шкала получилась с использованием только CSS и неупорядоченных списков. Конечно, решение не очень изящное, но оно доступно для всех пользователей ( в том числе и для тех, у кого отключен JavaScript).