CSS-only 8 bit-like comic balloons
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
README.md
bower.json
comicbubbles.gif
gulpfile.js
index.html
package.json
page.css
yarn.lock

README.md

8 Bit-like Comic Bubbles

Simple CSS only, one element, 8 Bit-like comic bubble. Based on http://wigflip.com/ds/.

Classes

  • .cbbl
    • Obligatory. Defaults to left side balloon.
  • .cbbl.-right
    • Optional. Makes the bubble tail go to the right side.
  • .cbbl.-up
    • Optional. Makes the bubble tail come from the balloon's upper side. Works with .-right
  • .cbbl.-hover
    • Optional. Indicates that the bubble will change colors on mouse hover.
  • .cbbl.-btn
    • Optional. Indicates that the bubble will be used as a button (with click transform animation).
  • .cbbl.-no-selection
    • Optional. Makes the bubble unselectable by the user's cursor.

Installation

  • bower install --save comicbubbles
  • npm install comicbubbles
  • yarn add comicbubbles

Examples & some usages

You can see some examples on codepen: http://codepen.io/chrispif/pen/xZWVrG

  • Custom button;
  • Section title;
  • Input boxes (remove the input borders);
  • And of course, actual speech bubbles.
Sample code
<div class="cbbl"> Hello </div>
<br>
<div class="cbbl -right"> How are you? </div>

Will produce:

Compatibility

IE 9+, Chrome, Safari, Firefox, Opera...

Observations

  1. To rebuild the project, just run 'gulp' on your terminal.
  2. To change the hover colors you can simply rebuild the project with a different value on the variables or you can just search and replace the default colors values.