CSS is really powerful

weatherflow-icon

#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


#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.


#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).


#5


#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…


#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.

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+”>


#14

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