Grow your CSS skills. Land your dream job.

hr on height

  • # June 27, 2013 at 5:37 am

    http://css-tricks.com/simple-styles-for-horizontal-rules/

    It’s possible to do on height?
    smth like that?:

    hr {
    display: block;
    border: 0;
    background-image: -webkit-linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    width: 1px;
    height: auto;
    }

    # June 27, 2013 at 6:16 am

    Why would you want a horizontal rule that is only 1px wide?

    I assume that you mean height as in the post title: http://codepen.io/Paulie-D/pen/uxbKh

    # June 27, 2013 at 6:23 am

    Hmm, then how make vertical(1px width; height: 100%)?

    # June 27, 2013 at 6:29 am

    Use a pseudo-element, box-shadow or border instead. `


    ` is to separate content semantically. Unless you want to use it to separate 2 sections that are next to each other.

    # June 27, 2013 at 6:41 am

    Yes…what are you intending to do this this?

    # June 27, 2013 at 7:21 am

    I would also point out that a 1px wide element won’t show a side to side (ltr or rtl) gradient.

    Finally, I checked by updating my Codepen (http://codepen.io/Paulie-D/pen/uxbKh) and height:auto or 100% doesn’t seem to work but that may be for another reason.

    # June 27, 2013 at 11:29 am

    smth like that.

    http://codepen.io/anon/pen/DJets

    I want to do hr height: auto. I mean if Block(wrapper) height is 300px then hr is 300px , If block(wrapper) height is 500px then hr is 500px and etc..

    # June 27, 2013 at 11:41 am

    To be honest that’s not what the `


    ` is for.

    **hr** stands for horizontal rule.

    The intention is that it separate two pieces of horizontal content **in the same element** and that isn’t how you are trying to use it.

    I’m not saying what you are trying to do is impossible but the height of the `


    ` cannot be automatic (AFAIK)…you would need (I think) JS to determine the height of the wrapper and use that as a basis of the `

    `.

    I’m wondering if CSS-columns might not be a better option (as that has a ‘rule’ feature) but that will depend on the content you are actually proposing to use.

    http://codepen.io/Paulie-D/pen/jqxkn

    # June 27, 2013 at 11:58 am

    Thanks for helping. I found a way how to do it :) (with css)

    # June 27, 2013 at 12:04 pm

    >I found a way how to do it :) (with css)

    Could you show us?

    # June 27, 2013 at 12:17 pm

    http://codepen.io/anon/pen/cDKae

    Now I’am thinking how better optimize this code.

    P.S. I will use this code in forum ;D

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

You must be logged in to reply to this topic.

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