ПРОДАЮЩАЯ СТРАНИЦА

«Продающая страница» — в большинстве случаев, это одностраничный сайт в сети Интернет, …

ИНТЕРНЕТ МАГАЗИН

Интернет-магазин – популярная альтернатива обычным магазинам, позволяющая пользователю …

БИЗНЕС САЙТ

Бизнес-сайт служит для представления информации о Вашем бизнесе в сети Интернет. …

САЙТ ВИЗИТКА

Сайт-визитка - это не всегда маленький сайт. Сайт-визитка, вопреки сложившемуся мнению, …

ПЕРСОНАЛЬНЫЙ САЙТ

Персональный сайт — это сайт, который создан для конкретного человека или про …

CSS  Эффект смены страниц

CSS Эффект смены страниц

Интересный эффект смены страниц, при переходе от одного раздела к другому. Основной стиль для страницы освещать не буду, он доступен в архиве для скачивания (скачать архив могут только зарегистрированные пользователи). HTML код выкладываю только одного раздела, таких разделов может сколько угодно быть. В нашем случае это, Домашняя страница, Портфолио, О Нас, Контакты.

HTML :

Это будет домашняя страница.


		

Домашняя страница

Равным образом ......

Задача организации, в особенности же рамки ....


Далее блок "Портфолио". На этой странице мы будем использовать картинки в качестве ссылок. C помощью class="content" будем присваивать стиль нашим блокам, id="portfolio" будем использовать в качестве якоря. class="panel", для создания эффекта.

		

Портфолио


Далее формируем блок "О Нас", всё тоже самое как и блок выше только id="about" и не забываем про class="panel". Блок "Контакты" по той же схеме, но id="contact" и class="panel".
Формируем меню навигации.

		

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

CSS:
html, body {
	height:100%;
}
body {
	width: 100%;
	background: #ffcb00;
	overflow: hidden; 
}
/*Навигация*/
#header{
	position: absolute;
	z-index: 2000;
	width: 235px;
	top: 50px;
}
#navigation {              /*Стиль для списка */
	margin-top: 20px;
	width: 235px;
	display:block;
	list-style:none;
	z-index:3;
}
#navigation a{        /*Стиль для ссылок в списке*/
	color: #444;
	display: block;
	background: #fff;
	background: rgba(255,255,255,0.9);
	line-height: 50px;
	padding: 0px 20px;
	text-transform: uppercase;
	margin-bottom: 6px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	font-size: 14px;
}
#navigation a:hover {         /*Псевдо класс для ссылок списка (эффект при наведении курсора)*/
	background: #ddd;
}
.panel{                     /*Эфект скользящей панели*/
	min-width: 100%;
	height: 98%;
	overflow-y: auto;
	overflow-x: hidden;
	margin-top: -150%;
	position: absolute;
	background: #000;
	box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
	z-index: 2;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
.panel:target{
	margin-top: 0%;
	background-color: #FF0000;
}

#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
	background: #000;
	color: #fff;
}


Результат можно посмотреть здесь. Пример использования


←  Вернуться в категорию  « CSS » 

 
Текст сообщения*

Защита от автоматических сообщений