| Offline
Дата: Суббота, 21.07.2012, 16:37 | Сообщение # 1 |
| Скриншот: http://s018.radikal.ru/i503/1207/6d/2e9ce29e526d.png Вот собственно ссылка на архив: http://rghost.ru/39335645 Описание скрипта: Этот превосходный сниппет выполнен в стиле 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) А этот code, вставляем в 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; } .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; }Добавлено (21.07.2012, 16:37) --------------------------------------------- Блин, косяк с пунктом установки №2)) А редактировать нельзя, это полнейший бред!((
[center][/center]
|
|
|
|