CSS:Stealth

Stealth

For those times when browsing discretion is the better part of valor. The design is *cough* low key and the image hiding prevents embarassing moments

Two column format. Individual posts have a fixed height until hovered. On hovering, they will expand to show the entire available text (some feeds only show a post summary). Images remain completely hidden while a post is collapsed. When a post is expanded images are shown but with low opacity. Hover over an image to show it fully. Active images (where they act as a link) show with a red border. Normal images (not clickable) show with a blue border.

Hint: You can make a post active (and thus remain open even when not hovering) by Clicking and dragging either the title link, or a contained image or link. - Click on the link or image and hold the mouse button down. - Drag the mouse a short distance (you should see the "No" symbol) - Release the mouse button

Feel free to remix, reuse, and recycle as you wish.

Download Zipped File

/* Stealth

For those times when browsing discretion is the better part of valor. The design is *cough* low key and the image hiding prevents embarassing moments (even work-safe/appropriate sites might contain an image that could be deemed "inappropriate" by others).

Adapted from various sheets by Clive Rowe www.cliverowe.com

Two column format. Individual posts have a fixed height until hovered. On hovering, they will expand to show the entire available text (some feeds only show a post summary). Images remain completely hidden while a post is collapsed. When a post is expanded images are shown but with low opacity. Hover over an image to show it fully. Active images (where they act as a link) show with a red border. Normal images (not clickable) show with a blue border.

Hint: You can make a post active (and thus remain open even when not hovering) by Clicking and dragging either the title link, or a contained image or link. - Click on the link or image and hold the mouse button down. - Drag the mouse a short distance (you should see the "No" symbol) - Release the mouse button

Feel free to remix, reuse, and recycle as you wish.

html { background-color: #fff; } body { margin: 0 5%; color: #333; font-family: "Verdana", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif; }

a:link		{ text-decoration: underline; color: #000; } a:visited	{ text-decoration: underline; color: #666; } a:hover		{ text-decoration: none; } a:active	{ text-decoration: none; }

img {border: 2px solid #000; opacity:.05;} img:hover {opacity: 1; border: 2px solid #00f;} /* Set the intensity of hovered images */ img:active {opacity: 1;border: 2px solid #666;} /* Set the intensity of active (clicked) images */

acronym {cursor: help}

p.item-desc a:link { color: #ccc; }

h1 { color: #333; }

{   content: "Newsfeed:"; color: #24446b; margin-right: 5px; border-color: #24446b; border-top: 2px solid #24446b; border-bottom: 2px solid #24446b; }
 * 1) rss-header h1:before

margin: 1%; padding: 1%; background-color: #eee; color: #000; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-bottom: 1px solid #222; border-right: 1px solid #222; border-radius: 0.5em; }	color: #000; text-decoration: none; }
 * 1) rss-header {
 * 1) rss-header a {

margin: 0; margin-left: 10px; }
 * 1) rss-title {

color: #666; font-weight: bold; font-size: .8em; margin: 0; padding: 1%; margin-left: 10px; }
 * 1) rss-desc {

div.item { margin: 1%; padding: 1%; background: #fff; float:left; width: 45%; border: 1px solid #333; margin: 0px 0px 8px 2%; padding: 0px; border-radius: 0.5em; max-height: 20ex; /* height of each post's 'box'. Set to none to see everything (remember: not all feeds show the entire post) */ overflow:hidden; /*Set to Auto or Scroll if you would prefer scroll bars instead of changing box height */ clear:left; }

/*Post 'box' will expand when hovered */ div.item:hover, div.item:active { height: auto; max-height: none; }

/*Hides images in post summary until hovered */ div.item img { display:none; } /* Shows previously hidden images when you hover over a post using the img{... settings above */ div.item:hover img, div.item:active img { display:inherit; }

div.item:nth-of-type(2n+1) { clear:right; }

h2.item-title { font-size: .9em; font-weight: normal; margin: 0; padding: 1%; clear: both; color: #444; background: #e3e3e3; border-bottom: 1px dotted #999; border-radius: 0.5em 0.5em 0 0; }

h2.item-title a { text-decoration: none; font-weight: bold; color:#333; } h2.item-title a:visited { color: #777; }

h2.item-title a:link:hover, h2.item-title a:link:active { text-decoration: underline; }

h2.item-title a:visited:hover, h2.item-title a:visited:active { text-decoration: underline; }

span.item-ordinal { font-family: "Times New Roman", serif; font-size: 1.2em; background: #24446b; color: #fff; font-weight: bold; margin: 5px .5em 1em 0; padding: 0 5px 0 5px; border-radius: 0.5em; }

div.item-desc { font-size: .8em; margin: 0; padding: 1%; }

div.item-desc a { text-decoration: underline; } div.item-desc a:hover { text-decoration: none; }

div.item-pubDate { font-size: x-small; color: #999; padding: 1%; }

div.item-technorati { float: right; clear: both; text-align: right; padding-right: 5px; }

div.item-desc img { max-width: 97%; height: auto; margin: 0.2em .5em .2em .2em; padding: 1px; } div.item-desc a img { border: 2px solid #000; } div.item-desc a:hover img { border: 2px solid #f00; }

div.item-footer { background: #eee; border: 1px dotted #999; margin: 10px; padding: 10px; clear: both; }

div.item-category { font-size: .65em; font-family: ariel; color: #666; display: none; } div.item-author { font-family: ariel; color: #444; }

div.item-pubDate { color: #24446b; }

blockquote { background-color: #deeeff; border-right: 2px solid #b8d8df; border-bottom: 2px solid #b8d8df; padding: 5px; }

blockquote[cite]:after { color: #008; content: "Quote: " attr(cite); display: block; border-top: 1px solid #999; margin: 0.5em 0 0 0; padding: 0.5em 0 0; font-size: .8em; text-align: right; }

blockquote P:first-letter, cite P:first-letter { font-weight: bold; } blockquote blockquote { background-color: #eeeeff; border-right: 2px solid #8888aa; border-bottom: 2px solid #888899; padding: 5px; }