Jump to content

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

powerlife
 Share

Recommended Posts

powerlife Explorer

powerlife

Posted
Posted

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

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

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

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

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

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

 

Link to comment
Share on other sites
Exception Mentor

Exception

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

Link to comment
Share on other sites
SlawkA Master

SlawkA

Posted
Posted (edited)

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

Спойлер 
.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
Link to comment
Share on other sites
powerlife Explorer

powerlife

Posted
  • Author
Posted
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>

Link to comment
Share on other sites
SlawkA Master

SlawkA

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

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

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

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

Link to comment
Share on other sites
powerlife Explorer

powerlife

Posted
  • Author
Posted
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

Link to comment
Share on other sites
SlawkA Master

SlawkA

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

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

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

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

Link to comment
Share on other sites
powerlife Explorer

powerlife

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

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

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

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

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

Link to comment
Share on other sites
Mano Mentor

Mano

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

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

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

Link to comment
Share on other sites
Exception Mentor

Exception

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

 

Link to comment
Share on other sites
powerlife Explorer

powerlife

Posted
  • Author
Posted
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%;
  }
}

 

Отдуши)

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

 

Link to comment
Share on other sites
Exception Mentor

Exception

Posted
Posted (edited)
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
Link to comment
Share on other sites
powerlife Explorer

powerlife

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

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

Link to comment
Share on other sites
Exception Mentor

Exception

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

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

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

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

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

 

Link to comment
Share on other sites
powerlife Explorer

powerlife

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

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

https://gyazo.com/34f945d4a56487d324f41628963339af

вот как то так

Link to comment
Share on other sites
powerlife Explorer

powerlife

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

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

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

 

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

Link to comment
Share on other sites
Mano Mentor

Mano

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

https://gyazo.com/34f945d4a56487d324f41628963339af

вот как то так

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

Link to comment
Share on other sites
powerlife Explorer

powerlife

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

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

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

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

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

Link to comment
Share on other sites
Exception Mentor

Exception

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

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

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

background-size: cover;

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

Link to comment
Share on other sites

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
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

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

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...