Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Решено Дайте css

Статус
В этой теме нельзя размещать новые ответы.
hausweb

hausweb

Май
98
24
Пользователь
2.21. Запрещено публиковать темы или сообщения в требовательной форме (например, «Дайте…», «Сделайте…»).
Решение
code67
css: 
.information {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff
}

.information::before,.information::after {
    display: none
}

.information:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.information:active {
    transform: translateY(1px) scale(.98)
}

@keyframes AnimBanner {...
Сортировка по дате Сортировка по голосам
code67

code67

Фев
215
101
Активный
css: 
.information {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff
}

.information::before,.information::after {
    display: none
}

.information:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.information:active {
    transform: translateY(1px) scale(.98)
}

@keyframes AnimBanner {
    0%,100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.information {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #ff6347, #ffa500, #ff6347)
}

.information::before,.information::after {
    display: none
}

.information:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.information:active {
    transform: translateY(1px) scale(.98)
}

.information.staff {
    border-radius: 30px;
    background-image: linear-gradient(270deg, #f00, #ff6347, #f00);
    background-size: 900% 900%
}

.rejected {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #ff416c, #ff4b2b, #ff416c)
}

.rejected::before,.rejected::after {
    display: none
}

.rejected:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.rejected:active {
    transform: translateY(1px) scale(.98)
}

.important {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 900% 900%;
    animation: AnimBanner 8s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #f00, #ff6347, #f00)
}

.important::before,.important::after {
    display: none
}

.important:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.important:active {
    transform: translateY(1px) scale(.98)
}

.approved {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #00b09b, #96c93d, #00b09b)
}

.approved::before,.approved::after {
    display: none
}

.approved:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.approved:active {
    transform: translateY(1px) scale(.98)
}

.consideration {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #ffa500, #ff8c00, #ffa500)
}

.consideration::before,.consideration::after {
    display: none
}

.consideration:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.consideration:active {
    transform: translateY(1px) scale(.98)
}

.reviewed {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #4a00e0, #8e2de2, #4a00e0)
}

.reviewed::before,.reviewed::after {
    display: none
}

.reviewed:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.reviewed:active {
    transform: translateY(1px) scale(.98)
}

.open {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #00b09b, #96c93d, #00b09b)
}

.open::before,.open::after {
    display: none
}

.open:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.open:active {
    transform: translateY(1px) scale(.98)
}

.close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #8b0000, #b22222, #8b0000)
}

.closed::before,.closed::after {
    display: none
}

.closed:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.closed:active {
    transform: translateY(1px) scale(.98)
}

.solved {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #1a1a1a;
    background-image: linear-gradient(270deg, #acb6e5, #86fde8, #acb6e5)
}

.solved::before,.solved::after {
    display: none
}

.solved:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.solved:active {
    transform: translateY(1px) scale(.98)
}

.viewed {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #616161, #9e9e9e, #616161)
}

.viewed::before,.viewed::after {
    display: none
}

.viewed:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.viewed:active {
    transform: translateY(1px) scale(.98)
}

.event {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #ff0080, #ff8c00, #ff0080)
}

.event::before,.event::after {
    display: none
}

.event:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.event:active {
    transform: translateY(1px) scale(.98)
}

.music {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #a0f, #f0a, #a0f)
}

.music::before,.music::after {
    display: none
}

.music:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.music:active {
    transform: translateY(1px) scale(.98)
}

.preftm {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #dc143c, #ff4500, #dc143c)
}

.preftm::before,.preftm::after {
    display: none
}

.preftm:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.preftm:active {
    transform: translateY(1px) scale(.98)
}

.prefga {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #dc143c, #ff4500, #dc143c)
}

.prefga::before,.prefga::after {
    display: none
}

.prefga:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.prefga:active {
    transform: translateY(1px) scale(.98)
}

.prefca {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #dc143c, #ff4500, #dc143c)
}

.prefga::before,.prefga::after {
    display: none
}

.prefga:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.prefga:active {
    transform: translateY(1px) scale(.98)
}

.preftc {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #ff8c00, #ffa500, #ff8c00)
}

.preftc::before,.preftc::after {
    display: none
}

.preftc:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.preftc:active {
    transform: translateY(1px) scale(.98)
}

.relis {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #2e7d32, #4caf50, #2e7d32)
}

.relis::before,.relis::after {
    display: none
}

.relis:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.relis:active {
    transform: translateY(1px) scale(.98)
}

.npass {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 66%;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    color: #fff;
    background-image: linear-gradient(270deg, #b8860b, #daa520, #b8860b)
}

.npass::before,.npass::after {
    display: none
}

.npass:hover {
    transform: translateY(-2px) scale(1.05);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.npass:active {
    transform: translateY(1px) scale(.98)
}

@keyframes AnimBanner {
    0%,100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@media (max-width: 768px) {
    .information,.rejected,.important,.approved,.consideration,.reviewed,.open,.closed,.solved,.viewed,.event,.music,.prefga,.preftc,.relis,.npass {
        padding:4px 8px;
        font-size: 70%;
        border-radius: 10px
    }
}

@media (max-width: 480px) {
    .information,.rejected,.important,.approved,.consideration,.reviewed,.open,.closed,.solved,.viewed,.event,.music,.prefga,.preftc,.relis,.npass {
        padding:3px 7px;
        font-size: 68%;
        letter-spacing: 0.3px
    }
}
 
Позитивный голос 1 Негативный голос
Решение
Статус
В этой теме нельзя размещать новые ответы.
Сверху