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: 20093
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Logo - in CSS

Post by Mick » 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?
"The more connected we get the more alone we become" - Kyle Broflovski

There are no ‘threads’ in phpBB, they are topics.

User avatar
KevC
Support Team Member
Support Team Member
Posts: 68307
Joined: Fri Jun 04, 2004 10:44 am
Location: Oxford, UK
Contact:

Re: Logo - in CSS

Post by KevC » Sat Dec 02, 2017 4:12 pm

I'm curious as to what the point is over just making a jpg as usual.
-:|:- Support Request Template -:|:-
Image
Cheap UK Hosting
"In the land of the blind the little green bloke with no pupils is king - init!"

User avatar
david63
Jr. Extension Validator
Posts: 14723
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Logo - in CSS

Post by david63 » Sat Dec 02, 2017 8:59 pm

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!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
Mick
Support Team Member
Support Team Member
Posts: 20093
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Logo - in CSS

Post by Mick » Sat Dec 02, 2017 10:09 pm

ZNL wrote:
Sat Dec 02, 2017 8:25 pm
if 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

There are no ‘threads’ in phpBB, they are topics.

User avatar
Christian 2.0
Former Team Member
Posts: 4443
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Logo - in CSS

Post by Christian 2.0 » Sat Dec 02, 2017 11:06 pm

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: 20093
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Logo - in CSS

Post by Mick » Sun Dec 03, 2017 9:52 am

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 pm
I'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

There are no ‘threads’ in phpBB, they are topics.

User avatar
Christian 2.0
Former Team Member
Posts: 4443
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Logo - in CSS

Post by Christian 2.0 » Sun Dec 03, 2017 3:44 pm

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
Infrastructure Team Member
Infrastructure Team Member
Posts: 721
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Logo - in CSS

Post by Hanakin » Mon Dec 04, 2017 11:16 am

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
Infrastructure Team Member
Infrastructure Team Member
Posts: 721
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Logo - in CSS

Post by Hanakin » 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/

User avatar
Raul [ThE KuKa]
Jr. Extension Validator
Posts: 4621
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Contact:

Re: Logo - in CSS

Post by Raul [ThE KuKa] » Sun Dec 10, 2017 6:11 pm

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. ;)
If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate with Image
phpBB International Support Team (Spanish - Español) :flag_es: Online Since 2003 - 15th anniversary
🎨phpBB Professional Premium Themes🔥
Author Translations (Spanish - Spain) :two_hearts:

:warning: I don't support those without the copyright Spanish translation. :warning:

Post Reply

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

Who is online

Users browsing this forum: zorro100 and 5 guests