: How is mozilla.org homepage design acheived? https://www.mozilla.org/en-US/ Can anyone comment how the below is acheived? 1) the sliding image album in the homepage 2) Shadow behind thumbnails in

@Twilah924

A good source I often use if I want to find out the technologies used to create a webpage/website is BuiltWith.com -- it's not 100% perfect but it at least gives you a good headstart.

Vote Up Vote Down

@Turnbaugh909

If we are looking at the same thing. I think:

1) It is jquery.malsup.com/cycle2/api/ You can see by inspect the event listeners on any tab elements.
From there you can see lots of registered listener with prefix
cycle-* google these event names since it likely to be in the documentation. And you will get jquery.malsup.com/cycle2/api/
2) Those are box-shadow
0 0 16px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.5)
You can inspect it directly from the browser.

Vote Up Vote Down

@Murray976

You can examine the source code of any page to discover what is driving it.

1) It's custom javascript the page calls "Tabzilla" A link to the javascript can be acquired by examining the source code of the home page.

2) The shadows are simply CSS3 box-shadow properties.

As for "step-by-step instructions" that's nearly impossible here. There's simply not enough room to explain javascript and CSS and no one here knows anything about your current level of proficiency. You would do better by seeking an online course or educational program (perhaps www.lynda.com) or tutorials to learn CSS and javascript.

Vote Up Vote Down