Есть одна дизайн студия, с непонятным названием The Design Canopy, у них очень интересно оформлена навигация. Сейчас мы постараемся написать такую-же с помощью css.
Так как это навигация, следовательно она должна быть кликабельна и состоять из количества ссылок. Так-же, следует заметить, что надпись на одной кнопке состоит из двух шрифтов каждый из которых имеет свой размер. Пожалуй, начнем:
Первым делом нужно определить ширину и падинг ссылки дабы воссоздать удобную кликабельную зону и, конечно-же, красивый — приятный глазу — фон. Определение span'a как блок, поможет нам избежать всяких ненужных <br />'ов. Вот так выглядит конечный результат:
[Пример]
Так как это навигация, следовательно она должна быть кликабельна и состоять из количества ссылок. Так-же, следует заметить, что надпись на одной кнопке состоит из двух шрифтов каждый из которых имеет свой размер. Пожалуй, начнем:
<a href="#"><span>Section One</span>Semantics</a>
<a href="#"><span>Section Two</span>Semantics</a>
<a href="#"><span>Section Three</span>Semantics</a>
<a href="#"><span>Section Four</span>Semantics</a>Первым делом нужно определить ширину и падинг ссылки дабы воссоздать удобную кликабельную зону и, конечно-же, красивый — приятный глазу — фон. Определение span'a как блок, поможет нам избежать всяких ненужных <br />'ов. Вот так выглядит конечный результат:
a {
text-transform: uppercase;
font-size: 2.5em;
font-weight: bold;
letter-spacing: -1px;
color: red;
display: block;
padding: 0.5em;
float: left;
width: 8em;
text-decoration: none;
line-height: 0.5em;
}
a span {
color: #666;
display: block;
font-size: 50%;
letter-spacing: 0;
margin-bottom: 0.3em;
}
a:hover {
background-color: #fffea4;
}[Пример]