how to create bar code like in a horizontal line using css (For Email)

Question

I want to create horizontal line as shown in below image using css. but unable to create so, i have never seen such line before using css. Can anyone who are export in css can help me with this?

enter image description here

I know basic like this

Update Note: Actually, i have to put this in my email template, so i am avoiding images. Just pure css

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| — Madbreaks, Nov 14 '14 at 19:20

score 4 · Accepted Answer · answered Nov 14 '14 at 19:24

4

The only CSS I can think of, is a stretched (transformed) dotted border:

div {
    border-bottom: 1px dotted black;
    transform: scale(1,10);
}

<div></div>

answered Nov 14 '14 at 19:24

LcSalazar

16,524
3
37
69

I like it. Would be hard to get much variation I think, and may render differently in different browsers...but still, good option. – Madbreaks Nov 14 '14 at 19:29
Thansk, So "run code snippet" is new feature included in Stack-overflow. previously while answering i used to create fiddle, now u directly created here – Dan Nov 14 '14 at 19:46
I'm not sure `transform` is supported by email clients. – Roko C. Buljan Nov 14 '14 at 19:53
Nice approach @LcSalazar – Alex Char Nov 14 '14 at 20:03

Roko C. Buljan · Answer 2 · 2014-11-14T20:11:23.073

1

If it's for an email ^{(see comments section)}:

use <img src="bars_300x10.png" style="display:block; width:300px; height:10px;">
with an image exactly cut as the expected email design.

Using simply a 3x1 px background base64 .gif:

hr{
  border:0;
  background: url('data:image/gif;base64,R0lGODlhAwABAIAAAAAAAP///yH5BAAAAAAALAAAAAADAAEAAAICRFIAOw==');
  height:10px;
}

<hr>

edited Nov 14 '14 at 20:11

answered Nov 14 '14 at 19:41

Roko C. Buljan

196,159
39
305
313

but you are using image .. i am looking for pure css – Dan Nov 14 '14 at 19:45
@Sundara it's a base64 string :) no external images are used. Technically it's pure css. – Roko C. Buljan Nov 14 '14 at 19:46
because in email, sometime image does not appear directly, so i am looking for css. Does this work? I will put in my code & let u know tomorrow – Dan Nov 14 '14 at 19:48
@Sundara Don't. http://stackoverflow.com/questions/16242489/send-a-base64-image-in-html-email I did not know you needed it inside an email ...:\ – Roko C. Buljan Nov 14 '14 at 19:49
@Sundara I'm not either sure that the accepted answer using `transform` is supported by email clients. – Roko C. Buljan Nov 14 '14 at 19:54
So my best bet is creating a simple .png image, cut it exactly the size it's needed for that email cell element and go with it. (Gmail now shows images by default.) – Roko C. Buljan Nov 14 '14 at 19:54
i will try all the code here, & check, when i find it working then i wil re-accept it as best answer. Or else i will look for some other answers. Yes i will try that also which you just now suggested, lets c – Dan Nov 14 '14 at 19:56
@Sundara please don't forget to come back and share any useful info :) Also don't miss: https://www.campaignmonitor.com/css/ – Roko C. Buljan Nov 14 '14 at 20:00
campaignmonitor.com is your website? – Dan Nov 14 '14 at 20:02
@Sundara no, but on that link you can find lots of nice info of what's supported by Email clients. A genially useful resource. – Roko C. Buljan Nov 14 '14 at 20:05

score 0 · Answer 3 · answered Nov 15 '14 at 08:35

One posibility that gives you absolute control about the results is a gradient

div {
    width: 300px;
    height: 40px;
    background: linear-gradient(to right, black 0px, black 5px, white 5px, white 30px); 
    background-size: 30px 100%;
}

fiddle

You can adjust the size of the pattern, the width of the black strip, the color ...

Madbreaks · Answer 4 · 2014-11-14T19:31:04.690

I commented but, seems like it would work to use vertical pipes (|) and then to control their size/color/spacing using css font techniques. I'll post some examples. It's not clear to me if using pure css is a requirement for you or not.

span {display:block;}
.a { color:blue; font-size:2em; letter-spacing:.2em; }
.b { color:red; font-size:1em; letter-spacing:2px; }
.c { color:green; font-size:8px; letter-spacing:1px; }

<span class="a">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="b">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="c">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>

Another option, if you don't need much variance in the appearance would be to create a single bar "image", then set it as the background-image of a <div/>, and finally apply repeat-x on it.

not the DV but, Fonts are not rendered exactly the same way across platforms so your solution is pretty undesirable, and you cannot control the width. — Roko C. Buljan, Nov 14 '14 at 19:56
For the exact same reason I'm seeing Itay's answer getting downz. — Roko C. Buljan, Nov 14 '14 at 19:59

how to create bar code like in a horizontal line using css (For Email)

4 Answers4