Problem with header design

[ephoenix]

Hi everyone,

I’m in the middle of redesigning my homepage and I stumbled upon a problem. In Photoshop I mocked up a design where the title of my site was enclosed in some “racing stripes”. But when I started to convert the mockup into html/css I realised, that I couldn’t get them right.

http://codepen.io/ephoenix/pen/ekmvo

Here’s a reduced test case. It works there nicely. But my ultimate goal was that the site’s background would be a texture and the header and other things on the site would be background-color: rgba(black, 0.4); so the texture would shine through a litte bit.

As I have implemented it now, a solid color on the h1 is necessary to hide the orange “racing stripe” underneath. Therefore I either need to wrap the title in an extra element that gets a solid color, or I need another approach to code those stripes. I have tried splitting the header in three parts (left stripe, h1, right stripe) and float those but that didn’t work out like I wanted.

Is there another (or more elegant) way of implementing those stripes? I’m still in the process of learning html and css (I built one fixed width website and recently started learning how to use preprocessors) and I just can’t think of a better way.

[ksmith]

It would be helpful to show a screen shot of the PS comp, if possible, to get a better idea of what you are after. Hard to say the best method without seeing it. I’m a super visual person.

[Paulie_D]

I think we’ve done something like this before that could be worked.

https://css-tricks.com/forums/discussion/15929/create-more-beautiful-headlines-with-pseudo-elements/p1

[nordstromdesign]

I reworked it a little for you:

http://codepen.io/nordstromdesign/pen/mpvKB

Hopefully this will help get you moving on the right track.

[David_Leitch]

I was playing around with Nordstrom’s code and eventually got to [this](http://codepen.io/David_Leitch/pen/BlmFk “http://codepen.io/David_Leitch/pen/BlmFk”), which uses fewer divs to achieve the same result. Hope it helps :)

[ephoenix]

Sorry for the late answer, but I was rather busy the last few days.

Thank you for your efforts, I’m going to fork your pens and play around with the code.

[ephoenix]

After playing around quite a bit without getting the results I wanted, I tried adding some JavaScript ([FitText.js](http://fittextjs.com/ “FitText”)). It’s still not the exact result I aimed for, but it’s close enough.

Here is a [pen](http://codepen.io/ephoenix/pen/BFwJe “Fluid Width Racing Stripe Header”) with my results.

Thanks again for pointing me into the right direction :)

[wolfcry911]

How about something like this?
http://codepen.io/wolfcry911/pen/Atlgm

[ephoenix]

Thanks, but sadly that’s not what I was looking for. I want to create a fluid width design, with those “racing stripes”. But I don’t want them to touch the edges of the header or disappear entirely when the h1 takes up too much space.

I’m quite happy with my code now. I just wanted to post the results of my experimenting with the code Nordstrom and David gave me. I’m sorry if you misunderstood that as a cry for help.

[Author]

Posts