iba-cmsteam

http://codepen.io/MadeByMike/pen/bEEGvv

iba-cmsteam

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

iba-cmsteam

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

iba-cmsteam

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;

iba-cmsteam

a:active {
    outline: none;
}

iba-cmsteam

.filtered {
   background: yellow;
   position: relative;
}
.filtered img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
}

iba-cmsteam

.filtered {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

iba-cmsteam

.layered-paper {
    background: #eee;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
        0 10px 0 -5px #eee, /* The second layer */
        0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
        0 20px 0 -10px #eee, /* The third layer */
        0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
}

iba-cmsteam

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */

iba-cmsteam

a {
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}

a:hover::after {
  content: "";
  position: absolute;
  bottom: 2px;