From 6a5a27768363ee777fcac9a8979d6476ad29fe22 Mon Sep 17 00:00:00 2001 From: Stubbornella Date: Sun, 6 Sep 2009 22:26:54 -0700 Subject: [PATCH] talk bubble modules --- css/content.css | 4 +- css/grids.css | 4 +- css/mod.css | 2 +- css/talk.css | 20 +++++++ css/talk_skins.css | 14 +++++ css/template.css | 4 +- talk.html | 140 +++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 180 insertions(+), 8 deletions(-) create mode 100644 css/talk.css create mode 100644 css/talk_skins.css create mode 100644 talk.html diff --git a/css/content.css b/css/content.css index eb716daf..effa71df 100644 --- 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 index a51c0d9e..7cb716eb 100644 --- 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 index d86039d1..03dd21fb 100644 --- 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 new file mode 100644 index 00000000..03f48a64 --- /dev/null +++ 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 */ \ No newline at end of file diff --git a/css/talk_skins.css b/css/talk_skins.css new file mode 100644 index 00000000..01f7dd0e --- /dev/null +++ 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;} \ No newline at end of file diff --git a/css/template.css b/css/template.css index 843a6cba..30a88e34 100644 --- 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 new file mode 100644 index 00000000..a1d705c1 --- /dev/null +++ b/talk.html @@ -0,0 +1,140 @@ + + + + +Talk Bubbles + + + + + + + + + + +
+ +

Talk Bubbles

+
+
+
+ +
+
+

yowza

+
+
+

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.

+
+
+ +
+
+
+
+ +
+
+

lol

+
+
+

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.

+
+
+ +
+
+
+
+ +
+
+

meep

+
+
+

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.

+
+
+ +
+
+
+
+ +
+
+

Yoyo

+
+
+

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.

+
+
+ +
+
+
+

Extending the talk bubbles

+
+
+
+ +
+
+

yowza + bubbleVerticalExt

+
+
+

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.

+
+
+ +
+
+
+
+ +
+
+

lol + bubbleHorizontalExt

+
+
+

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.

+
+
+ +
+
+
+
+ +
+
+

meep + bubbleHorizontalExt

+
+
+

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.

+
+
+ +
+
+
+
+ +
+
+

Yoyo + bubbleVerticalExt

+
+
+

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.

+
+
+ +
+
+
+ +
+ +