02 сен 2015
Превью новостей в виде кнопок с помощью CSS3
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Превью новостей в виде кнопок с помощью CSS3

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Превью новостей в виде кнопок с помощью CSS3


Иногда на сайте необходимо отобразить фрагмент новости, чтобы заинтересовать посетителя прочесть ее. Обычно такую информацию подают в виде блоков, которые расположены под прочитанной новостью или в сайдбаре, но в данном уроке мы рассмотрим немного иной подход к поставленной задаче, мы отобразить превью новости на кнопках, главной особенностью будет то, что текст будет прокручиваться, что привлечет внимание посетителя, так как кнопка будет "живая". Давайте посмотрим, что же у нас с этого получилось.



По умолчанию мы будем использовать четыре цветовые кнопки, которые будут расположены друг под другом, каждая из которых будет отображать заданный нами текст, слева на кнопке будет дополнительная кнопка, которая будет предлагать прочесть запись, а остальная часть будет занята текстовой информацией.

Шаг 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 }


Такое решение может сэкономить вам множество места на сайте, при этом проинформировав пользователя, что на вашем ресурсе есть еще много интересной информации которую не стоит упускать.

Вот и все. Готово!

Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.