- This topic is empty.
-
AuthorPosts
-
June 27, 2013 at 5:37 am #45867
nuodas159
Participanthttps://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 #140685Paulie_D
MemberWhy 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 #140686nuodas159
ParticipantHmm, then how make vertical(1px width; height: 100%)?
June 27, 2013 at 6:41 am #140688Paulie_D
MemberYes…what are you intending to do this this?
June 27, 2013 at 7:21 am #140691Paulie_D
MemberI 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 #140718nuodas159
Participantsmth 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 #140720Paulie_D
MemberTo 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.
June 27, 2013 at 11:58 am #140724nuodas159
ParticipantThanks for helping. I found a way how to do it :) (with css)
June 27, 2013 at 12:04 pm #140726Paulie_D
Member>I found a way how to do it :) (with css)
Could you show us?
June 27, 2013 at 12:17 pm #140730nuodas159
Participanthttp://codepen.io/anon/pen/cDKae
Now I’am thinking how better optimize this code.
P.S. I will use this code in forum ;D
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.