Кастомные баннеры для вас

[Loveシ︎sʜᴀᴅᴏᴡ꧂]

Приветствую!

Вот скрины;



exstra.less

.owner, .ga, .zga, .admin, .sr-admin, .gs, .zgs, .moder, .leader, .tester, .user {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    text-transform: uppercase;
    width: 100%;
    max-width: 220px;
    min-height: 36px;
    box-sizing: border-box;
    font-size: 11px;
    letter-spacing: 1.2px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin: 8px auto;
    padding: 6px 10px 6px 14px;
    background: #0d0e12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    transition: all 0.25s ease;
}

.owner::before, .ga::before, .zga::before, .admin::before, .sr-admin::before, .gs::before, .zgs::before, .moder::before, .leader::before, .tester::before, .user::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
}

.owner span, .ga span, .zga span, .admin span, .sr-admin span, .gs span, .zgs span, .moder span, .leader span, .tester span, .user span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 4px;
}

.owner:hover, .ga:hover, .zga:hover, .admin:hover, .sr-admin:hover, .gs:hover, .zgs:hover, .moder:hover, .leader:hover, .tester:hover, .user:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
}

.owner { border-color: rgba(255, 0, 85, 0.3); text-shadow: 0 0 5px #ff0055; color: #ff0055; box-shadow: inset 0 0 10px rgba(255, 0, 85, 0.1); }
.owner::before { background: #ff0055; }
.owner span { border-right: 2px solid #ff0055; animation: cp-human-typing-fast 5s infinite, cp-blink 0.4s infinite; }

.ga { border-color: rgba(255, 0, 0, 0.3); text-shadow: 0 0 5px #ff0000; color: #ff0000; box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.1); }
.ga::before { background: #ff0000; }
.ga span { border-right: 2px solid #ff0000; animation: cp-human-typing-normal 5.5s infinite, cp-blink 0.4s infinite; }

.zga { border-color: rgba(255, 85, 0, 0.3); text-shadow: 0 0 5px #ff5500; color: #ff5500; box-shadow: inset 0 0 10px rgba(255, 85, 0, 0.1); }
.zga::before { background: #ff5500; }
.zga span { border-right: 2px solid #ff5500; animation: cp-human-typing-slow 6s infinite, cp-blink 0.4s infinite; }

.admin { border-color: rgba(255, 170, 0, 0.3); text-shadow: 0 0 5px #ffaa00; color: #ffaa00; box-shadow: inset 0 0 10px rgba(255, 170, 0, 0.1); }
.admin::before { background: #ffaa00; }
.admin span { border-right: 2px solid #ffaa00; animation: cp-human-typing-normal 5.3s infinite, cp-blink 0.4s infinite; }

.sr-admin { border-color: rgba(0, 85, 255, 0.3); text-shadow: 0 0 5px #0055ff; color: #0055ff; box-shadow: inset 0 0 10px rgba(0, 85, 255, 0.1); }
.sr-admin::before { background: #0055ff; }
.sr-admin span { border-right: 2px solid #0055ff; animation: cp-human-typing-slow 5.8s infinite, cp-blink 0.4s infinite; }

.gs { border-color: rgba(0, 255, 242, 0.3); text-shadow: 0 0 5px #00fff2; color: #00fff2; box-shadow: inset 0 0 10px rgba(0, 255, 242, 0.1); }
.gs::before { background: #00fff2; }
.gs span { border-right: 2px solid #00fff2; animation: cp-human-typing-fast 4.8s infinite, cp-blink 0.4s infinite; }

.zgs { border-color: rgba(0, 170, 255, 0.3); text-shadow: 0 0 5px #00aaff; color: #00aaff; box-shadow: inset 0 0 10px rgba(0, 170, 255, 0.1); }
.zgs::before { background: #00aaff; }
.zgs span { border-right: 2px solid #00aaff; animation: cp-human-typing-normal 5.4s infinite, cp-blink 0.4s infinite; }

.moder { border-color: rgba(0, 255, 102, 0.3); text-shadow: 0 0 5px #00ff66; color: #00ff66; box-shadow: inset 0 0 10px rgba(0, 255, 102, 0.1); }
.moder::before { background: #00ff66; }
.moder span { border-right: 2px solid #00ff66; animation: cp-human-typing-fast 5.1s infinite, cp-blink 0.4s infinite; }

.leader { border-color: rgba(230, 255, 0, 0.3); text-shadow: 0 0 5px #e6ff00; color: #e6ff00; box-shadow: inset 0 0 10px rgba(230, 255, 0, 0.1); }
.leader::before { background: #e6ff00; }
.leader span { border-right: 2px solid #e6ff00; animation: cp-human-typing-slow 5.3s infinite, cp-blink 0.4s infinite; }

.tester { border-color: rgba(170, 0, 255, 0.3); text-shadow: 0 0 5px #aa00ff; color: #aa00ff; box-shadow: inset 0 0 10px rgba(170, 0, 255, 0.1); }
.tester::before { background: #aa00ff; }
.tester span { border-right: 2px solid #aa00ff; animation: cp-human-typing-normal 5.6s infinite, cp-blink 0.4s infinite; }

.user { border-color: rgba(150, 160, 175, 0.15); text-shadow: 0 0 3px #96a0af; color: #96a0af; }
.user::before { background: #96a0af; }
.user span { border-right: 2px solid #96a0af; animation: cp-human-typing-slow 6s infinite, cp-blink 0.4s infinite; }

@keyframes cp-human-typing-fast {
    0%, 100% { max-width: 0; }
    4% { max-width: 15%; }     
    8% { max-width: 15%; }     
    15% { max-width: 50%; }   
    18% { max-width: 40%; }   
    25% { max-width: 85%; }   
    30% { max-width: 100%; }   
    70% { max-width: 100%; }   
    80% { max-width: 50%; }   
    85% { max-width: 50%; }   
}

@keyframes cp-human-typing-normal {
    0%, 100% { max-width: 0; }
    6% { max-width: 25%; }     
    12% { max-width: 20%; }   
    22% { max-width: 60%; }   
    28% { max-width: 60%; }   
    38% { max-width: 100%; }   
    68% { max-width: 100%; }   
    78% { max-width: 40%; }   
    84% { max-width: 40%; }   
}

@keyframes cp-human-typing-slow {
    0%, 100% { max-width: 0; }
    10% { max-width: 20%; }   
    18% { max-width: 15%; }   
    32% { max-width: 55%; }   
    40% { max-width: 45%; }   
    52% { max-width: 100%; }   
    65% { max-width: 100%; }   
    80% { max-width: 30%; }   
}

@keyframes cp-blink {
    from, to { border-color: transparent }
    50% { border-color: currentColor; }
}

 

[Loveシ︎sʜᴀᴅᴏᴡ꧂]

OFFTOP

возможны обновления!

 

[Loveシ︎sʜᴀᴅᴏᴡ꧂]

Префиксы;

.open, .close, .pin, .done, .wait, .accepted, .rejected, .information, .important {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    text-transform: uppercase;
    height: 24px;
    box-sizing: border-box;
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    padding: 2px 8px 2px 14px;
    background: #0d0e12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    transition: all 0.25s ease;
    text-decoration: none !important;
    white-space: nowrap;
}

.open::before, .close::before, .pin::before, .done::before, .wait::before, .accepted::before, .rejected::before, .information::before, .important::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
}

.open:hover, .close:hover, .pin:hover, .done:hover, .wait:hover, .accepted:hover, .rejected:hover, .information:hover, .important:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.open { border-color: rgba(0, 255, 102, 0.3); text-shadow: 0 0 4px #00ff66; color: #00ff66 !important; border-right: 2px solid #00ff66; animation: cp-user-open 4.4s infinite, cp-blink 0.35s infinite; }
.open::before { background: #00ff66; }

.close { border-color: rgba(255, 0, 50, 0.3); text-shadow: 0 0 4px #ff0032; color: #ff0032 !important; border-right: 2px solid #ff0032; animation: cp-user-close 4.7s infinite, cp-blink 0.42s infinite; }
.close::before { background: #ff0032; }

.pin { border-color: rgba(255, 170, 0, 0.3); text-shadow: 0 0 4px #ffaa00; color: #ffaa00 !important; border-right: 2px solid #ffaa00; animation: cp-user-pin 5.2s infinite, cp-blink 0.38s infinite; }
.pin::before { background: #ffaa00; }

.done { border-color: rgba(0, 170, 255, 0.3); text-shadow: 0 0 4px #00aaff; color: #00aaff !important; border-right: 2px solid #00aaff; animation: cp-user-done 5.1s infinite, cp-blink 0.4s infinite; }
.done::before { background: #00aaff; }

.wait { border-color: rgba(255, 230, 0, 0.3); text-shadow: 0 0 4px #ffe600; color: #ffe600 !important; border-right: 2px solid #ffe600; animation: cp-user-wait 5.6s infinite, cp-blink 0.45s infinite; }
.wait::before { background: #ffe600; }

.accepted { border-color: rgba(0, 255, 242, 0.3); text-shadow: 0 0 4px #00fff2; color: #00fff2 !important; border-right: 2px solid #00fff2; animation: cp-user-accepted 4.9s infinite, cp-blink 0.37s infinite; }
.accepted::before { background: #00fff2; }

.rejected { border-color: rgba(255, 0, 120, 0.3); text-shadow: 0 0 4px #ff0078; color: #ff0078 !important; border-right: 2px solid #ff0078; animation: cp-user-rejected 5.3s infinite, cp-blink 0.41s infinite; }
.rejected::before { background: #ff0078; }

.information { border-color: rgba(0, 170, 255, 0.3); text-shadow: 0 0 4px #00aaff; color: #00aaff !important; border-right: 2px solid #00aaff; animation: cp-user-info 5.8s infinite, cp-blink 0.39s infinite; }
.information::before { background: #00aaff; }

.important { border-color: rgba(255, 0, 50, 0.3); text-shadow: 0 0 4px #ff0032; color: #ff0032 !important; border-right: 2px solid #ff0032; animation: cp-user-important 5.0s infinite, cp-blink 0.43s infinite; }
.important::before { background: #ff0032; }

@keyframes cp-user-open {
    0%, 100% { width: 18px; max-width: 18px; }
    6% { width: 45px; max-width: 45px; }
    12% { width: 45px; max-width: 45px; }
    20% { width: 85px; max-width: 85px; }
    24% { width: 72px; max-width: 72px; }
    35%, 72% { width: 110px; max-width: 110px; }
    82% { width: 50px; max-width: 50px; }
}

@keyframes cp-user-close {
    0%, 100% { width: 18px; max-width: 18px; }
    5% { width: 35px; max-width: 35px; }
    9% { width: 35px; max-width: 35px; }
    18% { width: 90px; max-width: 90px; }
    22% { width: 75px; max-width: 75px; }
    32%, 70% { width: 110px; max-width: 110px; }
    80% { width: 40px; max-width: 40px; }
}

@keyframes cp-user-pin {
    0%, 100% { width: 18px; max-width: 18px; }
    8% { width: 55px; max-width: 55px; }
    15% { width: 45px; max-width: 45px; }
    28% { width: 115px; max-width: 115px; }
    34% { width: 115px; max-width: 115px; }
    44%, 74% { width: 145px; max-width: 145px; }
    84% { width: 60px; max-width: 60px; }
}

@keyframes cp-user-done {
    0%, 100% { width: 18px; max-width: 18px; }
    7% { width: 48px; max-width: 48px; }
    13% { width: 90px; max-width: 90px; }
    18% { width: 75px; max-width: 75px; }
    30% { width: 125px; max-width: 125px; }
    40%, 71% { width: 145px; max-width: 145px; }
    83% { width: 50px; max-width: 50px; }
}

@keyframes cp-user-wait {
    0%, 100% { width: 18px; max-width: 18px; }
    5% { width: 38px; max-width: 38px; }
    10% { width: 38px; max-width: 38px; }
    22% { width: 100px; max-width: 100px; }
    26% { width: 85px; max-width: 85px; }
    40% { width: 150px; max-width: 150px; }
    48%, 68% { width: 195px; max-width: 195px; }
    78% { width: 90px; max-width: 90px; }
}

@keyframes cp-user-accepted {
    0%, 100% { width: 18px; max-width: 18px; }
    6% { width: 50px; max-width: 50px; }
    11% { width: 40px; max-width: 40px; }
    24% { width: 90px; max-width: 90px; }
    32%, 75% { width: 115px; max-width: 115px; }
    85% { width: 40px; max-width: 40px; }
}

@keyframes cp-user-rejected {
    0%, 100% { width: 18px; max-width: 18px; }
    8% { width: 45px; max-width: 45px; }
    14% { width: 45px; max-width: 45px; }
    25% { width: 95px; max-width: 95px; }
    30% { width: 85px; max-width: 85px; }
    42%, 73% { width: 115px; max-width: 115px; }
    82% { width: 55px; max-width: 55px; }
}

@keyframes cp-user-info {
    0%, 100% { width: 18px; max-width: 18px; }
    5% { width: 55px; max-width: 55px; }
    12% { width: 45px; max-width: 45px; }
    24% { width: 105px; max-width: 105px; }
    30% { width: 105px; max-width: 105px; }
    42%, 69% { width: 145px; max-width: 145px; }
    80% { width: 65px; max-width: 65px; }
}

@keyframes cp-user-important {
    0%, 100% { width: 18px; max-width: 18px; }
    7% { width: 42px; max-width: 42px; }
    14% { width: 34px; max-width: 34px; }
    25% { width: 78px; max-width: 78px; }
    34%, 76% { width: 95px; max-width: 95px; }
    86% { width: 40px; max-width: 40px; }
}

@keyframes cp-blink {
    from, to { border-color: transparent }
    50% { border-color: currentColor; }
}