{"id":16223523,"url":"https://github.com/kaisermann/comicbubbles","last_synced_at":"2025-10-04T00:33:07.593Z","repository":{"id":58240174,"uuid":"50700081","full_name":"kaisermann/comicbubbles","owner":"kaisermann","description":"CSS-only 8 bit-like comic balloons","archived":false,"fork":false,"pushed_at":"2017-08-25T15:00:09.000Z","size":46,"stargazers_count":19,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T12:06:27.683Z","etag":null,"topics":["balloon","bubble","comic","comic-bubbles","css","css-only","pixel-art"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaisermann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-30T00:15:08.000Z","updated_at":"2025-01-23T00:53:54.000Z","dependencies_parsed_at":"2022-08-31T00:02:23.832Z","dependency_job_id":null,"html_url":"https://github.com/kaisermann/comicbubbles","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fcomicbubbles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fcomicbubbles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fcomicbubbles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fcomicbubbles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaisermann","download_url":"https://codeload.github.com/kaisermann/comicbubbles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243989419,"owners_count":20379648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["balloon","bubble","comic","comic-bubbles","css","css-only","pixel-art"],"created_at":"2024-10-10T12:19:09.181Z","updated_at":"2025-10-04T00:33:02.552Z","avatar_url":"https://github.com/kaisermann.png","language":"CSS","readme":"# 8 Bit-like Comic Bubbles\n\nSimple CSS only, one element, 8 Bit-like comic bubble. Based on [http://wigflip.com/ds/](http://wigflip.com/ds/).\n\n## Classes\n* **.cbbl**\n\t* Obligatory. Defaults to left side balloon.\n* **.cbbl.-right**\n\t* Optional. Makes the bubble tail go to the right side.\n* **.cbbl.-up**\n\t* Optional. Makes the bubble tail come from the balloon's upper side. Works with _.-right_\n* **.cbbl.-hover**\n\t* Optional. Indicates that the bubble will change colors on mouse hover.\n* **.cbbl.-btn**\n\t* Optional. Indicates that the bubble will be used as a button (with click transform animation).\n* **.cbbl.-no-selection**\n\t* Optional. Makes the bubble unselectable by the user's cursor.\n\n## Installation\n\n* `bower install --save comicbubbles`\n* `npm install comicbubbles`\n* `yarn add comicbubbles`\n\n## Examples \u0026 some usages\n\nYou can see some examples on codepen: http://codepen.io/chrispif/pen/xZWVrG\n\n* Custom button;\n* Section title;\n* Input boxes (remove the input borders);\n* And of course, actual speech bubbles.\n\n###### Sample code\n```` \n\u003cdiv class=\"cbbl\"\u003e Hello \u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"cbbl -right\"\u003e How are you? \u003c/div\u003e\n````\nWill produce: \n\n![](https://raw.githubusercontent.com/kaisermann/comicbubbles/master/comicbubbles.gif)\n\n## Compatibility\n\nIE 9+, Chrome, Safari, Firefox, Opera...\n\n## Observations\n\n1. To rebuild the project, just run '**gulp**' on your terminal.\n2. 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.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaisermann%2Fcomicbubbles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaisermann%2Fcomicbubbles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaisermann%2Fcomicbubbles/lists"}