Logo - in CSS

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26515
Joined: Fri Aug 29, 2008 9:49 am

Re: Logo - in CSS

Post by Mick »

You mean you want to draw a pic in CSS or you want to use fancy text or whatever?
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel
User avatar
KevC
Support Team Member
Support Team Member
Posts: 72351
Joined: Fri Jun 04, 2004 10:44 am
Location: Oxford, UK
Contact:

Re: Logo - in CSS

Post by KevC »

I'm curious as to what the point is over just making a jpg as usual.
-:|:- Support Request Template -:|:-
Image
"Step up to red alert. Sir, are you absolutely sure? It does mean changing the bulb"
User avatar
david63
Registered User
Posts: 20646
Joined: Thu Dec 19, 2002 8:08 am

Re: Logo - in CSS

Post by david63 »

Why re-invent the wheel?

I am no expert in this but I suspect that rendering an image created in .css will take longer and use more resources than loading an optimised image file.
David
Remember: You only know what you know and - you don't know what you don't know!

I now no longer support any of my extensions but they will start to become available here
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26515
Joined: Fri Aug 29, 2008 9:49 am

Re: Logo - in CSS

Post by Mick »

ZNL wrote: Sat Dec 02, 2017 8:25 pmif it could be created completly in css.
It can’t and that isn’t the job of css. What sort of benefit would you expect from an image created in css (if it were possible with the memory and time available) over a little gif of 34Kb? If it were 34Mb it would probably load quicker.
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Logo - in CSS

Post by PlanetStyles.net »

Mick wrote: Sat Dec 02, 2017 10:09 pm What sort of benefit would you expect from an image created in css
KevC wrote: Sat Dec 02, 2017 4:12 pm I'm curious as to what the point is over just making a jpg as usual.
Presumably if the OP is looking for a text-based logo with an effect they linked to (eg: Shadow, 3D, emboss etc),using pure CSS will be quicker to process, but also has unrivalled retina support. It's lots of hassle making logo images look sharp and crisp across all devices, often needing multiple images, an .svg logo (which is beyond the skill level of many), or complex code to resize a single image. A pure CSS text-based logo requires minimal code and will appear crisp and sharp on any device and any resolution.

ZNL wrote: Sat Dec 02, 2017 9:21 am Is it possible, create logo completly in CSS instead of pic?
I'm sorry for the negative and unhelpful replies you've received - it seems being toxic and nonconstructive is still a favoured pass-time around here :roll:

To answer your question though, what you're trying to achieve definitely is possible :) . Out of the examples you linked to, which would you like to use as your board logo?

Thanks!
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26515
Joined: Fri Aug 29, 2008 9:49 am

Re: Logo - in CSS

Post by Mick »

Mick wrote: Sat Dec 02, 2017 3:30 pm You mean you want to draw a pic in CSS or you want to use fancy text or whatever?
Christian 2.0 wrote: Sat Dec 02, 2017 11:06 pmI'm sorry for the negative and unhelpful replies you've received
I don’t see anything toxic or unhelpful. The OP asked a question that wasn’t clear, not to me anyway, the question was asked and, eventually we got to a point where we knew more or less what he wanted.
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Logo - in CSS

Post by PlanetStyles.net »

ZNL wrote: Sun Dec 03, 2017 8:04 am Exactly... I have logo of cca 200 × 40 and if I zoom page, then it is just zoomed like picture, not recalculated...
It would be nice, to create logo in svg (I can do it with Inkscape), but maybe svg isn't supported on every end user browser(?)
While css will be supported in every browser. It's a clean solution.

I'll rather attache pictures of my logo...

Transparent logo:

1.png


This is how it looks on my forum:

2.png
Sweet! That's definitely possible to recreate in CSS :)

Last of all, can you let me know which style you're using? Thanks!
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Logo - in CSS

Post by Hanakin »

svg works in every browser and in fact we will be switching heavily to it in future versions. but the method of inclusion is the thing to look out for as not all browsers support some methods. for a logo I recommend using inline svg though as its unlikely to change very often.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Logo - in CSS

Post by Hanakin »

svg is code. I would recommend using something like https://jakearchibald.github.io/svgomg/ on the svg file first. Then use this as a reference for all your svg needs https://css-tricks.com/lodge/svg/
User avatar
Raul [ThE KuKa]
Style Customisations
Style Customisations
Posts: 11073
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Contact:

Re: Logo - in CSS

Post by Raul [ThE KuKa] »

Hanakin wrote: Mon Dec 04, 2017 10:25 pm svg is code. I would recommend using something like https://jakearchibald.github.io/svgomg/ on the svg file first. Then use this as a reference for all your svg needs https://css-tricks.com/lodge/svg/
Off Topic alert... :mrgreen:

Thanks for links Michael. ;)
All unsolicited PMs will be ignored.
:warning: Knowledge Base | Documentation | Board rules | phpBB Styles Rules & Policies | Styles Queue Stats :warning:


If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate.
:flag_es: phpBB Spain - Online Since 2003 :heart:


Post Reply

Return to “[3.2.x] Styles Support & Discussion”