Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



Главная » 2013 » Декабрь » 30 » Оформление навигации в стиле Mac OSX

19:39
Оформление навигации в стиле Mac OSX

Оформление навигации в стиле Mac OSX

 

 

Мы собираемся использовать CSS анимацию для достижения цели, которая будет требовать ключевых кадров. В HTML ниже устанавливает 7 div, которые 5 из них папки, 1 кнопка и основная папка, которая вмещает в себя  другие папки. Все 7 div имеют значок папки и некоторый текст, 6 из них, имеют  ссылку  навигации.

СМОТРЕТЬ DEMO                                  СКАЧАТЬ ИСХОДНИК

 

 

<div id="position">

 <!-- Unnecessary, just some positioning. You can change this -->

<div id="folder">

 <!-- The folder, the main holder -->

<div id="item"><!-- An individual item, labelled 'item' -->

 <a href="http://www.inserthtml.com/2011/09/css3-3d-transforms-keyframes/"> <!-- The link -->

 <img src="folder.png" alt="" /> <!-- The image you want to use, we're using folders like a dock might have! -->

 Make a Flip Card in CSS <!-- The text beside the image -->

 </a></div>

<div id="item"><!-- Repeat! -->

 <a href="http://www.inserthtml.com/2011/08/making-website-fit-screen/">

 <img src="folder.png" alt="" />

 Make Your Website Fit any Screen

 </a></div>

<div id="item"><a href="http://www.inserthtml.com/2011/08/3d-parallax-trend/">

 <img src="applications.png" alt="" />

 The 3D Parallax Effect

 </a></div>

<div id="item"><a href="http://www.inserthtml.com/2011/08/insanely-html5/">

 <img src="folder.png" alt="" />

 New Stuff in HTML5 and CSS3

 </a></div>

<div id="item"><a href="http://www.inserthtml.com/2011/08/jquery-parallax-scroll/">

 <img src="folder.png" alt="" />

 3D Parallax Scroll in jQuery

 </a></div>

<div id="more"><!-- An icon, similar to before denoting a 'more' button -->

 <a href="http://www.inserthtml.com/">

 <img src="more.png" alt="" />

 83 More In Finder

 </a></div>

<div id="folder-icon"><!-- The folder which holds everything else, covering it up when its not hovered over. -->

 <img src="folder.png" alt="" />

 Hover Over Me!</div>

</div>

 

А вот и изображения которые я использовал  для этого. Вы их найдете в файлах исходника.


 

 

CSS

Прежде всего, я установить базовую позицию нашего объекта и фона. Если вы хотите использовать это на своей веб-странице, вы можете очень легко перемещать его, изменяя положение в # position классе.

 

<style type="text/css">

 

body {

    background: url("lion.jpg");

    overflow-x: hidden;

}

 

/* You will have to move the fan down manually (about 500px)

because of the position absolute, and I didn't

want  to  use Javascript.   However  the other

stuff can   be  changed   to  your liking,  as

regards positioning */

 

#position {

    position: relative;

    top: 470px;

    left: 100px;

    width: 500px;

    margin: 0px auto;

}

 

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

 

/* Some simple CSS */

    

#folder:hover a {

    opacity: 1;

}

    

#folder-icon {

    position: relative; z-index: 5;

    padding: 15px 0 0 0;

}

#folder {

    display: inline-block;

    width: 270px;

}

    

#item, #more {

    display: inline-block;

    position: absolute;

    bottom: 0;

    left: 0;

    height: 48px;

}

    

#item {

    padding: 5px 20px 40px 0px;

}

    

#more {

    padding: 0 0 45px 10px !important;

}

    

a {

    text-decoration: none;

    opacity: 0;

}

 

 

/* This is to make the wording beside the icons nice */

#folder div span {

    position: relative;

    bottom: 17px;

    border: 2px solid rgba(0,0,0,0);

    left: 15px;

    color: #fff;

    background: rgba(0,0,0,0.5);

    border-radius: 15px;

    padding: 4px 8px;

    font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;

    text-shadow: 0px 2px 2px rgba(0,0,0,0.1);

    font-weight: bold;

}

    

 

/* Just some tidying up and hover effects */

a:hover > span {

    border: 2px solid #fff !important;

}

 

#more span {

    bottom: 40px !important;

    left: -5px !important;

}

    

#folder-icon span {

    opacity: 1 !important;

    bottom: 5px;

}

 

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

 

/* The float animation, excuse the odd numbers, mostly trial and error (Multiples for each browser) */

    @-webkit-keyframes item-1 { 100% { bottom: 67px; opacity: 1; -webkit-transform: rotate(1deg); } }

    @-webkit-keyframes item-2 { 100% { bottom: 137px; left: 5px; opacity: 1; -webkit-transform: rotate(3deg); } }

    @-webkit-keyframes item-3 { 100% { bottom: 205px; left: 12px; opacity: 1; -webkit-transform: rotate(5deg); } }

    @-webkit-keyframes item-4 { 100% { bottom: 273px; left: 22px; opacity: 1; -webkit-transform: rotate(7deg); } }

    @-webkit-keyframes item-5 { 100% { bottom: 340px; left: 37px; opacity: 1; -webkit-transform: rotate(9deg); } }

    @-webkit-keyframes item-6 { 100% { bottom: 427px; left: 42px; opacity: 1; -webkit-transform: rotate(11deg); } }

        

    /* Ugh, if only one property could be used! */

    @-ms-keyframes item-1 { 100% { bottom: 67px; left: 8px; opacity: 1; -ms-transform: rotate(1deg); } }

    @-ms-keyframes item-2 { 100% { bottom: 137px; left: 5px; opacity: 1; -ms-transform: rotate(3deg); } }

    @-ms-keyframes item-3 { 100% { bottom: 205px; left: 12px; opacity: 1; -ms-transform: rotate(5deg); } }

    @-ms-keyframes item-4 { 100% { bottom: 273px; left: 22px; opacity: 1; -ms-transform: rotate(7deg); } }

    @-ms-keyframes item-5 { 100% { bottom: 340px; left: 37px; opacity: 1; -ms-transform: rotate(9deg); } }

    @-ms-keyframes item-6 { 100% { bottom: 427px; left: 42px; opacity: 1; -ms-transform: rotate(11deg); } }

        

    

    @-moz-keyframes item-1 { 100% { bottom: 67px; left: 8px; opacity: 1; -moz-transform: rotate(1deg); } }

    @-moz-keyframes item-2 { 100% { bottom: 137px; left: 5px; opacity: 1; -moz-transform: rotate(3deg); } }

    @-moz-keyframes item-3 { 100% { bottom: 205px; left: 12px; opacity: 1; -moz-transform: rotate(5deg); } }

    @-moz-keyframes item-4 { 100% { bottom: 273px; left: 22px; opacity: 1; -moz-transform: rotate(7deg); } }

    @-moz-keyframes item-5 { 100% { bottom: 340px; left: 37px; opacity: 1; -moz-transform: rotate(9deg); } }

    @-moz-keyframes item-6 { 100% { bottom: 427px; left: 42px; opacity: 1; -moz-transform: rotate(11deg); } }

    

    /* Initiate the animations */

    #folder:hover > div:nth-of-type(1) {

        -webkit-animation: item-1 0.5s forwards;

        -ms-animation: item-1 0.5s forwards;

        -moz-animation: item-1 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(2) {

        -webkit-animation: item-2 0.5s forwards;

        -ms-animation: item-2 0.5s forwards;

        -moz-animation: item-2 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(3) {

        -webkit-animation: item-3 0.5s forwards;

        -ms-animation: item-3 0.5s forwards;

        -moz-animation: item-3 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(4) {

        -webkit-animation: item-4 0.5s forwards;

        -ms-animation: item-4 0.5s forwards;

        -moz-animation: item-4 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(5) {

        -webkit-animation: item-5 0.5s forwards;

        -ms-animation: item-5 0.5s forwards;

        -moz-animation: item-5 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(6) {

        -webkit-animation: item-6 0.5s forwards;

        -ms-animation: item-6 0.5s forwards;

        -moz-animation: item-6 0.5s forwards;

    }

 

</style>

 

Здесь очень  много кода, но это из-за несовместимости браузеров. В будущем, когда анимация полностью будет поддерживаться, мы сможем сократить этот код  на две трети. Все, что вам нужно знать, что анимация работает путем перемещения див  на определенную величину.  Непрозрачность установлена  в 1, потому что в противном случае мы в конечном итоге мы имели бы дело  с кучей неприглядных папок (и текста!)  плавающими  друг над другом.

 

СМОТРЕТЬ DEMO                                  СКАЧАТЬ ИСХОДНИК

 

Источник

Категория: CSS//HTML//JS | Просмотров: 1759 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.