Jump to content

Форматирование групп(анимация, стили и прочее)

powerlife
powerlife
in Themes and design Invision Community 4

Featured Replies

Posted
comment_188032

В общем и целом, приветствую всех.

Сегодня наткнулся на сайт со стилями и прочими плюхами - https://codepen.io (возможно кто-то уже знает)

Интересует вопрос, как мне например данную анимацию прихреначить в стилю группы? - https://codepen.io/zitrusfrisch/pen/DbwjOR

Или допустим вот этот - https://codepen.io/moklick/pen/nPZKXM

пытался в custom.css запихнуть, но весь форум превращается в крякозябры)

Буду рад совету)

 

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/25040-formatirovanie-gruppanimaciya-stili-i-prochee/
    Share on other sites
    comment_188033
    24 минуты назад, powerlife сказал:

    В общем и целом, приветствую всех.

    Сегодня наткнулся на сайт со стилями и прочими плюхами - https://codepen.io (возможно кто-то уже знает)

    Интересует вопрос, как мне например данную анимацию прихреначить в стилю группы? - https://codepen.io/zitrusfrisch/pen/DbwjOR

    Или допустим вот этот - https://codepen.io/moklick/pen/nPZKXM

    пытался в custom.css запихнуть, но весь форум превращается в крякозябры)

    Буду рад совету)

     

    Нужно скомпилировать scss в css, на примере первого можно p span заменить на нужный класс, например .mynamecss и в форматировании группы html добавить в первое поле <span class='mynamecss'> и закрывающий во второе поле </span>

  • Цитата
    comment_188034

    скажу одно. это в кастом

    Спойлер 
    .area {
  text-align: center;
  font-size: 6.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }

     

    а в формате Группы прописать <span class="area">Бла бла  </span> это в другом окошке

    Edited by SlawkA

  • Цитата
    • Author
    comment_188035
    2 минуты назад, Exception сказал:

    Нужно скомпилировать scss в css, на примере первого можно p span заменить на нужный класс, например .mynamecss и в форматировании группы html добавить в первое поле <span class='mynamecss'> и закрывающий во второе поле </span>

    Тоесть, я в custom добавляю 

    body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 }

.testtest {
	text-transform: uppercase;
	letter-spacing: .5em;
	display: inline-block;
	border: 4px double rgba(255,255,255,.25);
	border-width: 4px 0;
	padding: 1.5em 0em;
	position: absolute;
	top: 18%;
	left: 50%;
	width: 40em;
	margin: 0 0 0 -20em;
  
  testtest {

  	font: 700 4em/1 "Oswald", sans-serif;
  	letter-spacing: 0;
  	padding: .25em 0 .325em;
	  display: block;
	  margin: 0 auto;
  	text-shadow: 0 0 80px rgba(255,255,255,.5);

/* Clip Background Image */

	  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
	  -webkit-background-clip: text;
	  background-clip: text;

/* Animate Background Image */

	  -webkit-text-fill-color: transparent;
	  -webkit-animation: aitf 80s linear infinite;

/* Activate hardware acceleration for smoother animations */

	  -webkit-transform: translate3d(0,0,0);
	  -webkit-backface-visibility: hidden;

  }
}

/* Animate Background Image */

@-webkit-keyframes aitf {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

    А в форм. группы уже вкидываю <span class='testtest'> и во втором поле закрываю через -  </span>

  • Цитата
    comment_188036
    Только что, powerlife сказал:

    Тоесть, я в custom добавляю 

    body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 }

    это как раз и не нужно добавлять. только код ксс

  • Цитата
    • Author
    comment_188039
    24 минуты назад, SlawkA сказал:

    скажу одно. это в кастом

      Показать контент 
    .area {
  text-align: center;
  font-size: 6.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}

     

    а в формате Группы прописать <span class="area">Бла бла  </span> это в другом окошке

    неа, не работает)

    image.thumb.png.08b3aeceee09ae69da18ebe0ca97b0d3.png

    24 минуты назад, SlawkA сказал:

    это как раз и не нужно добавлять. только код ксс

    аналогично, как и с предыдущем постом)

    Вроде, все верно делаю, но не подвязывается стиль, бесит)

    image.thumb.png.94ed6a07910d306f0e4045e1d0cf65ac.png

  • Цитата
    comment_188040
    5 минут назад, powerlife сказал:

    неа, не работает)

    посмотри тут есть темы про это. много тем и много кодов.

    там просто класс сменишь в нужном коде и вставишь. я просто набросал код. не проверял. тороплюсь очень

  • Цитата
    • Author
    comment_188041
    3 минуты назад, SlawkA сказал:

    посмотри тут есть темы про это. много тем и много кодов.

    там просто класс сменишь в нужном коде и вставишь. я просто набросал код. не проверял. тороплюсь очень

    я все темки чекнул, ну не получается почему то все равно)

    и пробывал один в один переписать, но все равно не работает) хз в чем прикол вообще

  • Цитата
    comment_188045
    8 минут назад, powerlife сказал:

    и пробывал один в один переписать, но все равно не работает) хз в чем прикол вообще

    а после этого кэш пробовали чистить?

  • Цитата
    comment_188046
    6 минут назад, powerlife сказал:

    я все темки чекнул, ну не получается почему то все равно)

    и пробывал один в один переписать, но все равно не работает) хз в чем прикол вообще

    я же написал что нужно сделать
    шрифт тоже можно подключить, он доступен тут https://fonts.googleapis.com/css?family=Neuton|Oswald 

    .mynameclass {
  font: 700 4em/1 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  letter-spacing: 0;
  padding: 0.25em 0 0.325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  /* Clip Background Image */
  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

     

  • Цитата
    • Author
    comment_188047
    7 минут назад, the.bunin сказал:

    а после этого кэш пробовали чистить?

    да)

  • Цитата
    • Author
    comment_188048
    9 минут назад, Exception сказал:

    я же написал что нужно сделать
    шрифт тоже можно подключить, он доступен тут https://fonts.googleapis.com/css?family=Neuton|Oswald 

    .mynameclass {
  font: 700 4em/1 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  letter-spacing: 0;
  padding: 0.25em 0 0.325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  /* Clip Background Image */
  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

     

    Отдуши)

    Шрифт так же в кастом добавляю?

     

  • Цитата
    comment_188049
    17 минут назад, powerlife сказал:

    Отдуши)

    Покажи как получилось)

  • Цитата
    comment_188050
    21 минуту назад, powerlife сказал:

    Отдуши)

    Шрифт так же в кастом добавляю?

     

    можно и так перед тегом </head> 

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">

    или скачать его у них и загрузить, есть документация отдельная как подключать шрифты

    Edited by Exception

  • Цитата
    • Author
    comment_188051
    4 минуты назад, Exception сказал:

    можно и так перед тегом </head> 

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Neuton|Oswald&display=swap" rel="stylesheet">

    или скачать его у них и загрузить, есть документация отдельная как подключать шрифты

    а если через @import url(https://fonts.googleapis.com/css?family=Neuton|Oswald);  делать?

    я просто впервые с этим сталкиваюсь)

  • Цитата
    comment_188052
    2 минуты назад, powerlife сказал:

    а если через @import url(https://fonts.googleapis.com/css?family=Neuton|Oswald);  делать?

    я просто впервые с этим сталкиваюсь)

    да можно и так, только Neuton не нужен 

    @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

     

  • Цитата
    • Author
    comment_188053
    13 минут назад, the.bunin сказал:

    Покажи как получилось)

    https://gyazo.com/34f945d4a56487d324f41628963339af

    вот как то так

  • Цитата
    • Author
    comment_188054
    15 минут назад, Exception сказал:

    да можно и так, только Neuton не нужен 

    @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

     

    в общем и целов, для меня новое ты открыл, да и думаю для людей тоже)

  • Цитата
    comment_188055
    26 минут назад, powerlife сказал:

    https://gyazo.com/34f945d4a56487d324f41628963339af

    вот как то так

    я бы в фотошопе уменьшил полоску под размер шрифта и залил на свой серв лучше)

  • Цитата
    • Author
    comment_188056
    4 минуты назад, the.bunin сказал:

    я бы в фотошопе уменьшил полоску под размер шрифта и залил на свой серв лучше)

    ну это был экспериментальный опыт, теперь понимание есть) 

    + еще изменил эти eM на норм

      font-family: "Oswald",  Impact;
      font-size: 14px;
      text-transform: uppercase;

  • Цитата
    comment_188067
    17 часов назад, the.bunin сказал:

    я бы в фотошопе уменьшил полоску под размер шрифта и залил на свой серв лучше)

    можно добавить  

    background-size: cover;

    и уменьшить скорость анимации с 80s на 25s или на свое усмотрение

  • Цитата

    • Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.