[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Полезное от ACT-CS » Скрипты » Меню в стиле iOS
Меню в стиле iOS
SpecnazДата: Пятница, 27.07.2012, 01:04 | Сообщение # 1
  • Сообщения: 46
  • Награды: 2





  •  

    Этот сниппет выполнен в стиле iOS, в него входят: блок тултипа, круглые checkbox и стили при наведении. iOS стиль Checkbox – это красивое оформление checkbox на CSS3. Картинка используется только для галочки. В самом коде никакого «чекбокса» нет, это только пример оформления, но никак ни рабочая версия.

    Проверено в Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8.

    Установка:

    1 шаг. Это ставим в Нужное место:
    Code
    <div class="popover">  
    <ul>  
    <li class="active"><a href="/">Закладки</a></li>  
    <li class="active"><a href="/">Пароли</a></li>  
    <li><a href="/">Избранное</a></li>  
    <li><a href="/">История</a></li>  
    </ul>  
    </div>


    2 шаг. Это ставим в CSS:
    Code
    .popover {  
    position: relative;  
    z-index: 10;  
    width: 200px;  
    padding: 5px;  
    border: 1px solid #000;  
    border-radius: 11px;  
    background-color: #606060;  
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606060), color-stop(100%, #4a4a4a));  
    background-image: -webkit-linear-gradient(top, #606060, #4a4a4a);  
    background-image: -moz-linear-gradient(top, #606060, #4a4a4a);  
    background-image: -ms-linear-gradient(top, #606060, #4a4a4a);  
    background-image: -o-linear-gradient(top, #606060, #4a4a4a);  
    background-image: linear-gradient(top, #606060, #4a4a4a);  
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);  
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);  
    }  
    .popover:before, .popover:after, .popover ul:before {  
    display: block;  
    content: '';  
    width: 0;  
    height: 0;  
    position: absolute;  
    z-index: 11;  
    left: 22px;  
    border: 7px outset transparent;  
    }  
    .popover:before {  
    border-bottom: 7px solid #000;  
    top: -14px;  
    }  
    .popover:after {  
    border-bottom: 7px solid #888;  
    top: -13px;  
    }  
    .popover ul:before {  
    z-index: 12;  
    border-bottom: 8px solid #666;  
    top: -12px;  
    }  
    .popover ul {  
    overflow: hidden;  
    background: #fff;  
    border: 1px solid #000;  
    border-radius: 7px;  
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);  
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);  
    }  
    .popover li {  
    display: block;  
    }  
    .popover li + li {  
    border-top: 1px solid #eee;  
    }  
    .popover li:first-child a {  
    border-radius: 7px 7px 0 0;  
    }  
    .popover li:last-child a {  
    border-radius: 0 0 7px 7px;  
    }  
    .popover a {  
    position: relative;  
    display: block;  
    line-height: 44px;  
    padding: 0 15px 0 48px;  
    color: #000;  
    font-size: 16px;  
    font-weight: bold;  
    }  
    .popover a:hover {  
    text-decoration: none;  
    background: #fff;  
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);  
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);  
    }  
    .popover a:before, .popover a:after {  
    position: absolute;  
    display: block;  
    content: '';  
    }  

    .popover a:before, .popover .active a:active:before {  
    height: 20px;  
    width: 20px;  
    top: 12px;  
    left: 14px;  
    border: 0;  
    border-radius: 11px;  
    background: #f7f7f7;  
    -webkit-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1);  
    box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1);  
    }  
    .popover a:after, .popover .active a:active:after {  
    display: none;  
    width: 11px;  
    height: 9px;  
    top: 18px;  
    left: 19px;  
    background: url("/img/tick.png") center center no-repeat;  
    }  
    .popover .active a:before, .popover a:active:before {  
    top: 11px;  
    left: 13px;  
    border: 1px solid #111;  
    background-color: #555555;  
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #404040));  
    background-image: -webkit-linear-gradient(top, #777777, #404040);  
    background-image: -moz-linear-gradient(top, #777777, #404040);  
    background-image: -ms-linear-gradient(top, #777777, #404040);  
    background-image: -o-linear-gradient(top, #777777, #404040);  
    background-image: linear-gradient(top, #777777, #404040);  
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);  
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);  
    }  
    .popover .active a:after, .popover a:active:after {  
    display: block;  
    }

    Архив прилогаеться:




     Бесплатный Гарант!!!

     
    Форум » Полезное от ACT-CS » Скрипты » Меню в стиле iOS
    Страница 1 из 11
    Поиск:

    Администрация ответственности за содержание материала не несет.
    Все файлы размещенные на нашем портале, принадлежат исключительно их владельцам.
    При копировании материала, ссылка на сайт обязательна!
    ACT-CS.ru 2012 - 2013 | Хостинг от uCoz | Карта сайта | Карта форума | Robots.txt | RSS