ФорумПрограммированиеПыхнуть хотите?Готовые решения → -webkit-scrollbar

-webkit-scrollbar

  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 14 февраля 2012 г. 1:45

    давно хотел выдернуть из гуглопочты скроллбар, сегодня заметил такой же на html5rock и вспомнил))
    демку и код выкладываю:
    ::-webkit-scrollbar { width:16px; height:16px; }
    ::-webkit-scrollbar-button { width:0; height:0; display:none; }
    ::-webkit-scrollbar-corner { background-color:transparent; }
    ::-webkit-scrollbar-track:vertical { border-left:6px solid transparent; border-right:1px solid transparent; background-clip:padding-box; }
    ::-webkit-scrollbar-track:horizontal { border-top:6px solid transparent; border-bottom:1px solid transparent; background-clip:padding-box; }
    ::-webkit-scrollbar-track:vertical:hover { background-color:rgba(0,0,0,0.035); -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.14),inset -1px -1px 0 rgba(0,0,0,0.07); }
    ::-webkit-scrollbar-track:horizontal:hover { background-color:rgba(0,0,0,0.035); -webkit-box-shadow:inset -1px 1px 0 rgba(0,0,0,0.14),inset 1px -1px 0 rgba(0,0,0,0.07); }
    ::-webkit-scrollbar-track:vertical:active { background-color:rgba(0,0,0,0.05); -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.14),inset -1px -1px 0 rgba(0,0,0,0.07); }
    ::-webkit-scrollbar-track:horizontal:active { background-color:rgba(0,0,0,0.05); -webkit-box-shadow:inset -1px 1px 0 rgba(0,0,0,0.14),inset 1px -1px 0 rgba(0,0,0,0.07); }
    ::-webkit-scrollbar-thumb:vertical { background-clip:padding-box; border-top:0 solid transparent; border-bottom:0 solid transparent; border-left:6px solid transparent; border-right:1px solid transparent; min-height:28px; }
    ::-webkit-scrollbar-thumb:horizontal { background-clip:padding-box; border-top:6px solid transparent; border-bottom:1px solid transparent; border-left:0 solid transparent; border-right:0 solid transparent; min-width:28px; }
    ::-webkit-scrollbar-thumb { background-color:rgba(0,0,0,0.2); -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }
    ::-webkit-scrollbar-thumb:hover { background-color:rgba(0,0,0,0.4); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.25); }
    ::-webkit-scrollbar-thumb:vertical:hover { background-color:rgba(0,0,0,0.4); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.25); }
    ::-webkit-scrollbar-thumb:vertical:active { background-color:rgba(0,0,0,0.5); -webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35); }
    ::-webkit-scrollbar-thumb:horizontal:hover { background-color:rgba(0,0,0,0.4); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.25); }
    ::-webkit-scrollbar-thumb:horizontal:active { background-color:rgba(0,0,0,0.5); -webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35); }

    ессессно пашет только в вэбкитах))
    Высокоуровневое абстрактное говно

Пожалуйста, авторизуйтесь, чтобы написать комментарий!