Перейти к содержанию

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


powerlife

Рекомендуемые сообщения

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

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

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

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

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

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

 

Ссылка на комментарий
Поделиться на другие сайты

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>

Ссылка на комментарий
Поделиться на другие сайты

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

Спойлер
.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> это в другом окошке

Изменено пользователем SlawkA
Ссылка на комментарий
Поделиться на другие сайты

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>

Ссылка на комментарий
Поделиться на другие сайты

Только что, powerlife сказал:

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

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

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

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

 

Ссылка на комментарий
Поделиться на другие сайты

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

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

да)

Ссылка на комментарий
Поделиться на другие сайты

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

 

Отдуши)

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

 

Ссылка на комментарий
Поделиться на другие сайты

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

Отдуши)

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

Ссылка на комментарий
Поделиться на другие сайты

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">

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

Изменено пользователем Exception
Ссылка на комментарий
Поделиться на другие сайты

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

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

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

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

 

Ссылка на комментарий
Поделиться на другие сайты

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

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

https://gyazo.com/34f945d4a56487d324f41628963339af

вот как то так

Ссылка на комментарий
Поделиться на другие сайты

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

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

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

 

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

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

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

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

background-size: cover;

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

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...