Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






CSS3 навигационное анимированное меню



Как вы уже, наверное, слышали что, CSS3 анимации представляют собой мощный инструмент, который позволяет создавать анимацию,которые способны работать без необходимости применения дополнительных сценариев на странице. Что еще лучше, в следующем поколении браузеров, мы будем иметь еще более мощные средства, в том числе и 3D преобразования (уже есть в Safari). создание сайтов Москва, продвижение, сопровождение и поисковая оптимизация в Москве и Московской области.

Но какая разница, для нас сегодня? В настоящее время только три браузеры дают вам возможность оживить CSS свойства - Chrome, Safari и Opera, которые в совокупности занимают лишь небольшую часть рынка браузеров. Firefox, как ожидается, вскоре присоединится к клубу, а также с предстоящим выпуском IE9, вдруг имеет смысл начать использовать эту технику.

Таким образом, сегодня мы делаем что-то практическое - простое CSS3 анимированное меню, которое теряет свою изящность в старых браузерах. В целом, это для работы со следующим поколением браузеров.

Итак, пример разрабатываемого меню на CSS3 и исходники.

Шаг 1 - XHTML

Меню организовано в виде неупорядоченного списка. Это наиболее удобная структура для меню, так как она обеспечивает простой способ стиля ссылок меню и семантически правильно.

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>
 
    <li>
        <a class="about" href="#">
            <span>About</span>
        </a>
    </li>
 
    <li>
         <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>
 
    <li>
        <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>
 
    <li>
        <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

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

Шаг 2 - CSS

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

styles.css - Часть 1

*{
	margin:0;
	padding:0;
}

body{
	font-size:14px;
	color:#666;
	background:#111 no-repeat;

	/* CSS3 градиенты */
	background-image:-moz-radial-gradient(
	    center -100px 45deg, circle farthest-corner,
	    #444 150px, #111 300px);
	background-image:-webkit-gradient(radial, 50% 0,
	    150, 50% 0, 300, from(#444), to(#111));

	font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
	list-style:none;
	height:39px;
	padding:2px;
	width:40px;
}

Для стиля body, я поставил цвет фона, который выступает в качестве запасного варианта, а затем добавили два CSS3 градиенты (для Firefox и Chrome / Safari). Если браузер посетителя не поддерживает градиенты, он просто будет игнорировать правила и идти с чистым цветом фона.

Вы можете увидеть в стилях, что большинству правил предшествует идентификатор маркированного списка - # navigationMenu. Это делается для предотвращения столкновений с остальными стилями страницы, если включать в меню на вашем сайте.

styles.css - Часть 2

#navigationMenu span{
	/* Основные свойства */
	width:0;
	left:38px;
	padding:0;
	position:absolute;
	overflow:hidden;

	/* Текстовые свойства */
	font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0.6px;
	white-space:nowrap;
	line-height:39px;

	/* CSS3 переходный период: */
	-webkit-transition: 0.25s;

	/* Будущие проверки (они не работают): */
	-moz-transition: 0.25s;
	transition: 0.25s;
}

#navigationMenu a{
	/* Фон спрайта: */
	background:url('img/navigation.jpg') no-repeat;

	height:39px;
	width:38px;
	display:block;
	position:relative;
}

/* Стили при наведении */

#navigationMenu a:hover span{ 
    width:auto; padding:0 20px;
    overflow:visible; }

#navigationMenu a:hover{
	text-decoration:none;

	/* CSS внешнего свечения с тенями */
	-moz-box-shadow:0 0 5px #9ddff5;
	-webkit-box-shadow:0 0 5px #9ddff5;
	box-shadow:0 0 5px #9ddff5;
}

CSS3, собственно переход действительно мощный. Он позволяет оживить изменения, которые происходят на элементе, когда псевдо свойства вступили в силу. Например здесь, когда пользователь перемещает мышь по навигации: псевдо-собственность вступает в силу с указаным параметром, который обычно скрыт. Без определения перехода это изменение происходит мгновенно. Но с переходом мы можем оживить его.

Здесь мы говорим браузеру, что продолжительность анимации 250 миллисекунд. По желанию можно указать перечень конкретных объектов, подлежащих анимации, а не все. Переходы в настоящее время поддерживается только браузерами, основанных на WebKit (Safari и Chrome), но в следующей версии Firefox ожидается такое же повидение.

styles.css - Часть 3

/* Зеленая кнопка */

#navigationMenu .home {
    background-position:0 0;}
#navigationMenu .home:hover {
    background-position:0 -39px;}
#navigationMenu .home span{
	background-color:#7da315;
	color:#3d4f0c;
	text-shadow:1px 1px 0 #99bf31;
}


/* Синяя кнопка */

#navigationMenu .about { 
    background-position:-38px 0;}
#navigationMenu .about:hover { 
    background-position:-38px -39px;}
#navigationMenu .about span{
	background-color:#1e8bb4;
	color:#223a44;
	text-shadow:1px 1px 0 #44a8d0;
}


/* Оранжевая кнопка */

#navigationMenu .services {
    background-position:-76px 0;}
#navigationMenu .services:hover {
    background-position:-76px -39px;}
#navigationMenu .services span{
	background-color:#c86c1f;
	color:#5a3517;
	text-shadow:1px 1px 0 #d28344;
}


/* Желтая кнопка */

#navigationMenu .portfolio {
    background-position:-114px 0;}
#navigationMenu .portfolio:hover{
    background-position:-114px -39px;}
#navigationMenu .portfolio span{
	background-color:#d0a525;
	color:#604e18;
	text-shadow:1px 1px 0 #d8b54b;
}

#navigationMenu .contact {
    background-position:-152px 0;}
#navigationMenu .contact:hover {
    background-position:-152px -39px;}
#navigationMenu .contact span{
	background-color:#af1e83;
	color:#460f35;
	text-shadow:1px 1px 0 #d244a6;
}

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



Больше информации читайте по теме:



Оценить статью:

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

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок