CSS3 visual guide … as the CSS Visual Editor lacks of some CSS properties

Hi there,

my questions is rooted in my post about the missing CSS filter property in the visual editor of Pinegrow … hoping that some sunny day this feature will appear :wink: … I just thought about what the need of this feature is really all about, what I and maybe other beginners need – people who start designing & coding in and with HMTL 5 & CSS 3.

Well, the problem is that from a desktop & backend developer perspective CSS is somehow “type less” – its properties have no explicit “enveloping structure” that leads to the purpose and the effect of the property (or to which HTML elements it may be applied).

CSS properties are just free floating around – there are no CSS parent-objects that embed only the properties that belong to them, like e.g. for a border object and border-width property.

Some CSS properties guide their effect & “target objective” by the names respectively the prefixes in a dashed notation (like border-radius), but that is not consistent in every case, e.g. border-collapse can be used in tables too.

This is quite confusing for a foreigner in the new lands of HTML & CSS … so what about a visual map of that mysterious landscape :wink:.

I searched the web for CSS3 cheat sheets and visual guides, but I did not find something that seems to be complete (e.g. https://websitesetup.org/css3-cheat-sheet/ missing the filter property) and as I am a newbie, I cannot decide if its complete or not. Pure lists of all CCS 3 Properties can also be found in several places (e.g. with some top level structure https://tympanus.net/codrops/css_reference ), but then context & target of use is missing.

Having a complete CSS3 cheat sheet that visually guides a newbie would be great – or having a software or mobile app, which brings the “loosely CSS3 properties” into context and makes their use visible, maybe in an observable & editable action would be awesome to have … this could fill the gap for the missing CSS properties in the visual editor of Pinegrow … because typing the properties manually is not the problem, but knowing them & their use is :wink:.

Is there anything like this “out there” … suggestions & links are very much appreciated.

cheers
gecko

The Codrops link you posted seems pretty good to me, usage, examples, etc.,

MDN & w3schools have exhaustive references with detailed explanations and example usage.

Regardless of what you choose to use learning will always take time and effort. Take time to make your own examples of usage cases to understand each concerning the ones you have trouble understanding.

You may also find these helpful:

Thanks @Pinegrow_User,

for your links and advice … and of course learning is a journey and hence it will take time :wink:, as it’s the game of life in 3D – if you move from one state of knowledge to another one by consuming (read or view) “materialized” resources, you travel through 3D space and this will lead to the experience of time, and to a distinctive degree of effort :wink:.

The question though – is there a knowing guide who is capable of leading the voyager through the endless fields of know-how resources by means of clear structure & purpose, or not.

Yes, there are website and exhausted lists of CSS properties, which are explained to certain degrees and sometime with examples, but I did not found a structured approaches that embrace “all that you can do with CSS” (at least what is was meant to be used for – I’m not talking about hacks :wink:) and breaks it down from the abstract to concrete with purpose and use-case in mind (which is reflected in some kind of overview structure like a table of contents) … leaving all the wonders that can be created by JavaScript aside.

But okay, that’s how it seems the way it is … maybe this is because “pure CSS 3” itself & alone is less important than the “right” JavaScript libraries and frameworks, which use CSS 3 to a certain degree inside and also abstract from it … maybe most website developers have went the hard way to learn CSS3 by experimentation, try & error or just rely on JavaScript frameworks and libraries to get their job done (which is also reasonable) and hence there are no “structured focus” resources on the web.

So I changed my mind and returned to the “good all days way of learning” :wink: and bought myself a book – these bible kind of thing … although I already saw from the table of content that not every aspect of CCS 3 is covered, but what so ever – I got my self a knowing guide and let’s see what the journey will be.

cheers
gecko

You’re welcome @gecko good luck on your journey.