CSS is really powerful

1

http://wf.fsoft.com/wf.html

I was playing with CSS tonight and came up with the WeatherFlow icon. It’s close but far from perfect

5 Likes
2

Hello Gary!

If you want it in SVG format, just ask. I had to redo it for Weather Station :wink:

PS: ice on the cake, it is light enough to be “embedded” in the source of a base 64 image tag …

3

The idea is to create display graphics with no images. It’s remarkable what can be done with HTML and CSS. The display I created for WFArchive is 100% pure HTML and CSS. No need for any type of image which makes the code very light.

1 Like
4

It’s why I suggest base 64 embedded… That’s the deal. :slight_smile: Just pure HTML… No external resources, no css (hum, just inline css to set the width).

1 Like
5

2 Likes
6

And of course, perfect definition at every size :wink:

7

The only thing more powerful than CSS is…lawyers protecting a corporation’s trademarks/logos against unauthorized use.

Even though WF does not have the usual lawyer-speak section on their web site about corporate trademarks and authorized logo use, I would recommend that you have express written permission from their lawyers before using their logo in even a free/open-source package or web page.

I could bore you with a sad story about a charity event who had to re-print hundreds of t-shirts because a large corporation didn’t authorize the use of their logo…

1 Like
8

Yes, but that’s not pure html. You are loading the image data into a variable. You can do the same with gif, jpeg, png, tiff and every other format.

9

It’s why I’m using css… That’s the deal. :slight_smile: Just pure HTML… No external resources, no embedded images (hum, just styled css to set the size).

10

You’re way off topic. :slight_smile:

No need to bring gloom and doom.

11

I could tell you the story about the State of Wyoming that stole a photographer’s photo to use in their license plate.

12

You’re definitely right. Like css is not html…
And I don’t consider svg as image… Nevertheless, I know it’s a questionable point of view. :smile:

13

Okay, we will call them graphics. However, the web considers them an image. And I’m pretty sure you use the image tag to embed them in the code.

Screenshot_20181028-131620_Chrome
Screenshot_20181028-131620_Chrome1080×2220 232 KB

And, here is the page source and as you can see, it is clearly using the IMG tag and a base64 image data stream.

<img src=“data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0ibm9uZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgIHZpZXdCb3g9IjAgMCA5MDAgOTAwIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTU4MCwxNDUwKSBzY2FsZSgyLjYsLTIuNikiPjxwYXRoIHN0eWxlPSJmaWxsOiMxNDc2RDYiIGQ9Im0gODE5Ljc1NCw0MjQgYyAtMTcuMTYsMC42MDIgLTI3LjE2NCwtOC41NjIgLTI5LjQ2OSwtMTcuNDUzIC0yLjMwOCwtOC44OTUgNC43NzQsLTUuNTk4IDQuNzc0LC01LjU5OCAyNC41MzEsOS44NzkgMjcuMzMyLC0xMy4zNCAyNy4zMzIsLTEzLjM0IEMgODI4LjMxNiwzMzUuNzUgNzAzLjM1MiwyNzguNDUzIDcwMy4zNTIsMjc4LjQ1MyB2IC0wLjY1NiBjIDM2LjIyMiwyLjYzMyA5OC45NDksMjUuNjggMTI4Ljc1LDQ5Ljg4NyAyNy4zOSwyMi4yNSAzNS4yMzQsNDYuMjU3IDI4LjE1Niw2OC4zMjQgLTUuOTM4LDE4LjQ5NiAtMjEuNzM1LDI3LjMyNCAtNDAuNTA0LDI3Ljk5MiIvPjxwYXRoIHN0eWxlPSJmaWxsOiMxNDc2RDYiIGQ9Im0gODQxLjYyOSw0NTYuNTY2IGMgLTUuNzA3LDE3Ljc4MiAtMjAuODk5LDI2LjI3OCAtMzguOTQxLDI2LjkxNCAtMTYuNTA0LDAuNTgzIC0yNi4xMjIsLTguMjM0IC0yOC4zNCwtMTYuNzgxIC0yLjIxOSwtOC41NTEgNC41OTMsLTUuMzg2IDQuNTkzLC01LjM4NiAyMy41ODYsOS41MDMgMjYuMjc0LC0xMi44MjUgMjYuMjc0LC0xMi44MjUgNS43MDMsLTQ5Ljg2MyAtMTE0LjQ1MywtMTA0Ljk1MyAtMTE0LjQ1MywtMTA0Ljk1MyB2IC0wLjYzMyBjIDM0LjgyNCwyLjUzMiA5NS4xNDQsMjQuNjk2IDEyMy43OTcsNDcuOTY5IDI2LjMzNiwyMS4zODcgMzMuODc1LDQ0LjQ4MSAyNy4wNyw2NS42OTUiLz48L2c+PC9zdmc+”>

1 Like
14

Of course that’s how I do :slight_smile:
But I understand it’s out of your requirements…