Wie style <hr>, um mehrere Farben zu haben?

Ich brauche <hr /> wie diese zu erstellen:Wie style <hr>, um mehrere Farben zu haben?

enter image description here

. Ich arbeite mit Bootstrap und ich habe lange auf der getbootstrap Seite und im Internet gesucht. Ich kann nicht finden, wonach ich suche, also hoffe ich, dass einige von Ihnen wissen, wie man das macht.

Wie gesagt, es muss mit Bootstrap oder einfache CSS sein, weniger und scss sind nicht erlaubt.

Vielen Dank im Voraus

Quelle

2015-04-19 Spirit_Scarlet

Sehen Sie, wenn es Ihr Problem löst. Hoffentlich hilft es :) –

Eine weitere Option ist linear-gradient als Hintergrund zu verwenden:

hr.colored { 
 
    border: 0; /* in order to override TWBS stylesheet */ 
 
    height: 5px; 
 

 
    background: -moz-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* FF3.6+ */ 
 
    background: -webkit-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* IE10+ */ 
 
    background: linear-gradient(to right, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* W3C */ 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<hr class="colored" />

Quelle

2015-04-19 18:39:41

! Wow, wer bringt dir all diese coolen Sachen bei? :) –

@AlexanderSolonik * I * do :-) Ich glaube, dass wir unsere besten Lehrer sind. –

Sie könnten einen Behälter mit 100% Breite mit 10 Spannweite innerhalb schaffen, die jeweils 10% der Gesamtbreite. Dann wenden Sie die Hintergrundfarbe an, die Sie auf jeder Spannweite mögen.

So wird es flüssig und Sie können es leicht in einen anderen Behälter wickeln, damit es seine Breite füllt und nicht 100% der Seite ist.

Jeder Bereich kann durch Zugabe einer anderen Klasse zu jeder gezielt ein oder wenn Sie so wollen Sie auch Spanne verwenden: n-Kind (1), Spanne: n-Kind (2) usw.

UPDATE

Ich bekomme nicht wirklich die Aufwertung in der Antwort von Shaun Loftin, da die Hintergrundfarbe, die auf <hr> angewendet wird, nur auf bestimmten Versionen von Chrome funktioniert. Zum Beispiel jetzt auf Linux kann ich überhaupt nicht sehen die hr Färbung nicht background-color:red;

Eines ist sicher mit, dass auch innerhalb HTML5 Boilerplate sie diesen Code verwendet, für das Styling <hr> Cross-Browser:

hr { display: block; height: 1px; 
    border: 0; border-top: 1px solid red; 
    margin: 1em 0; padding: 0; }

Verwenden Sie diese, wenn Sie wollen nicht, HTML-Element ändern:

DEMO mit hr-Elementehttp://jsfiddle.net/a_incarnati/gna7r4L8/83/

OTHERWISE Sie können die hr mit einem anderen Element emulieren. Es liegt an dir.

span { display:block; width:10%; float:left; height:5px;} 
 
.line{ 
 
    width:100%; 
 
} 
 
.color-1{ 
 
    background:green; 
 
} 
 
.color-2{ 
 
    background:yellow; 
 
} 
 
.color-3{ 
 
    background:purple; 
 
} 
 
.color-4{ 
 
    background:red; 
 
} 
 
.color-5{ 
 
    background:orange; 
 
} 
 
.color-6{ 
 
    background:lightgreen; 
 
} 
 
.color-7{ 
 
    background:gold; 
 
} 
 
.color-8{ 
 
    background:brown; 
 
} 
 
.color-9{ 
 
    background:lightblue; 
 
} 
 
.color-10{ 
 
    background:lightgrey; 
 
}

<div class="line"> 
 
    <span class="color-1"></span> 
 
    <span class="color-2"></span> 
 
    <span class="color-3"></span> 
 
    <span class="color-4"></span> 
 
    <span class="color-5"></span> 
 
    <span class="color-6"></span> 
 
    <span class="color-7"></span> 
 
    <span class="color-8"></span> 
 
    <span class="color-9"></span> 
 
    <span class="color-10"></span> 
 
</div>

Quelle

2015-04-19 18:17:21

Wenn ich Sie wäre, würde ich mehrere Stunden erstellen und sie einen Wrapper zuordnen so alles, was sie zusammen passen. Sie könnten jeder Stunde eine andere ID zuweisen und sie dann mit HTML aufrufen. Weisen Sie ihnen dann mit CSS eine andere Hintergrundfarbe zu.

Zum Beispiel:

HTML:

<hr id="red"><hr id="blue">

CSS:

#red {background-color:red;} 
#blue {background-color:blue;}

FIDDLE

Sie können sie auch inline mit HTML ohne ein externes Stylesheet gestalten. Es wäre etwas entlang der Linien von aussehen:

HTML:

<hr style="background-color:red"><hr style="background-color:blue">

FIDDLE

ich irgendwie habe etwas entlang der Linien von dieser Besuche this fiddle ich eine Weile zurück gemacht die könnte zu dem gehören, was Sie sehen. Hoffe das hat geholfen!

Quelle

2015-04-19 18:19:16

Es funktioniert nicht auf allen Browsern. Bei Chrome unter Ubuntu wird die Standardfarbe in Grau mit Ihrem Code angezeigt. –

Ich selbst laufe Chrome und es funktioniert, sind Sie sicher, dass das CSS korrekt verlinkt oder importiert ist? –

Ich starte deine jsfiddle auf Chrome Version 41.0.2272.118 (64-Bit) auf Ubuntu –

Sie Ihren <hr> Hintergrund mit einem linearen Gradienten Stil können. Versuchen Sie, diese

hr { 
    border: 0; 
    height: 1px; 
    background: linear-gradient(to right, red, yellow, green); 
}

sehen sie hier in Aktion http://jsfiddle.net/es49mmcb/1/

Quelle

2015-04-19 18:43:26

Wie style <hr>, um mehrere Farben zu haben?

Antwort

Verwandte Themen