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

Всегда в теме

Статистика


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


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

Рекомендуем



Главная » 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 | Просмотров: 1194 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

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

    Категории

    Заходи не жди