HeaderSIS.jpg

Difference between revisions of "IS480 Team wiki: 2012T1 One-hit Wonder Downloads"

From IS480
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

HomeOHW.png Home

Info24.png Project Overview

Users24.png Project Management

Folder fav24.png Project Documentation

TeamRef.png Team Reflection

Res&Ref.png Resource & References

Download.png Downloads


Test
Test
Test


Link

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;
 }