Welcome!

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

SignUp Now!

новые префиксы тем forum.blessrussia.online

Решение
Spolzer
T I H O N написал(а):
в заголовке
Нажмите для раскрытия...

CSS: 
.pgreen {
  background-image:linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #32cd32,inset 0 0 10px rgba(50,205,50,0.3);
  position:relative;
  overflow:hidden;
  animation:christmasTree 4s ease infinite
}
@keyframes christmasTree {
  0% {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #32cd32
  }
  50% {
    background-position:100% 50%;
    box-shadow:0px 0px 12px #32cd32
  }
  100% {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #32cd32
  }
}
.pgreen::before {
  margin-right:3px...
Сортировка по дате Сортировка по голосам
Spolzer

Spolzer

"Я убивал, но какашки не убирал" - Олег Чигурович
Июн
3,055
2,363
Редактор
T I H O N написал(а):
в заголовке
Нажмите для раскрытия...

CSS: 
.pgreen {
  background-image:linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #32cd32,inset 0 0 10px rgba(50,205,50,0.3);
  position:relative;
  overflow:hidden;
  animation:christmasTree 4s ease infinite
}
@keyframes christmasTree {
  0% {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #32cd32
  }
  50% {
    background-position:100% 50%;
    box-shadow:0px 0px 12px #32cd32
  }
  100% {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #32cd32
  }
}
.pgreen::before {
  margin-right:3px;
  animation:treeWobble 2s infinite ease-in-out
}
@keyframes treeWobble {
  0%,
  100% {
    transform:rotate(0deg)
  }
  25% {
    transform:rotate(-5deg)
  }
  75% {
    transform:rotate(5deg)
  }
}
.porange {
  background-image:linear-gradient(150deg, #ffbf00, #ff9800, #ffa500, #ff8c00);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #ff9800,inset 0 0 8px rgba(255,152,0,0.3);
  animation:mandarinGlow 3s infinite alternate;
  position:relative
}
@keyframes mandarinGlow {
  from {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #ff9800
  }
  to {
    background-position:100% 50%;
    box-shadow:0px 0px 15px #ff9800
  }
}
.porange::after {
  content:'🍊';
  margin-left:3px;
  animation:fruitBounce 1.5s infinite
}
@keyframes fruitBounce {
  0%,
  100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-2px)
  }
}
.paqua {
  background-image:linear-gradient(150deg, #03a9f4, #2ebcfc, #00bcd4, #03a9f4);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #03a9f4,inset 0 0 10px rgba(3,169,244,0.2);
  animation:iceFlow 5s linear infinite;
  position:relative
}
@keyframes iceFlow {
  0% {
    background-position:0% 50%;
    filter:brightness(1)
  }
  50% {
    background-position:100% 50%;
    filter:brightness(1.2)
  }
  100% {
    background-position:0% 50%;
    filter:brightness(1)
  }
}
.paqua::before {
  content:'❄️';
  margin-right:3px;
  animation:snowflakeSpin 4s infinite linear
}
.pred {
  background-image:linear-gradient(150deg, #f00, #b22222, #f44, #c00, #f00);
  background-size:400% 400%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #f00,inset 0 0 15px rgba(255,0,0,0.4);
  animation:ballGlow 3s ease-in-out infinite
}
@keyframes ballGlow {
  0%,
  100% {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #f00
  }
  50% {
    background-position:100% 50%;
    box-shadow:0px 0px 15px #f00,0px 0px 25px #f44
  }
}
.pred::after {
  content:'🔴';
  margin-left:3px;
  font-size:10px;
  animation:shineReflect 2s infinite
}
@keyframes shineReflect {
  0%,
  100% {
    opacity:0.7
  }
  50% {
    opacity:1
  }
}
.ypred {
  background-image:linear-gradient(150deg, #ffe218, #ffc018, #ffd700, #ffa500, #ffc018);
  background-size:300% 300%;
  color:black;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #ffc018,inset 0 0 10px rgba(255,193,7,0.4);
  animation:goldFire 2s infinite alternate;
  text-shadow:0 1px 1px rgba(255,255,255,0.5)
}
@keyframes goldFire {
  from {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #ffc018
  }
  to {
    background-position:100% 50%;
    box-shadow:0px 0px 12px #ffc018,0px 0px 20px #ffd700
  }
}
.ypred::before {
  content:'✨';
  margin-right:3px;
  animation:sparkleTwinkle 1s infinite alternate
}
.bpred {
  background-image:linear-gradient(150deg, #1844ff, #186fff, #1e88e5, #0d47a1, #1844ff);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #1844ff,inset 0 0 10px rgba(24,68,255,0.3);
  animation:nightSky 6s ease infinite;
  position:relative;
  overflow:hidden
}
@keyframes nightSky {
  0% {
    background-position:0% 50%;
    filter:brightness(1)
  }
  50% {
    background-position:100% 50%;
    filter:brightness(1.1)
  }
  100% {
    background-position:0% 50%;
    filter:brightness(1)
  }
}
.bpred::after {
  content:'⭐';
  margin-left:3px;
  font-size:10px;
  animation:starTwinkle 1.5s infinite alternate
}
@keyframes starTwinkle {
  from {
    opacity:0.3;
    transform:scale(.9)
  }
  to {
    opacity:1;
    transform:scale(1.1)
  }
}
[class^="p"] {
  transition:all .3s ease;
  position:relative;
  overflow:hidden
}
[class^="p"]:hover {
  transform:translateY(-2px)
}
[class^="p"]:hover::before {
  animation-duration:1s
}
[class^="p"]:hover::after {
  content:'';
  position:absolute;
  top:-10px;
  left:50%;
  width:4px;
  height:4px;
  background:white;
  border-radius:50%;
  animation:snowFallMini 1s linear;
  box-shadow:0 0 3px #fff,0 0 6px #fff;
  pointer-events:none
}
@keyframes snowFallMini {
  0% {
    transform:translateY(0) rotate(0deg);
    opacity:1
  }
  100% {
    transform:translateY(20px) rotate(180deg);
    opacity:0
  }
}
@media (max-width:650px) {
  .pgreen,
  .porange,
  .paqua,
  .pred,
  .ypred,
  .bpred {
    font-size:60%;
    padding:2px 5px
  }
}
[class^="p"]::before {
  display:inline-block;
  transition:all .3s ease
}
 
Позитивный голос 1 Негативный голос
Решение
Pahan Madman

Pahan Madman

Фев
19
1
Пользователь
Spolzer написал(а):
CSS: 
.pgreen {
  background-image:linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #32cd32,inset 0 0 10px rgba(50,205,50,0.3);
  position:relative;
  overflow:hidden;
  animation:christmasTree 4s ease infinite
}
@keyframes christmasTree {
  0% {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #32cd32
  }
  50% {
    background-position:100% 50%;
    box-shadow:0px 0px 12px #32cd32
  }
  100% {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #32cd32
  }
}
.pgreen::before {
  margin-right:3px;
  animation:treeWobble 2s infinite ease-in-out
}
@keyframes treeWobble {
  0%,
  100% {
    transform:rotate(0deg)
  }
  25% {
    transform:rotate(-5deg)
  }
  75% {
    transform:rotate(5deg)
  }
}
.porange {
  background-image:linear-gradient(150deg, #ffbf00, #ff9800, #ffa500, #ff8c00);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #ff9800,inset 0 0 8px rgba(255,152,0,0.3);
  animation:mandarinGlow 3s infinite alternate;
  position:relative
}
@keyframes mandarinGlow {
  from {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #ff9800
  }
  to {
    background-position:100% 50%;
    box-shadow:0px 0px 15px #ff9800
  }
}
.porange::after {
  content:'🍊';
  margin-left:3px;
  animation:fruitBounce 1.5s infinite
}
@keyframes fruitBounce {
  0%,
  100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-2px)
  }
}
.paqua {
  background-image:linear-gradient(150deg, #03a9f4, #2ebcfc, #00bcd4, #03a9f4);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #03a9f4,inset 0 0 10px rgba(3,169,244,0.2);
  animation:iceFlow 5s linear infinite;
  position:relative
}
@keyframes iceFlow {
  0% {
    background-position:0% 50%;
    filter:brightness(1)
  }
  50% {
    background-position:100% 50%;
    filter:brightness(1.2)
  }
  100% {
    background-position:0% 50%;
    filter:brightness(1)
  }
}
.paqua::before {
  content:'❄️';
  margin-right:3px;
  animation:snowflakeSpin 4s infinite linear
}
.pred {
  background-image:linear-gradient(150deg, #f00, #b22222, #f44, #c00, #f00);
  background-size:400% 400%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #f00,inset 0 0 15px rgba(255,0,0,0.4);
  animation:ballGlow 3s ease-in-out infinite
}
@keyframes ballGlow {
  0%,
  100% {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #f00
  }
  50% {
    background-position:100% 50%;
    box-shadow:0px 0px 15px #f00,0px 0px 25px #f44
  }
}
.pred::after {
  content:'🔴';
  margin-left:3px;
  font-size:10px;
  animation:shineReflect 2s infinite
}
@keyframes shineReflect {
  0%,
  100% {
    opacity:0.7
  }
  50% {
    opacity:1
  }
}
.ypred {
  background-image:linear-gradient(150deg, #ffe218, #ffc018, #ffd700, #ffa500, #ffc018);
  background-size:300% 300%;
  color:black;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #ffc018,inset 0 0 10px rgba(255,193,7,0.4);
  animation:goldFire 2s infinite alternate;
  text-shadow:0 1px 1px rgba(255,255,255,0.5)
}
@keyframes goldFire {
  from {
    background-position:0% 50%;
    box-shadow:0px 0px 6px #ffc018
  }
  to {
    background-position:100% 50%;
    box-shadow:0px 0px 12px #ffc018,0px 0px 20px #ffd700
  }
}
.ypred::before {
  content:'✨';
  margin-right:3px;
  animation:sparkleTwinkle 1s infinite alternate
}
.bpred {
  background-image:linear-gradient(150deg, #1844ff, #186fff, #1e88e5, #0d47a1, #1844ff);
  background-size:300% 300%;
  color:white;
  text-transform:uppercase;
  font-size:66%;
  padding:3px 6px;
  border-radius:10px;
  text-align:center;
  box-shadow:0px 0px 6px #1844ff,inset 0 0 10px rgba(24,68,255,0.3);
  animation:nightSky 6s ease infinite;
  position:relative;
  overflow:hidden
}
@keyframes nightSky {
  0% {
    background-position:0% 50%;
    filter:brightness(1)
  }
  50% {
    background-position:100% 50%;
    filter:brightness(1.1)
  }
  100% {
    background-position:0% 50%;
    filter:brightness(1)
  }
}
.bpred::after {
  content:'⭐';
  margin-left:3px;
  font-size:10px;
  animation:starTwinkle 1.5s infinite alternate
}
@keyframes starTwinkle {
  from {
    opacity:0.3;
    transform:scale(.9)
  }
  to {
    opacity:1;
    transform:scale(1.1)
  }
}
[class^="p"] {
  transition:all .3s ease;
  position:relative;
  overflow:hidden
}
[class^="p"]:hover {
  transform:translateY(-2px)
}
[class^="p"]:hover::before {
  animation-duration:1s
}
[class^="p"]:hover::after {
  content:'';
  position:absolute;
  top:-10px;
  left:50%;
  width:4px;
  height:4px;
  background:white;
  border-radius:50%;
  animation:snowFallMini 1s linear;
  box-shadow:0 0 3px #fff,0 0 6px #fff;
  pointer-events:none
}
@keyframes snowFallMini {
  0% {
    transform:translateY(0) rotate(0deg);
    opacity:1
  }
  100% {
    transform:translateY(20px) rotate(180deg);
    opacity:0
  }
}
@media (max-width:650px) {
  .pgreen,
  .porange,
  .paqua,
  .pred,
  .ypred,
  .bpred {
    font-size:60%;
    padding:2px 5px
  }
}
[class^="p"]::before {
  display:inline-block;
  transition:all .3s ease
}
Нажмите для раскрытия...
Куда ставить это
 
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Сверху