Hi,
Is it possible to convert this to pure CSS? If so, are there any talented people out there willing to?
I would guess if you found a suitable font to make the tilde ~ symbol look like that and then positioned it over a line (<hr> perhaps?) that might do the job.
2 Likes
If you just want the standard font then you can do something like this although its a bit magic numberish.
The ideal way would be to use svg but I haven’t got the resources to draw one as I am away on holiday but I’m sure an svg solution will pop up soon in the thread:)
3 Likes
What about using stretch/transform
Yes you could probably tweak it a little with transform to make it better but an svg would be the way to go I think 
1 Like
Most sources say svg too. I just figured the OP wanted strictly css.
I was surprised to see how you got the lines. I don’t mess around with those types of designs in css. I figured one would use the hyphen and stretch 4 of them out. Photoshop is my tool, create the image, link, and go…less code = less issues.
2 Likes
i threw a google font at it and it is pretty close to the OP’s image. With a bit more searching they could probably get a font even closer.
I don’t think your pen is using the google font as your
font-family:cursive
font-family: 'Herr Von Muellerhoff', cursive;
is invalid. Remove those and you have the same result.
Wow, thank you everyone. Creative ideas. I’ve been playing with some of everyone’s suggestions and am making progress. That stretching idea would work if I didn’t want the horizontal line.
I’m not opposed to SVG, just never worked with them.
1 Like
oh yeah. weird though as it was working when i looked at it as it was picking up the google font. thanks for spotting that.
1 Like
Hi there Mainer82,
check out the attachment which contains an example, and also
uses a font that exactly matches the one I saw in your image. 
Mainer82.zip (3.3 KB)
coothead
1 Like
Here you go…
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 177.000000 36.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,36.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none">
<path d="M1717 300 c-63 -136 -269 -239 -452 -227 -107 7 -155 24 -379 137
-230 116 -294 135 -456 135 -138 -1 -196 -20 -277 -91 -51 -44 -159 -202 -146
-213 3 -3 8 0 10 7 3 7 24 41 47 75 98 146 276 200 491 147 101 -24 162 -50
355 -148 85 -43 185 -86 222 -95 128 -32 244 -19 368 41 110 54 225 176 254
270 14 45 -10 20 -37 -38z"/>
</g>
</svg>
coothead
4 Likes
Thanks for the feedback.
Are you on “Windows XP” ?
I’m using “Windows 7” and IE11 does not display the border in
exactly the correct position. 
Other than that, the rest of my test browsers display it like this…
coothead
1 Like
Thanks, Mr. C.
Yep, WinXP.
I’ll spend a little time and see if I can spot the incompatibility, but not much. At this point, I’m just curious to know what changed. Too many serious changes coming down the pike to waste time on this, though.
UPGRADE, I must!!!
2 Likes
[off-topic]
I hope that is to Linux
Both Ubuntu and LinuxMint have installations that can be tried by booting from a thumb-drive and also dual-booting so you can always fall back to Windows.
both Operating Systems need about 10GB but it is better to have at least 30GB to allow for data.
[/off-topic]
1 Like
UPGRADE, I must!!!
Nah, you’re fine. EoL of XP was only 4yrs ago. /s
1 Like
Aye, but I hadn’t gotten my money’s worth out of it then. 
4 Likes
Zenfolio, my photo hosting company, doesn’t allow SVG but have set up a modification of what PaulOB and others have suggested. I’m not too worried about older browsers, most people are on Windows 7 and higher and newer versions of Safari that people are visiting out side.
The reason as to why I wanted CSS was that it stays within my div box on mobile. It’s the way zenfolio handles mobile pages. Thank you again,
Why wouldn’t they allow SVG? That doesn’t make sense…
3 Likes