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

Posted 1 декабря, 20221 yr

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

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

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

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

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

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

Цитата

Zero108
1

1 декабря, 20221 yr

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 добавить в первое поле и закрывающий во второе поле

Цитата

powerlife
1

1 декабря, 20221 yr

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;
  }

а в формате Группы прописать Бла бла  это в другом окошке

Edited 1 декабря, 20221 yr by SlawkA

Цитата

powerlife
1

1 декабря, 20221 yr

Author

comment_188035

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

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

Тоесть, я в 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%; }
}

А в форм. группы уже вкидываю и во втором поле закрываю через -

Цитата

1 декабря, 20221 yr

comment_188036

Только что, powerlife сказал:
Тоесть, я в custom добавляю
body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 }

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

Цитата

1 декабря, 20221 yr

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;
  }
}

а в формате Группы прописать Бла бла  это в другом окошке

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

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

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

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

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

Цитата

SlawkA
1

1 декабря, 20221 yr

comment_188040

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

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

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

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

Цитата

1 декабря, 20221 yr

Author

comment_188041

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

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

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

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

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

Цитата

1 декабря, 20221 yr

comment_188045

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

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

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

Цитата

1 декабря, 20221 yr

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%;
  }
}

Цитата

powerlife and Mano
2

1 декабря, 20221 yr

Author

comment_188047

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

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

да)

Цитата

1 декабря, 20221 yr

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%;
  }
}

Отдуши)

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

Цитата

1 декабря, 20221 yr

comment_188049

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

Отдуши)

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

Цитата

1 декабря, 20221 yr

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 1 декабря, 20221 yr by Exception

Цитата

1 декабря, 20221 yr

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); делать?

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

Цитата

1 декабря, 20221 yr

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');

Цитата

powerlife and Mano
2

1 декабря, 20221 yr

Author

comment_188053

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

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

https://gyazo.com/34f945d4a56487d324f41628963339af

вот как то так

Цитата

Mano
1

1 декабря, 20221 yr

Author

comment_188054

15 минут назад, Exception сказал:
да можно и так, только Neuton не нужен
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

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

Цитата

1 декабря, 20221 yr

comment_188055

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

https://gyazo.com/34f945d4a56487d324f41628963339af

вот как то так

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

Цитата

1 декабря, 20221 yr

Author

comment_188056

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

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

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

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

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

Цитата

2 декабря, 20221 yr

comment_188067

17 часов назад, the.bunin сказал:

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

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

background-size: cover;

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

Цитата

Mano
1

Sign In

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

Featured Replies

Join the conversation

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

Account

Navigation

Messages

Уведомления

Search