talk bubble modules

tereska · Sep 7, 2009 · 6a5a277 · 6a5a277
1 parent e67db49
commit 6a5a277
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 8 deletions.
diff --git a/css/content.css b/css/content.css
@@ -4,9 +4,7 @@ body{font-family:"Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif;}
 h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}
 h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
 pre{margin: 10px;}
-table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl,
-ul h1,ul h2,ul h3, ul h4, ul h5, ul h6, ul p, ul ul, ul ol, ul dl,
-ol h1,ol h2,ol h3, ol h4, ol h5, ol h6, ol p, ol ul, ol ol, ol dl {padding:0;}
+table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}
 /* ====== Elements ====== */
 img{display:block;}
 em{font-style: italic;}

diff --git a/css/grids.css b/css/grids.css
@@ -1,6 +1,6 @@
 /* **************** GRIDS ***************** */
-.line, .lastUnit {overflow: auto;_overflow:visible;_zoom:1; }
-.unit{float:left;_zoom:1;}
+.line, .lastUnit {overflow: hidden;_overflow:visible;_zoom:1; }
+.unit{float:left;/*_zoom:1;*/}
 .size1of1{float:none;}
 .size1of2{width:50%;}
 .size1of3{width:33.33333%;}

diff --git a/css/mod.css b/css/mod.css
@@ -6,7 +6,7 @@ version: 0.2
 /* **************** BLOCK STRUCTURES ***************** */
 /* mod */
 .mod{margin:10px;}
-.mod .inner{background: url(skin/transparent.png) repeat left top;}
+.mod .inner{/*background: url(skin/transparent.png) repeat left top;*/}
 .hd,.bd,.ft{overflow:hidden;_overflow:visible; _zoom:1;}
 .inner{position:relative;}
 b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}

diff --git a/css/talk.css b/css/talk.css
@@ -0,0 +1,20 @@
+/* **************** TALK BUBBLE ***************** */
+.bubble{overflow:hidden;_zoom:1;margin:10px;}
+.bubble b b{position:absolute;height:0;width:0;border: solid 7px transparent;_border: 7px solid #fff;}
+.bubble .bottom{visibility:hidden;}
+/* top bubbles */
+.bubbleTop .inner{margin-top:7px;}
+.bubbleTop b b{top:0;left:10px;border-top-style:none;}
+/* left bubbles */
+.bubbleLeft .inner{margin-left:7px;}
+.bubbleLeft b b{top:10px;left:0;border-left-style:none;}
+/* right bubbles */
+.bubbleRight .inner{margin-right:7px;}
+.bubbleRight b b{top:10px;right:0;border-right-style:none;}
+/* bottom bubbles */
+.bubbleBottom .inner{margin-bottom:7px;}
+.bubbleBottom b b{bottom:0;left:10px;border-bottom-style:none;}
+.bubbleBottom .bottom{visibility:visible;}
+/* extensions (swaps alignment of talk bubble) */
+.bubbleHorizontalExt b b{top:auto; bottom:10px;visibility:visible;} /* apply to bubbleLeft or bubbleRight */
+.bubbleVerticalExt b b{right:10px;left:auto;} /* apply to bubbleTop or bubbleBottom */
diff --git a/css/talk_skins.css b/css/talk_skins.css
@@ -0,0 +1,14 @@
+/* yowza (extends bubbleTop) */
+.yowza .inner{background-color:#d4494f;}
+.yowza b b{border-bottom-color:#d4494f;}
+/* lol (extends bubbleLeft) */
+.lol .inner{background-color:#845B4E;}
+.lol b b{border-right-color:#845B4E;}
+/* meep (extends bubbleRight) */
+.meep .inner{background-color:#6cc6c6;}
+.meep b b{border-left-color:#6cc6c6;}
+/* yoyo (extends bubbleBottom) */
+.yoyo .inner{background-color:#52a583;}
+.yoyo b b{border-top-color:#52a583;}
+/* header */
+.fire, .fire *{color: #000; font-size:18px; border-bottom: 1px dashed #fff;}
diff --git a/css/template.css b/css/template.css
@@ -1,8 +1,8 @@
 /* **************** TEMPLATE ***************** */
 /* ====== Page Head, Body, and Foot ====== */
-body{_text-align:center;}/* IE5.5 */
+body{/*_text-align:center;*/}/* IE5.5 */
 .body{overflow:hidden; _overflow:visible; _zoom:1;}
-.page{margin: 0 auto; width: 950px;_text-align:left;} /* wraps other template elems to set width */ /* text-align IE5.5 */
+.page{margin: 0 auto; width: 950px;/*_text-align:left;*/} /* wraps other template elems to set width */ /* text-align IE5.5 */
 /* "old school" and "liquid" extend page to allow for different page widths */
 .oldSchool{width:750px;}
 .gs960{width:960px;}

diff --git a/talk.html b/talk.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Talk Bubbles</title>
+<link rel="stylesheet" type="text/css" media="all"  href="css/libraries.css" />
+<link rel="stylesheet" type="text/css" media="all"  href="css/template.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/grids.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/content.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/mod.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/mod_skins.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/talk.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/talk_skins.css" />
+<!--<link rel="stylesheet" type="text/css" media="all" href="css/mod_debug.css" />
+--></head>
+<body>
+<div class="page">
+
+	<h1>Talk Bubbles</h1>
+	<div class="line">
+		<div class=" unit size1of4">
+			<div class="bubble bubbleTop yowza"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
+				<div class="inner">
+					<div class="hd fire">
+						<h3>yowza</h3>
+					</div>
+					<div class="bd">
+						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>
+		</div>
+		<div class=" unit size1of4">
+			<div class="bubble bubbleLeft lol"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
+				<div class="inner">
+					<div class="hd fire">
+						<h3>lol</h3>
+					</div>
+					<div class="bd">
+						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>
+		</div>
+		<div class=" unit size1of4">
+			<div class="bubble bubbleRight meep"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
+				<div class="inner">
+					<div class="hd fire">
+						<h3>meep</h3>
+					</div>
+					<div class="bd">
+						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>
+		</div>
+		<div class=" unit size1of4 lastUnit">
+			<div class="bubble bubbleBottom yoyo"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
+				<div class="inner">
+					<div class="hd fire">
+						<h3>Yoyo</h3>
+					</div>
+					<div class="bd">
+						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>
+		</div>
+	</div>
+	<h2>Extending the talk bubbles</h2>
+	<div class="line">
+		<div class=" unit size1of4">
+			<div class="bubble bubbleTop yowza bubbleVerticalExt"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
+				<div class="inner">
+					<div class="hd fire">
+						<h3>yowza + bubbleVerticalExt</h3>
+					</div>
+					<div class="bd">
+						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>
+		</div>
+		<div class=" unit size1of4">
+			<div class="bubble bubbleLeft lol bubbleHorizontalExt"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
+				<div class="inner">
+					<div class="hd fire">
+						<h3>lol + bubbleHorizontalExt</h3>
+					</div>
+					<div class="bd">
+						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>
+		</div>
+		<div class=" unit size1of4">
+			<div class="bubble bubbleRight meep bubbleHorizontalExt"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
+				<div class="inner">
+					<div class="hd fire">
+						<h3>meep + bubbleHorizontalExt</h3>
+					</div>
+					<div class="bd">
+						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>
+		</div>
+		<div class=" unit size1of4 lastUnit">
+			<div class="bubble bubbleBottom yoyo bubbleVerticalExt"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
+				<div class="inner">
+					<div class="hd fire">
+						<h3>Yoyo + bubbleVerticalExt</h3>
+					</div>
+					<div class="bd">
+						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>
+		</div>
+	</div>
+
+</div>
+</body>
+</html>