Difference between revisions of "IS480 Team wiki: 2012T1 One-hit Wonder Downloads"
Jump to navigation
Jump to search
Line 41: | Line 41: | ||
[[Link]] | [[Link]] | ||
|} | |} | ||
+ | |||
+ | <div class="speech-bubble">This speech bubble is created entirely with CSS, without an</div> | ||
+ | |||
+ | .speech-bubble | ||
+ | { | ||
+ | width: 200px; | ||
+ | padding: 10px; | ||
+ | background: #404040; | ||
+ | color: #fff; | ||
+ | font: normal 12px "Segoe UI", Arial, Sans-serif; | ||
+ | -moz-border-radius: 10px; | ||
+ | -webkit-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | } | ||
+ | .speech-bubble:after | ||
+ | { | ||
+ | content: ""; | ||
+ | border: solid 10px transparent; /* set all borders to 10 pixels width */ | ||
+ | border-top-color: #404040; /* the callout */ | ||
+ | border-bottom: 0; /* we do not need the bottom border in this case */ | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | overflow: hidden; | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | bottom: -20px; /* border-width of the :after element + padding of the root element */ | ||
+ | margin: auto; | ||
+ | } |
Revision as of 17:41, 8 July 2012
Test
Test
Test
This speech bubble is created entirely with CSS, without an
.speech-bubble
{ width: 200px; padding: 10px; background: #404040; color: #fff; font: normal 12px "Segoe UI", Arial, Sans-serif; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .speech-bubble:after { content: ""; border: solid 10px transparent; /* set all borders to 10 pixels width */ border-top-color: #404040; /* the callout */ border-bottom: 0; /* we do not need the bottom border in this case */ width: 0; height: 0; overflow: hidden; display: block; position: relative; bottom: -20px; /* border-width of the :after element + padding of the root element */ margin: auto; }