Streaming live at 10am (PST)

Relationship of sections; containers; divs, etc

In browsing the forum this weekend, I saw something either in the forum or a link from the forum that was a great graphic that was mostly yellow/gold in color (visual memory); and it showed how a section looked; a container in a section, a div, etc. I recall thinking that was a great visual guide to understand and I swear I bookmarked it - but now I can’t find it. Does this sound familiar to anyone?

1 Like

I did something a few month ago that mildly applies to your description… shoulda called it “Hello I’m a DIV!”

That’s it!! Thanks so much! I LOVE your sandbox!! I would love to create the same - if we could only ‘copy / paste’ elements from one WF site to another - it’d be so much more efficient.

Thanks again - this is a GREAT resource!

One question Vincent - I don’t understand this page: All of the images are the same. I’ve clicked / hovered, etc - and don’t get what this page is showing. Is something broken?

What browser are you using? Here is a screen capture with Chrome and Safari

FYI you can go on my profile, on the sandbox presentation (site) page and duplicate the whole site to play with, if you want.

Interesting - on IE - all of the images are the same. But now I see it in Chrome. I wonder why IE is not responsive? :frowning: That makes it tough if you are using a particular style to convey something in particular and it’s not there at all on a certain browser. Would be nice to have a ‘browser to browser’ comparison on what is and isn’t supported.

For the blur for example, the code is this:

    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
  -ms-filter: blur(1px);
    -o-filter: blur(1px);
    filter: blur(1px);

It’s supposed to work in IE, but it doesn’t. It doesn either in Firefox and Opera. It works for:

Chrome 18+
Chrome for Android 25+
Safari 6+
iOS Safari 6+
Blackberry browser 10+

You can make it work in IE with SVG filters instead.

SVG would be:

   <svg version="1.1" xmlns="">
       <filter id="blur">
           <feGaussianBlur stdDeviation="3" />

and CSS:

filter: blur(3px); 
-webkit-filter: blur(3px); 
-moz-filter: blur(3px);
-o-filter: blur(3px); 
-ms-filter: blur(3px);
filter: url(blur.svg#blur);

There also are workarounds like using motion blur filter for IE such as:

filter:blur(add = 0, direction = 300, strength = 10);

The link is dead! Can you re-post the image? It’s a shame that so much of the webflow content is disjointed and missing!

So much? A shame? This is my sandbox and by definition it changes all the time. Other public links to projects, also by definition, expire quite quickly.

I checked, I’ll put the Blending modes page back online soon, it’s been reworked a lot :smile:

1 Like