{"id":3398,"date":"2009-08-12T10:50:51","date_gmt":"2009-08-12T17:50:51","guid":{"rendered":"http:\/\/css-tricks.com\/?p=3398"},"modified":"2015-02-25T19:56:21","modified_gmt":"2015-02-26T02:56:21","slug":"68-think-geek-background-fade-technique","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/68-think-geek-background-fade-technique\/","title":{"rendered":"#68: Think Geek Background Fade Technique"},"content":{"rendered":"
This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then flop them out for our own.<\/p>\n
Links from Video:<\/strong><\/p>\n This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":5184,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-only-image-preloading\/","url_meta":{"origin":3398,"position":0},"title":"CSS Only Image Preloading","date":"December 30, 2009","format":false,"excerpt":"One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in the CSS for the :hover state, that image will not load until the first :hover event\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13593,"url":"https:\/\/css-tricks.com\/snippets\/css\/stack-of-paper\/","url_meta":{"origin":3398,"position":1},"title":"Stacked Paper Effect","date":"August 15, 2011","format":false,"excerpt":"A popular design technique is to create a content container that looks like a sheet of paper and to stack other sheets of paper below it, adding a layered or three-dimensional style. We can create this effect using straight up CSS, but there are multiple types of stacked paper designs\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2172,"url":"https:\/\/css-tricks.com\/video-screencasts\/52-building-a-print-stylesheet\/","url_meta":{"origin":3398,"position":2},"title":"#52: Building a Print Stylesheet","date":"February 5, 2009","format":false,"excerpt":"My technique for building print stylesheets goes like this. 1) Start from scratch 2) Leave most defaults alone 2) Eliminate every thing on the page you don't need with display: none; 4) Put page-breaks where appropriate. Of course, I spend far too long explaining all this, but you get to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18125,"url":"https:\/\/css-tricks.com\/lodge\/v10\/013-cssing-the-navigation-structure\/","url_meta":{"origin":3398,"position":3},"title":"#013: CSSing the Navigation Structure","date":"September 9, 2012","format":false,"excerpt":"We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page. The navigation blocks, at the widest width, are 1\/8 the width of nav parent. We set them to inline-block\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9431,"url":"https:\/\/css-tricks.com\/snippets\/css\/ribbon\/","url_meta":{"origin":3398,"position":4},"title":"Ribbon","date":"May 15, 2011","format":false,"excerpt":"\n
Everybody loves ribbons<\/strong> <\/h1> .ribbon { font-size: 16px !important; \/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play\u2026","rel":"","context":"With 67 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3839,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/target-only-external-links\/","url_meta":{"origin":3398,"position":5},"title":"Target Only External Links","date":"September 4, 2009","format":false,"excerpt":"Technique #1 $('a').filter(function() { return this.hostname && this.hostname !== location.hostname; }).addClass(\"external\"); Technique #2 $.expr[':'].external = function(obj) { return !obj.href.match(\/^mailto\\:\/) && (obj.hostname != location.hostname); }; $('a:external').addClass('external'); Technique #3 $('a:not([href^=\"http:\/\/your-website.com\"]):not([href^=\"#\"]):not([href^=\"\/\"])').addClass('external'); Technique #4 $('a').each(function() { var a = new RegExp('\/' + window.location.host + '\/'); if (!a.test(this.href)) { \/\/ This is an external link\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3398"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3398"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3398\/revisions"}],"predecessor-version":[{"id":155768,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3398\/revisions\/155768"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3398"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}