1

I would like to create random outwashed letters of a usual font. Let's say I want to have http://www.fontspace.com/category/washed%20out those ones but instead I use a usual font which is out-washed in the browser.

Is this possible? I mean taking a font that is out washed there the same letters are always looking in the same way.

I really would like to have the same letters but all looking a bit different. Maybe as if I would have written it by hand by myself.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
kwoxer
  • 3,734
  • 4
  • 40
  • 70
  • 2
    A combination of [this](http://css-tricks.com/snippets/css/gradient-text/) with several layered gradients is probably what you want. But frankly, you're nitpicking, I doubt that matter a lot. – Madara's Ghost Feb 22 '15 at 13:56
  • Mhh just working in Chrome and yeah not really random stuff in the, just changed color. But thanks anyways. – kwoxer Feb 22 '15 at 14:09
  • You can create complex patterns with gradients, and I'm pretty sure it's not Webkit only anymore (the article is from 2012) – Madara's Ghost Feb 22 '15 at 14:10
  • Well I tested it and only worked as it is in Chrome. – kwoxer Feb 22 '15 at 14:24
  • Did you remove the `-webkit-` vendor-prefixes? Or add vendor-prefixed rules for `-moz-`, `-ms-` and so on? Because as it's written it explicitly targets only WebKit. – David Thomas Feb 22 '15 at 14:32
  • Are we taking text or headline? Is javascript an option? Is it important that the letters look the same if the users reload the page? Is a solution acceptable where something is overlayed on the text (users might not be able to select, or copy text easily)? Also: I think the best solution is to use a specially designed font despite the fact that same letters look the same. Second best would what @SecondRikudo suggested. I'm pretty sure it will work. – mmgross Feb 22 '15 at 14:33

2 Answers2

3

You could use a transparent png image to overlay a splattered effect over the text. This is just an example of how you could do it:

h1 {
font-family: Arial, sans-serif;  
font-size: 3em;
  text-transform: uppercase;
  position: relative;
}
h1:after {
  content: '';
  background-image: url(http://i665.photobucket.com/albums/vv11/Acetonium/splatmask.png);
  background-size: 100% 100%;
  background-position: -250px 35px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity:  0.9;
  pointer-events: none;
}
<h1>This a header</h1>
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
Jackson
  • 3,476
  • 1
  • 19
  • 29
  • 1
    I added `pointer-events: none` to make interaction with the overlay impossible (thus selecting, copying, right clicking, etc is not damaged) – Madara's Ghost Feb 22 '15 at 14:48
  • Well many thanks but also not satisfying me. Image I have 500 textpathes and all of them could having a multiple color background. If I take your solution I see the white dots everywhere. I need a solution that is really just on the text and not the background. Is this somehow able to do it with your idea? – kwoxer Feb 22 '15 at 16:03
0

No solution was really satifying.

  • Using an image was having the image in the background and not just on the text. So the whole background was getting the sparkles of the image.
  • any other way was browser incompatible or looking bad or even taking to many resources

The only way is using an existing handwritten font. Actually not the worst thing you could have.

kwoxer
  • 3,734
  • 4
  • 40
  • 70