Grow your CSS skills. Land your dream job.

Problem with header design

  • # February 14, 2013 at 1:44 pm

    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.

    # February 14, 2013 at 1:48 pm

    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.

    # February 14, 2013 at 3:08 pm

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

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

    # February 14, 2013 at 4:11 pm

    I reworked it a little for you:

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

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

    # February 14, 2013 at 10:13 pm

    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 :)

    # February 17, 2013 at 11:08 am

    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.

    # February 22, 2013 at 8:40 am

    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 :)

    # February 22, 2013 at 11:16 am

    How about something like this?

    http://codepen.io/wolfcry911/pen/Atlgm

    # February 22, 2013 at 4:06 pm

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".