Posted By

rwczippy on 06/08/10


Tagged

css ROUNDED triangle bubbles gradient


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Orlandoo


pure CSS speech bubbless


 / Published in: CSS
 

URL: http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

pure css3 speech bubbles

  1. /* Bubble with an isoceles triangle ------------------------------------------ */
  2. .triangle-isosceles { position:relative; padding:15px; margin:1em 0 3em; color:#000; background:#f3961c;
  3. /* css3 */
  4. -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background:-moz-linear-gradient(top, #f9d835, #f3961c); background:linear-gradient(top, #f9d835, #f3961c); } /* creates triangle */
  5. .triangle-isosceles:after { content:\"\\00a0\"; display:block;
  6. /* reduce the damage in FF3.0 */
  7. position:absolute; z-index:-1; bottom:-30px; left:50px; width:0; height:0; border-width:15px 15px; border-style:solid; border-color:#f3961c transparent transparent; }

Report this snippet  

You need to login to post a comment.