htmlcss beta
Puzzled at how a particular site uses its DIVs and SPANs to achieve its layout?

htmlcss inserts a page's html style tags into the viewable text, for easier understanding (and duplication) of the source site - you can see what tags are causing what behavior

Click 'See htmlcss' at the right for a live demo - htmlcss is what adds the orange bits

This page's look was lifted from metafilter in 30 seconds as proof of concept
(hey when DO i get a mefi account, Matt?)

Tips
  • don't forget tags defined in the css that affect the whole page: body, a.*, tables, etc
  • this tool is meant for education, not wholesale theft of other folks' design work
  • currently any sort of internal htmlcss problem results in a blank page
  • htmlcss relies on things like <head> tags existing in the source
  • htmlcss integrates slayeroffice's modi, a nifty bookmarklet that adds highlights and 'tooltips' to html containers as you mouse-over them (though htmlcss's additions to the page confuse modi somewhat)
  • here's our bookmarklet: htmlcss


For custom work, contact Santa Cruz Tech