{"id":133,"date":"2010-07-10T00:38:57","date_gmt":"2010-07-09T22:38:57","guid":{"rendered":"http:\/\/www.tapper-ware.net\/blog\/?p=133"},"modified":"2010-07-14T19:13:10","modified_gmt":"2010-07-14T17:13:10","slug":"dock-style-zooming-icon-bar-in-pure-htmlcss","status":"publish","type":"post","link":"https:\/\/www.tapper-ware.net\/blog\/dock-style-zooming-icon-bar-in-pure-htmlcss\/","title":{"rendered":"Dock-style zooming icon bar in pure HTML+CSS"},"content":{"rendered":"<p><em>Update: The initial post mentioned transforms, which were used in the initial version, but later replaced by simple absolute positioning.<\/em><\/p>\n<p><video autoplay=\"autoplay\" loop=\"loop\" onended=\"this.play();\"><source src=\"\/data\/video\/embed\/bubblebar.webm\" type=\"video\/webm\" \/><source src=\"\/data\/video\/embed\/bubblebar.ogv\" type=\"video\/ogg\" \/><source src=\"\/data\/video\/embed\/bubblebar.mp4\" type=\"video\/mp4\" \/><source src=\"\/data\/video\/embed\/bubblebar.asf\" type=\"video\/x-ms-asf\" \/><object width=\"640\" height=\"180\" classid=\"CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95\"><param name=\"filename\" value=\"\/data\/video\/embed\/bubblebar.asf\"><param name=\"Showcontrols\" value=\"False\"><param name=\"autoStart\" value=\"True\"><param name=\"loop\" value=\"True\"><img decoding=\"async\" src=\"\/data\/video\/embed\/bubblebar.gif\"\/><\/object><\/video><\/p>\n<p><a href=\"\/data\/devel\/web\/apps\/CSS.WizBar\/index.xhtml\">Demo<\/a><\/p>\n<p>An OSX-style icon bar in pure CSS, without any Javascript. Not much to say except: Enjoy \ud83d\ude42<\/p>\n<p>This sample uses CSS transitions, meaning that it requires a Firefox 4 preview build.<\/p>\n<p>Webkit manages to do &#8230; something (Webkit tries to do some transitions in sequence instead of simultanously). Opera apparently has no support for pointer-events in HTML yet.<\/p>\n<p>Try to disable the stylesheet (View\/Page Style\/No Style in Firefox): The document remains usable. Ugly, but usable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: The initial post mentioned transforms, which were used in the initial version, but later replaced by simple absolute positioning. Demo An OSX-style icon bar in pure CSS, without any Javascript. Not much to say except: Enjoy \ud83d\ude42 This sample uses CSS transitions, meaning that it requires a Firefox 4 preview build. Webkit manages to &hellip; <a href=\"https:\/\/www.tapper-ware.net\/blog\/dock-style-zooming-icon-bar-in-pure-htmlcss\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Dock-style zooming icon bar in pure HTML+CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/133"}],"collection":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/comments?post=133"}],"version-history":[{"count":7,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/133\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}