Иногда на сайте необходимо отобразить фрагмент новости, чтобы заинтересовать посетителя прочесть ее. Обычно такую информацию подают в виде блоков, которые расположены под прочитанной новостью или в сайдбаре, но в данном уроке мы рассмотрим немного иной подход к поставленной задаче, мы отобразить превью новости на кнопках, главной особенностью будет то, что текст будет прокручиваться, что привлечет внимание посетителя, так как кнопка будет "живая". Давайте посмотрим, что же у нас с этого получилось.
По умолчанию мы будем использовать четыре цветовые кнопки, которые будут расположены друг под другом, каждая из которых будет отображать заданный нами текст, слева на кнопке будет дополнительная кнопка, которая будет предлагать прочесть запись, а остальная часть будет занята текстовой информацией.
Шаг 1. HTMLСтруктура достаточно простая, у нас будет неупорядоченный список, с классом цвета для каждой кнопки, для каждой кнопки будет свой класс с цветов, содержания контейнера будет текстовая информация которая отображается на кнопке.
<div class="news red">
<span>Дизайн</span>
<ul>
<li><a href="#">Создаем кнопки на CSS3</li>
<li><a href="#">Красивый слайдер для сайта</a></li>
<li><a href="#">"Хлебные крошки"- зачем они?</a></li>
<li><a href="#">Как создать меню сайта</a></li>
</ul>
</div>
У нас будет четыре таких кнопки, по этому мы дублируем параметры, изменяет только класс цвета, более детально разметку вы можете просмотреть в исходниках, а теперь давай перейдем к следующему шагу.
Шаг 2. CSSДля начала мы определим общие параметры контейнера, мы установим параметры для переворота текста, так, чтобы он изменялся другим, но при этом предыдущим текст уходил в не видимую часть кнопки.
body { background: #333; width: 100%; height: 100% }
.news {
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
width: 350px;
height: 30px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
padding: 3px;
-webkit-user-select: none
}
.news span {
float: left;
color: #fff;
padding: 6px;
position: relative;
top: 1%;
border-radius: 4px;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
cursor: pointer
}
.news ul {
float: left;
padding-left: 20px;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-webkit-user-select: none
}
.news ul li {line-height: 30px; list-style: none }
.news ul li a {
color: #fff;
text-decoration: none;
font: 14px Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none
}
.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }
Так как у нас четыре разных кнопки, мы добавили цвет и заливку для каждой кнопки, в результате у нас получились вот такие правила.
.blue { background: #347fd0 }
.blue span { background: #2c66be }
.red { background: #d23435 }
.red span { background: #c22b2c }
.green { background: #699B67 }
.green span { background: #547d52 }
.magenta { background: #b63ace }
.magenta span { background: #842696 }
Такое решение может сэкономить вам множество места на сайте, при этом проинформировав пользователя, что на вашем ресурсе есть еще много интересной информации которую не стоит упускать.
Вот и все. Готово!Скачивание файлов доступно только зарегистрированным пользователям