Skip to content

Commit d40ee35

Browse files
author
Christian Kaisermann
committed
Changed classes names. Added top tails.
1 parent 4a88414 commit d40ee35

12 files changed

+260
-166
lines changed

‎README.md

+22-9
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,30 @@
22

33
Simple CSS only, one element, 8 Bit-like comic bubble. Based on [http://wigflip.com/ds/](http://wigflip.com/ds/).
44

5+
6+
But Christian, **3kb** for only those simple balloons?
7+
8+
> Well, on average, a transparent .png from **wigflip** will weight around 4/5kb depending on its text. A gif with background will weight something like 1kb. If you do happen to need more than one of those bubbles, you can quickly get more than 3kb worth of images. That's more http requests for you.
9+
10+
> And come on, things done with CSS only are way more cooler. PS: you can always remove what you don't need :)
11+
512
## Classes
6-
* **.cbubble**
13+
* **.cbbl**
714
* Obligatory. Defaults to left side balloon.
8-
* **.cbubble--right**
15+
* **.cbbl--right**
916
* Optional. Makes the bubble tail go to the right side.
10-
* **.cbubble--hoverable**
17+
* **.cbbl--up**
18+
* Optional. Makes the bubble tail come from the balloon's upper side. Works with _.cbbl--right_
19+
* **.cbbl--hover**
1120
* Optional. Indicates that the bubble will change colors on mouse hover.
12-
* **.cbubble--btn**
21+
* **.cbbl--btn**
1322
* Optional. Indicates that the bubble will be used as a button (with click transform animation).
14-
* **.cbubble--no-selection**
23+
* **.cbbl--no-selection**
1524
* Optional. Makes the bubble unselectable by the user's cursor.
1625

1726
## Installation
1827

19-
* _bower install --save comicbubbles_
28+
* _bower install --save comicbbls_
2029
* Manual copy :)
2130

2231
## Examples & some usages
@@ -30,16 +39,20 @@ You can see some examples on codepen: http://codepen.io/chrispif/pen/xZWVrG
3039

3140
###### Sample code
3241
````
33-
<div class="cbubble">
42+
<div class="cbbl">
3443
Hello</div>
3544
</div>
36-
<div class="cbubble cbubble--right">
45+
<div class="cbbl cbbl--right">
3746
How are you?</div>
3847
</div>
3948
````
4049
Will produce:
4150

42-
![](https://github.com/kaisermann/comicBubbles/blob/master/comicbubble.gif?raw=true)
51+
![](https://github.com/kaisermann/comicbbls/blob/master/comicbbl.gif?raw=true)
52+
53+
## Compatibility
54+
55+
IE 9+, Chrome, Safari, Firefox, Opera...
4356

4457
## Observations
4558

‎bower.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "comicbubbles",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"homepage": "https://github.com/kaisermann/comicbubbles",
55
"authors": [
66
"Christian Kaisermann <[email protected]>"
@@ -18,7 +18,7 @@
1818
"index.html"
1919
],
2020
"main": [
21-
"dist/cbubble.min.css"
21+
"dist/cbbl.min.css"
2222
],
2323
"dependencies": {}
2424
}

‎dist/cbbl.css

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
.cbbl {
2+
position: relative;
3+
display: inline-block;
4+
margin: 10px 9px 29px 6px;
5+
text-align: center;
6+
font-weight: 700;
7+
background-color: #fff;
8+
color: #000;
9+
padding: 5px;
10+
box-shadow: 0 -3px #fff, 0 -6px #000, 3px 0 #fff, 3px -3px #000, 6px 0 #000, 0 3px #fff, 0 6px #000, -3px 0 #fff, -3px 3px #000, -6px 0 #000, -3px -3px #000, 3px 3px #000, 3px 9px #aaa, 6px 6px #aaa, 9px 3px #aaa;
11+
transition: all 0.3s ease;
12+
box-sizing: border-box;
13+
}
14+
.cbbl::before,
15+
.cbbl::after {
16+
content: '';
17+
display: block;
18+
position: absolute;
19+
transition: all 0.3s ease;
20+
box-sizing: border-box;
21+
}
22+
.cbbl::after {
23+
background: #fff;
24+
width: 9px;
25+
height: 3px;
26+
bottom: -14px;
27+
}
28+
.cbbl::before {
29+
width: 15px;
30+
height: 8px;
31+
background: #fff;
32+
bottom: -11px;
33+
border-left: 3px solid #000;
34+
border-right: 3px solid #000;
35+
}
36+
.cbbl--hover:hover {
37+
background-color: #eee;
38+
color: #000;
39+
box-shadow: 0 -3px #eee, 0 -6px #7bc8a4, 3px 0 #eee, 3px -3px #7bc8a4, 6px 0 #7bc8a4, 0 3px #eee, 0 6px #7bc8a4, -3px 0 #eee, -3px 3px #7bc8a4, -6px 0 #7bc8a4, -3px -3px #7bc8a4, 3px 3px #7bc8a4, 3px 9px #cae9db, 6px 6px #cae9db, 9px 3px #cae9db;
40+
}
41+
.cbbl--hover:hover::before {
42+
background: #eee;
43+
border-left-color: #7bc8a4;
44+
border-right-color: #7bc8a4;
45+
}
46+
.cbbl--hover:hover::after {
47+
background: #eee;
48+
}
49+
.cbbl--hover:hover.cbbl--btn input[type=submit],
50+
.cbbl--hover:hover.cbbl--btn button,
51+
.cbbl--hover:hover.cbbl--btn a {
52+
color: #000;
53+
}
54+
.cbbl::before,
55+
.cbbl::after {
56+
left: 20%;
57+
}
58+
.cbbl::after {
59+
margin-left: 6px;
60+
box-shadow: -3px 0 #000, 3px 0 #000, 3px 3px #fff, 0px 3px #000, 6px 3px #000, 9px 3px #aaa, 3px 6px #000, 6px 6px #000, 9px 6px #aaa, 6px 9px #aaa;
61+
}
62+
.cbbl.cbbl--hover:hover::after {
63+
box-shadow: -3px 0 #7bc8a4, 3px 0 #7bc8a4, 3px 3px #eee, 0px 3px #7bc8a4, 6px 3px #7bc8a4, 9px 3px #cae9db, 3px 6px #7bc8a4, 6px 6px #7bc8a4, 9px 6px #cae9db, 6px 9px #cae9db, 9px 9px #7bc8a4;
64+
}
65+
.cbbl--up {
66+
margin: 29px 9px 10px 6px;
67+
}
68+
.cbbl--up::before {
69+
top: -11px;
70+
bottom: auto;
71+
}
72+
.cbbl--up::after {
73+
top: -14px;
74+
bottom: auto;
75+
box-shadow: -3px 0 #000, 3px 0 #000, 3px -3px #fff, 0px -3px #000, 6px -3px #000, 3px -6px #000, 6px -6px #000;
76+
}
77+
.cbbl--up.cbbl--hover:hover::after {
78+
box-shadow: -3px 0 #7bc8a4, 3px 0 #7bc8a4, 3px -3px #eee, 0px -3px #7bc8a4, 6px -3px #7bc8a4, 3px -6px #7bc8a4, 6px -6px #7bc8a4;
79+
}
80+
.cbbl--up.cbbl--right::after {
81+
box-shadow: 3px 0 #000, -3px 0 #000, -3px -3px #fff, 0px -3px #000, -6px -3px #000, -3px -6px #000, -6px -6px #000;
82+
}
83+
.cbbl--up.cbbl--right.cbbl--hover:hover::after {
84+
box-shadow: 3px 0 #7bc8a4, -3px 0 #7bc8a4, -3px -3px #eee, 0px -3px #7bc8a4, -6px -3px #7bc8a4, -3px -6px #7bc8a4, -6px -6px #7bc8a4;
85+
}
86+
.cbbl--right::before,
87+
.cbbl--right::after {
88+
left: auto;
89+
right: 20%;
90+
}
91+
.cbbl--right::after {
92+
margin-left: 0;
93+
margin-right: 6px;
94+
box-shadow: 3px 0 #000, -3px 0 #000, -3px 3px #fff, 0px 3px #000, -6px 3px #000, -3px 6px #000, -6px 6px #000, -3px 9px #aaa, 0 6px #aaa, 3px 3px #aaa, 6px 0px #aaa;
95+
}
96+
.cbbl--right.cbbl--hover:hover::after {
97+
box-shadow: 3px 0 #7bc8a4, -3px 0 #7bc8a4, -3px 3px #eee, 0px 3px #7bc8a4, -6px 3px #7bc8a4, -3px 6px #7bc8a4, -6px 6px #7bc8a4, -3px 9px #cae9db, 0 6px #cae9db, 3px 3px #cae9db, 6px 0px #cae9db;
98+
}
99+
.cbbl--no-selection {
100+
-webkit-user-select: none;
101+
-moz-user-select: none;
102+
-ms-user-select: none;
103+
user-select: none;
104+
}
105+
.cbbl--btn {
106+
cursor: pointer;
107+
}
108+
.cbbl--btn input[type=submit],
109+
.cbbl--btn button,
110+
.cbbl--btn a {
111+
cursor: pointer;
112+
transition: color 0.3s ease;
113+
}
114+
.cbbl--btn:active {
115+
-webkit-transform: scale(0.95);
116+
transform: scale(0.95);
117+
}

‎dist/cbbl.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cbubble.css

-90
This file was deleted.

‎dist/cbubble.min.css

-1
This file was deleted.

‎gulpfile.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// Globals
44
var gulp = require('gulp');
55
var $ = require('gulp-load-plugins')();
6-
var name = "cbubble";
6+
var name = "cbbl";
77

88
// Tasks
99

@@ -12,6 +12,10 @@ gulp.task('build', function ()
1212
return gulp.src(['./src/*.styl','!./src/page.styl'])
1313
.pipe($.stylus())
1414
.pipe($.rename(name+'.css'))
15+
.pipe($.autoprefixer({
16+
browsers: ['last 2 versions'],
17+
cascade: false
18+
}))
1519
.pipe($.size())
1620
.pipe(gulp.dest('./dist/'));
1721
});

0 commit comments

Comments
 (0)