The best way to create this logo in CSS

[alexmccabe]

Hey guys, I have a logo and I was wondering the best way to create it in CSS. It’s really easy if you have a fixed width site, but it will be responsive. If I have to I would resort to using an image, but I would rather not.

Here is the logo.

I have started it, but I am kinda stuck. I don’t need full guidance, just a general direction. I was thinking maybe it would be possible with SVG?

CodePen linkage

Also if anyone has any ideas as to how to get text gradient in other browsers, that would be perfect :)

[Paulie_D]

If I have to I would resort to using an image, but I would rather not.

Why? An image is a perfectly valid choice and usually the right one.

There really isn’t any need to complicate matters. Images can be made responsive and it’s not even hard.

An SVG is likely to be your best option if you really want to do this with HTML/CSS so fire up Illustrator and export as an SVG object.

As far as I know, text gradients are supported in SVG but you would have to check.

[alexmccabe]

@Paulie_D more an experiment to be honest. I know it can be done, I just have to figure out how and I was hoping for directions. It has been created in a program called Sketch, so it is already vector.

I’ve tried playing with the text gradients in SVG but it seems to be very hard. I’ll have to keep at it. I also tried using Canvas, but you can’t adjust letter spacing.

Why do I have to make everything so complicated…

[Author]

Posts