powerlife Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 В общем и целом, приветствую всех. Сегодня наткнулся на сайт со стилями и прочими плюхами - https://codepen.io (возможно кто-то уже знает) Интересует вопрос, как мне например данную анимацию прихреначить в стилю группы? - https://codepen.io/zitrusfrisch/pen/DbwjOR Или допустим вот этот - https://codepen.io/moklick/pen/nPZKXM пытался в custom.css запихнуть, но весь форум превращается в крякозябры) Буду рад совету) Zero108 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Exception Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 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> powerlife 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
SlawkA Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 (изменено) скажу одно. это в кастом Спойлер .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> это в другом окошке Изменено 1 декабря, 2022 пользователем SlawkA powerlife 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 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> Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
SlawkA Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 Только что, powerlife сказал: Тоесть, я в custom добавляю body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 } это как раз и не нужно добавлять. только код ксс Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 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> это в другом окошке неа, не работает) 24 минуты назад, SlawkA сказал: это как раз и не нужно добавлять. только код ксс аналогично, как и с предыдущем постом) Вроде, все верно делаю, но не подвязывается стиль, бесит) SlawkA 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
SlawkA Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 5 минут назад, powerlife сказал: неа, не работает) посмотри тут есть темы про это. много тем и много кодов. там просто класс сменишь в нужном коде и вставишь. я просто набросал код. не проверял. тороплюсь очень Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 3 минуты назад, SlawkA сказал: посмотри тут есть темы про это. много тем и много кодов. там просто класс сменишь в нужном коде и вставишь. я просто набросал код. не проверял. тороплюсь очень я все темки чекнул, ну не получается почему то все равно) и пробывал один в один переписать, но все равно не работает) хз в чем прикол вообще Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Mano Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 8 минут назад, powerlife сказал: и пробывал один в один переписать, но все равно не работает) хз в чем прикол вообще а после этого кэш пробовали чистить? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Exception Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 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%; } } Mano и powerlife 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 7 минут назад, the.bunin сказал: а после этого кэш пробовали чистить? да) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 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%; } } Отдуши) Шрифт так же в кастом добавляю? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Mano Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 17 минут назад, powerlife сказал: Отдуши) Покажи как получилось) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Exception Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 (изменено) 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"> или скачать его у них и загрузить, есть документация отдельная как подключать шрифты Изменено 1 декабря, 2022 пользователем Exception Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 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); делать? я просто впервые с этим сталкиваюсь) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Exception Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 2 минуты назад, powerlife сказал: а если через @import url(https://fonts.googleapis.com/css?family=Neuton|Oswald); делать? я просто впервые с этим сталкиваюсь) да можно и так, только Neuton не нужен @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); Mano и powerlife 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 13 минут назад, the.bunin сказал: Покажи как получилось) https://gyazo.com/34f945d4a56487d324f41628963339af вот как то так Mano 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 15 минут назад, Exception сказал: да можно и так, только Neuton не нужен @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); в общем и целов, для меня новое ты открыл, да и думаю для людей тоже) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Mano Опубликовано 1 декабря, 2022 Поделиться Опубликовано 1 декабря, 2022 26 минут назад, powerlife сказал: https://gyazo.com/34f945d4a56487d324f41628963339af вот как то так я бы в фотошопе уменьшил полоску под размер шрифта и залил на свой серв лучше) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
powerlife Опубликовано 1 декабря, 2022 Автор Поделиться Опубликовано 1 декабря, 2022 4 минуты назад, the.bunin сказал: я бы в фотошопе уменьшил полоску под размер шрифта и залил на свой серв лучше) ну это был экспериментальный опыт, теперь понимание есть) + еще изменил эти eM на норм font-family: "Oswald", Impact; font-size: 14px; text-transform: uppercase; Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Exception Опубликовано 2 декабря, 2022 Поделиться Опубликовано 2 декабря, 2022 17 часов назад, the.bunin сказал: я бы в фотошопе уменьшил полоску под размер шрифта и залил на свой серв лучше) можно добавить background-size: cover; и уменьшить скорость анимации с 80s на 25s или на свое усмотрение Mano 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.