Topographical web page view

Date: 07 Apr, 2009
Posted by: admin
In: internet, web design & development

Bookmark and Share

Hide content and show structure using an overriding stylesheet – it’s kinda like a reverse “reset” stylesheet – this was inspired by the Firefox Webdeveloper Toolbar by Chris Pederick but is intended to create a more obvious structure and to show off user interaction elements.

  • form parts like textarea and input are green
  • links are blue
  • headers are red (#A00) with H1 showing the brightest (#F00)
  • img’s caused a problem as they can’t be converted to a block of color with only CSS but they are faded out and given a light-grey background
  • textual container elements are purple

Well you get the idea.

You can simply paste the CSS in to the “Embedded Styles” sheet in the Webdeveloper toolbar.

/* =================================
CSS topological display stylesheet
author: pbhj
link: https://alicious.com/
license: (c) 2009, CC-BY-SA
================================= */

* { color:transparent!important; background-color:transparent!important; }

div > div { border:1px #000 solid!important; background:#111!important; color:#111!important; }
div > div > div { border:1px #222 solid!important; background:#333!important; color:#333!important; }
div > div > div > div { border:1px #444 solid!important; background:#555!important; color:#555!important; }

p, blockquote, pre, td {color:#303!important; background:#303!important; border-color:#636!important;}

span, dd, dt, li, strong, span, em { color:#000!important; background:#000!important; border-color:#AAA!important;}

a, a:hover { color:#33F!important; background:#33F!important; border-color:#66F!important; }

textarea, input, select, button { color:#0c0!important; background:#0c0!important; border-color:#030!important;}

h2,h3,h4,h5 { display:block!important; color:#A00!important; background:#A00!important; border-color:#600!important;  }

h1 { display:block!important; color:#F00!important; background:#F00!important; border-color:#300!important;  }

img { background:#EEE!important; color:#EEE!important; opacity:0.2!important; }

If I get chance I’d like to rework this as a bookmarklet or more easily applied script.

Sorry, comments are closed.


About

Flapjacktastic is just a random collection of musings, hints&tips, notes, information ... a collection of stuff really that's overflowed from the brain of this husband, father, potter, business-man, geek ...

past posts