3D Text Effect, Challenging Text Effect
Greetings, i am very new here, but i am already watching Kevins amazing videos for a while. Since i have searched already 2 days for a working idea i thought maybe the god of css could help me. (Or some of his minions) 🙂
I am trying to create a dynamic text effect in this 3d style i am sending in a screenshot with this post. It seems there is no filter or masking trick which dynamically reacts on this. I would like to avoid adding a 3d javascript library for such a thing, i guess this would be overkill. If there is no other way around it i would probably stay with images. But since this text is also the h1 of the page it could be problematic for semantic.
Please forget the branch structure underneath. I know this will be an overkill to make this change width automatically. 😄
Thank you in advance
47 Replies
where did you took that screenshot from?
This Text was created by me inside Affinity Designer
you should consider to export it as an svg
created how?
meh, that's just a png shoehorned into an svg for 33% more wasted bandwidth
and it's svg 1.1
but how did you screated the text?
I created it through a FX effect on the layer. I wanted to create a screenshot... but the interface is not in english... meh 😄
have you tried to convert text to curves?
when you export as svg, you should have an option for it
then you can hand modify the svg
maybe you might even be able to somehow get the font?
I think they want the text to be dynamic, you wouldn't achieve that with an SVG
no, but the idea is to have something scalable instead of just a png
oh, you added an effect to it
oh, like it'll always be the same text, but just at different sizes?
yes, so it quasi-almost behaves like text
it's better than a png
and it might even be smaller
I'm not sure that's what @M4rv wants in this case tbh
and since it would be an svg, it might be possible to modify it so it works with current color
do you want the text content to be dynamic, or just responsive?
yes i did, the exporter is also flattening it 😦
that sounds like a bug
or a limitation
but jochem made a good question
ah i am sorry for beeing not precise enought and thanks for the question @Jochem , what i ment was that the content is dynamic. I can change it with the CMS afterwards.
then an SVG isn't a solution
the SVG will just describe these particular curves, not the text content in a way that can be (effectively) changed by anything
and exporting as an image won't work as well
😄 i honestly feeling like 2009 where i exporter images to show some effects 😛
Your best bet for having this effect work through a CMS would be to use a font that has this built in, I think
might be possible to get close with text fuckery
but it will have so many problems
yes i saw a font who created such an effect. I just need to figure out how i can create such a thing by myself
one way would be to create an svg font yourself, manually
Honestly it is possible with an image or something... But i also saw a challenge for myself in this. Trying to expand boundaries from my own knowledge
with an image, it won't be dynamic and will be a pain to make it responsive
yes, that's trough, i haven't thought about the reponsive aspect
what's the base font you used?
It's NewRocker from Google Fonts
https://fonts.google.com/specimen/New+Rocker
which export options do you have?
Maybe i can create it within Adobe Illustrator, but i guess this gradient curves are an issue within SVG, it actualy doesn't support it.
select both "export text as curves"
that looks like crap :/
yeah, that's not good
it has this 90's vibe
maybe the exported stuff looks better
yes, i need to recreate the style in illustrator and check what it can do... 😦 that means... getting into subscription hell again... thanks adobe
or try inkscape
try to export in some format that inkscape supports to open
I had no luck with inkscape.
But meanwhile i found this https://www.textstudio.com/logo/2296/Css
It's the first time out found something nearly as i want it. It seems they do some heavy lifting with canvas and javascript here.
it outputs it as an image
true... but at least it is automated in some kind... but it's probably just impossible 😦 i should maybe just do some other layout tricks on the web