Relationship of sections; containers; divs, etc

Design help Design inspiration
1

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
2

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

http://sab.webflow.com/html/nested-siblings

3

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!

4

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

5

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

http://vincent.polenordstudio.fr/snap//testUntitled_-_My_Sandbox_2015-01-06_18-42-27.jpg

6

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

7

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.

8

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="http://www.w3.org/2000/svg">
       <filter id="blur">
           <feGaussianBlur stdDeviation="3" />
       </filter>
    </svg>

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);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

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

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

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!

10

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.

11

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

1 Like