Автор

Создаем переходы для страниц при помощи CSS3

Создаем переходы для страниц при помощи CSS3


Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.

 

ДЕМО
ИСХОДНИКИ

 

HTML

HTML будет состоять из пяти основных секций: заголовок и содержание четырех разделов. Каждый из разделов содержания будет иметь свой ID и класс panel. Кроме того, мы добавим еще один раздел, который будет внутри основных четырех разделов, и будет иметь класс content. Первая секция с ID #home будет иметь только класс content, и не будет содержать дополнительный блок внутри:

<!-- Home -->
<div id="home" class="content">
 <h2>Home</h2>
 <p>Some content</p>
 <!-- ... -->
</div>
<!-- /Home -->
 
<!-- Portfolio -->
<div id="portfolio" class="panel">
 <div class="content">
 <h2>Portfolio</h2>
 <p>Some content</p>
 <!-- ... -->
 </div>
</div>
<!-- /Portfolio -->
 
<!-- About -->
<div id="about" class="panel">
 <div class="content">
 <h2>About</h2>
 <p>Some content</p>
 <!-- ... -->
 </div>
</div>
<!-- /About -->
 
<!-- Contact -->
<div id="contact" class="panel">
 <div class="content">
 <h2>Contact</h2>
 <p>Some content</p>
 <!-- ... -->
 </div>
</div>
<!-- /Contact -->

В секции #header у нас будет основной заголовок и навигация:

<!-- Header with Navigation -->
<div id="header">
 <h1>Page Transitions with CSS3</h1>
 <ul id="navigation">
 <li><a id="link-home" href="#home">Home</a></li>
 <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
 <li><a id="link-about" href="#about">About Me</a></li>
 <li><a id="link-contact" href="#contact">Contact</a></li>
 </ul>
</div>

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

CSS

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

#header{
 position: absolute;
 z-index: 2000;
 width: 235px;
 top: 50px;
}
#header h1{
 font-size: 30px;
 font-weight: 400;
 text-transform: uppercase;
 color: rgba(255,255,255,0.9);
 text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
 padding: 20px;
 background: #000;
}
#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;
}

Все разделы, кроме #home, имеют класс panel. Здесь мы будем использовать переход всякий раз, когда элемент c этим классом вызывается в меню. Трюк заключается в использовании отрицательного отступа в классе panel в "обычном" состоянии и отсутствии этого отступа у этого класса при использовании псевдо-класса :target. Переход создает эффект выезда страницы сверху:

.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: #ffcb00;
}

Далее зададим стили для класса content, который есть во всех наших секциях:

.content{
 right: 40px;
 left: 280px;
 top: 0px;
 position: absolute;
 padding-bottom: 30px;
}
.content h2{
 font-size: 110px;
 padding: 10px 0px 20px 0px;
 margin-top: 52px;
 color: #fff;
 color: rgba(255,255,255,0.9);
 text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
 font-size: 18px;
 padding: 10px;
 line-height: 24px;
 color: #fff;
 display: inline-block;
 background: black;
 padding: 10px;
 margin: 3px 0px;
}

Для того чтобы изменить цвет текущего элемента в навигации, мы будем использовать псевдо-класс :target с обобщенным родственным комбинатором (the general sibling selector), чтобы "найти" соответствующий пункт навигации:

#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;
}

Надеюсь, вам понравился этот урок и, возможно, вы также поэкспериментируете для создания собственных эффектов.

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Создаем переходы для страниц при помощи CSS3

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


Создаем переходы для страниц при помощи CSS3

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


Создаем переходы для страниц при помощи CSS3

Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.


Создаем переходы для страниц при помощи CSS3

Из многих CMS мной была выбрана бесплатная система управления сайтом DLE. Система очень гибкая и удобная для индивидуального дизайна, причем любой сложности. Единственным недостатком этой системы, это стандартная блочная система, а точнее все последующие страницы сайта одинаковые по формам, блокам, располагающихся справа или слева, и весь веб дизайн сайта расположен в одном файле,  тоесть в шаблоне дизайна.  

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close