Пульсирующий баннер группы

Пульсирующий баннер группы

  1. Next
    Совместимость с XenForo:
    • XenForo 1.2
    • XenForo 1.3
    • XenForo 1.4
    • XenForo 1.5
    Пример пульсирующего баннера для трех групп.

    Код устанавливается в EXTRA.css вашего стиля.
    После чего в выбранной вами группе, ставите галочку напротив "Другой, использующий своё имя CSS-класса:", где вы добавляете css-класс в таком виде:

    userBanner bannerModer - для модератора,
    userBanner banAdmin - для админа и т.д.


    Код:
    /* Пульсирующий баннер - Модер*/
    @-webkit-keyframes ModerPulse {
    from { background-color: #00b300; -webkit-box-shadow: 0 0 2px #000000; }
              50% { background-color: #00b300; -webkit-box-shadow: 0 0 8px 2px #00b300; }
              to { background-color: #00b300; -webkit-box-shadow: 0 0 2px #000000; }
            } /* ModerPulse - уникальное название */
    @-moz-keyframes ModerPulse {
    from { background-color: #00b300; -moz-box-shadow: 0 0 2px #000000; }
              50% { background-color: #00b300; -moz-box-shadow: 0 0 8px 2px #00b300; }
              to { background-color: #00b300; -moz-box-shadow: 0 0 2px #000000; }
            }
    @-o-keyframes ModerPulse {
    from { background-color: #00b300; -o-box-shadow: 0 0 2px #000000; }
              50% { background-color: #00b300; -o-box-shadow: 0 0 8px 2px #00b300; }
              to { background-color: #00b300; -o-box-shadow: 0 0 2px #000000; }
            }
    @keyframes ModerPulse {
    from { background-color: #00b300; box-shadow: 0 0 2px #000000; }
              50% { background-color: #00b300; box-shadow: 0 0 8px 2px #00b300; }
              to { background-color: #00b300; box-shadow: 0 0 2px #000000; }
            }
    .userBanner.bannerModer {
        color: #000000;
        font-size: 12px;
        text-align: center;
        margin: auto;
        border: none !important;
        background: transparent !important;
    }
    .userBanner.bannerModer {
        -webkit-animation-name: ModerPulse;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: ModerPulse;
        -moz-animation-duration: 1s;
        -moz-animation-iteration-count: infinite;
        -o-animation-name: ModerPulse;
        -o-animation-duration: 1s;
        -o-animation-iteration-count: infinite;
        animation-name: ModerPulse;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        background: none repeat scroll 0% 0% #c7ff2e !important;
    }
    .userBanner:hover .bannerModer {
          background: #8fc400 !important;
    }
    /* Конец пульсирующего баннера - Модер*/
    
    /* Пульсирующий баннер - главная по банам*/
    @-webkit-keyframes BanPulse {
    from { background-color: #bf3eff; -webkit-box-shadow: 0 0 2px #000000; }
              50% { background-color: #bf3eff; -webkit-box-shadow: 0 0 8px 2px #bf3eff; }
              to { background-color: #bf3eff; -webkit-box-shadow: 0 0 2px #000000; }
            }
    @-moz-keyframes BanPulse {
    from { background-color: #bf3eff; -moz-box-shadow: 0 0 2px #000000; }
              50% { background-color: #bf3eff; -moz-box-shadow: 0 0 8px 2px #bf3eff; }
              to { background-color: #bf3eff; -moz-box-shadow: 0 0 2px #000000; }
            }
    @-o-keyframes BanPulse {
    from { background-color: #bf3eff; -o-box-shadow: 0 0 2px #000000; }
              50% { background-color: #bf3eff; -o-box-shadow: 0 0 8px 2px #bf3eff; }
              to { background-color: #bf3eff; -o-box-shadow: 0 0 2px #000000; }
            }
    @keyframes BanPulse {
    from { background-color: #bf3eff; box-shadow: 0 0 2px #000000; }
              50% { background-color: #bf3eff; box-shadow: 0 0 8px 2px #bf3eff; }
              to { background-color: #bf3eff; box-shadow: 0 0 2px #000000; }
            }
    .userBanner.banModer {
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        margin: auto;
        border: none !important;
        background: transparent !important;
    }
    .userBanner.banModer {
        -webkit-animation-name: BanPulse;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: BanPulse;
        -moz-animation-duration: 1s;
        -moz-animation-iteration-count: infinite;
        -o-animation-name: BanPulse;
        -o-animation-duration: 1s;
        -o-animation-iteration-count: infinite;
        animation-name: BanPulse;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        background: none repeat scroll 0% 0% #c7ff2e !important;
    }
    .userBanner:hover .banModer {
          background: #8fc400 !important;
    }
    /* Конец пульсирующего баннера - главная по банам*/
    
    /* Пульсирующий баннер - Админ*/
    @-webkit-keyframes AdminPulse {
    from { background-color: #ff0000; -webkit-box-shadow: 0 0 2px #000000; }
              50% { background-color: #ff0000; -webkit-box-shadow: 0 0 8px 2px #ff0000; }
              to { background-color: #ff0000; -webkit-box-shadow: 0 0 2px #000000; }
            }
    @-moz-keyframes AdminPulse {
    from { background-color: #ff0000; -moz-box-shadow: 0 0 2px #000000; }
              50% { background-color: #ff0000; -moz-box-shadow: 0 0 8px 2px #ff0000; }
              to { background-color: #ff0000; -moz-box-shadow: 0 0 2px #000000; }
            }
    @-o-keyframes AdminPulse {
    from { background-color: #ff0000; -o-box-shadow: 0 0 2px #000000; }
              50% { background-color: #ff0000; -o-box-shadow: 0 0 8px 2px #ff0000; }
              to { background-color: #ff0000; -o-box-shadow: 0 0 2px #000000; }
            }
    @keyframes AdminPulse {
    from { background-color: #ff0000; box-shadow: 0 0 2px #000000; }
              50% { background-color: #ff0000; box-shadow: 0 0 8px 2px #ff0000; }
              to { background-color: #ff0000; box-shadow: 0 0 2px #000000; }
            }
    .userBanner.banAdmin {
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        margin: auto;
        border: none !important;
        background: transparent !important;
    }
    .userBanner.banAdmin {
        -webkit-animation-name: AdminPulse;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: AdminPulse;
        -moz-animation-duration: 1s;
        -moz-animation-iteration-count: infinite;
        -o-animation-name: AdminPulse;
        -o-animation-duration: 1s;
        -o-animation-iteration-count: infinite;
        animation-name: AdminPulse;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        background: none repeat scroll 0% 0% #c7ff2e !important;
    }
    .userBanner:hover .banAdmin {
          background: #8fc400 !important;
    }
    /* Конец пульсирующего баннера - Админ*/
    
    ModerPulse, BanPulse, AdminPulse - уникальные названия эффекта.
    .banAdmin, .banModer, .bannerModer - уникальные названия css-класса.


    1banner.gif 3banner.gif
Поделиться этой страницей в