15+ Barcodes in CSS - Free Code + Demos
Collection of 15+ Barcodes in CSS. All items are 100% free and open-source.
1. Animated CSS Barcode
Author: Dayna Blackwell (dayna-j)
Links: Source Code / Demo
Created on: November 22, 2018
Made with: HTML, SCSS, JS
Tags: barcode, animation, animated, css, jquery
2. CSS Animation Barcode
Author: Lexa (lexctk)
Links: Source Code / Demo
Created on: February 27, 2018
Made with: HTML, CSS
3. RGB Text
Just because
Author: Sean Free (seanfree)
Links: Source Code / Demo
Created on: September 8, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: rgb, text, javascript, animation
4. Pure CSS Barcode (UPC-A)
Just a plain UPC-A barcode. How it works: UPC codes use 1-to-4 "pixel" wide bars to encode digits; each digit is a fixed 7 "pixels" wide overall (technically, they are called "modules" and not pixels). Wikipedia has the full details, but the encoding is nicely presentable as a simple line...Read More
Author: Nick Matantsev (unframework)
Links: Source Code / Demo
Created on: January 23, 2017
Made with: Slim, Less, JS
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: barcode, pure-css, css, bar-code
5. CSS Grid & Flexbox EAN-13 Generator
i was bored ... type in your numbers and press the generate image button -> right click -> save image -> done combined css grid and flexbox and tried a lot of stuff with js (i'm a js newbie so be nice with me) had to study the wikipedia page about International Article Numbers ._.
Author: creme (creme)
Links: Source Code / Demo
Created on: March 2, 2018
Made with: HTML, SCSS, JS
Tags: barcode, ean, canvas, cssgrid, generator
6. SVG Barcode Generator
Author: Scott Fessler (FesslerForge)
Links: Source Code / Demo
Created on: January 7, 2014
Made with: HTML, CSS, JS
Tags: svg-upc-barcode
7. Barcode Generator
Code 39 Barcode generator in ES6 JavaScript. Created because I couldn't find a good library.
Author: Benjamin J DeLong (bozdoz)
Links: Source Code / Demo
Created on: January 19, 2018
Made with: HTML, CSS, JS
Tags: barcode, generator, es6
8. CSS Barcode Scanner
Links: Source Code / Demo
9. Hitman Absolution CSS3 Loading Animation
Inspired by Hitman Absolution. Pure CSS3 loading animation using keyframes and opacity.
Author: Donya.Gholiha (Donyagholiha)
Links: Source Code / Demo
Created on: June 7, 2019
Made with: HTML, CSS, JS
Tags: hitman, loading, css3, animation, barcode
10. CSS3 Barcode / QR Code Merge Made Interactive
This is an experiment to create a pure css3 QR code that interacts. - Interactive merge between 1D and a 2D barcode with pure CSS
Author: Dimitrie Hoekstra (dimitrieh)
Links: Source Code / Demo
Created on: July 11, 2012
Made with: HTML, Less, JS
11. Barcode Animation
Author: Daniel Hwang (dbshwang)
Links: Source Code / Demo
Created on: January 31, 2018
Made with: HTML, CSS
12. Barcode Button
Author: Mike Riley (mikeriley131)
Links: Source Code / Demo
Created on: November 28, 2018
Made with: HTML, CSS
13. BarCode
Bar code generator , it's useful in data encryption
Author: Ahmed Mohsen (27mdmo7sn)
Links: Source Code / Demo
Created on: September 2, 2016
Made with: HTML, CSS, JS
Tags: barcode, data, encryption, security
14. Ng-barcode
AngularJS directive that create code39 barcode
Author: Lorenzo D'Ianni (lorenzodianni)
Links: Source Code / Demo
Created on: November 26, 2015
Made with: HTML, JS
Tags: angular, barcode, code39, javascript
More Awesome Lists:
Share: