Рекламный блок на CSS3

Рекламный блок на CSS3

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Иногда требуется сделать не очень броский рекламный блок, без использования тяжелых скриптов, но с различными эффектами. Сегодняшний урок как раз посвящен решению такого вопроса. Мы не будем использовать сторонние скрипты, ну к примеру Mootools или jQuery. Нам потребуются всего лишь знания CSS3. С рассмотрения css мы и начнем урок:

В head области нашего сайта прописываем css-код

		.slide-up-boxes a {
			display: block;
			height: 130px;
			margin: 0 0 20px 0;
			background: rgba(215, 215, 215, 0.5);
			border: 1px solid #ccc;
			height: 65px;
			overflow: hidden;
		}

		.slide-up-boxes h5 {
			color: #333;
			text-align: center;
			height: 65px;
			font: italic 18px/65px Georgia, Serif;
			 opacity: 1;
			 -webkit-transition: all 0.2s linear;
			 -moz-transition: all 0.2s linear;
			 -o-transition: all 0.2s linear;
		}

		.slide-up-boxes a:hover h5 {
			margin-top: -65px;
			opacity: 0;
		}

		.slide-up-boxes div {
			position: relative;
			color: white;
			font: 12px/15px Georgia, Serif;
			height: 45px;
			padding: 10px;
			opacity: 0;
			-webkit-transform: rotate(6deg);
			-webkit-transition: all 0.4s linear;
			-moz-transform: rotate(6deg);
			-moz-transition: all 0.4s linear;
			-o-transform: rotate(6deg);
			-o-transition: all 0.4s linear;
		}
		.slide-up-boxes a:hover div {
			opacity: 1;
			-webkit-transform: rotate(0);
			-moz-transform: rotate(0);
			-o-transform: rotate(0);
		}
/* Здесь мы укажем пути к нашим изображениям в формате *.png, а также их размеры в px */
		.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }
		.slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/diw.png) 21px 10px no-repeat; padding-left: 90px; }
		.slide-up-boxes a:nth-child(3) div { background: #393838 url(images/qod.png) 14px 16px no-repeat; padding-left: 133px; }

Остальной код будет располагаться в body наше сайта. Выглядит он следующим образом:

Вставка рекламных блоков в тело документа

<section class="slide-up-boxes">

			<a href="http://ruvisio.ru">
				<h5>Где я работаю...</h5>
				<div>Wufoo представляет собой интернет-фирму, которая занимается строительством самых сложных форм.</div>
			</a>

			<a href="http://ruvisio.ru">
				<h5>Книга написанной мною в соавторстве ...</h5>
				<div>Копаться в WordPress это книга и блог в соавторстве с Джефом Старр, #1 в мире.</div>
			</a>

			<a href="http://ruvisio.ru">
				<h5>Words I collect...</h5>
				<div>Quotes on Design is a collection of design related quotes. With an API for your integration ideas!</div>
			</a>

		</section>

На этом мой небольшой урок закончен. Если вам понравилось, оставляйте свои комментарии и подписывайтесь на RSS-рассылку.

Информация о загрузках

Рекламный блок на CSS3 (13.0 KB, 24 скачиваний)
Файл залит 03.04.2011 в 17:46

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Добро пожаловать на ruVisio

Если вы еще не зарегистрированы, то желательно сделать это побыстрее :)

Авторизация

Забыли пароль?

Регистрация