eine schöne horizontale Linie mit CSS nur

Es gibt ein Tutorial here, wie dies in Photoshop zu tun:eine schöne horizontale Linie mit CSS nur

enter image description here

Ich versuche, dies nur mit CSS zu tun. Je näher ich kommen kann, ist dies fiddle.

hr.fancy-line { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
    box-shadow: 0px -2px 4px rgba(136,136,136,0.75); 
}

<hr class="fancy-line"></hr>

einen Gradienten auf dem Schatten tun scheint ziemlich hart. Irgendwelche Ideen, wie ich das verbessern könnte?

Quelle

2013-03-05 Mick

Closest ich bekommen kann: http://jsfiddle.net/yLbtC/6/ – Passerby

Das ist großartig @Passerby. Es sieht erstaunlich aus. Da ist ein kleines Problem, wenn das div aber leer ist. – Mick

http://jsfiddle.net/joshnh/HdwKA/ und http://jsfiddle.net/4yZNN/ Ähnliche Ergebnisse –

Ich würde ein radial-gradient zu einem Pseudo-Element anstelle eines box-shadow verwenden, da es sich zu den Rändern hin verjüngt.

Positionieren Sie die radial-gradient über der <hr>, so dass es in zwei Hälften geteilt wird. Dann positioniere ein weiteres Pseudo-Element genau unter der <hr> mit der gleichen Farbe wie der Hintergrund und die Höhe gerade groß genug, um den Rest des Gradienten abzudecken.

Updated JSFiddle

CSS

hr.fancy-line { 
    border: 0; 
    height: 1px; 

} 
hr.fancy-line:before { 
    top: -0.5em; 
    height: 1em; 
} 
hr.fancy-line:after { 
    content:''; 
    height: 0.5em; 
    top: 1px; 
} 

hr.fancy-line:before, hr.fancy-line:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
} 

hr.fancy-line, hr.fancy-line:before { 
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%); 
} 

body, hr.fancy-line:after { 
    background: #f4f4f4; 
}

Quelle

2013-03-05 04:58:35 thgaskell

Das sieht super aus! – Mick

Nur aus Neugier, gibt es einen bestimmten Grund, warum Sie 'em' anstelle von' px' verwenden? Ist das eine bessere Praxis? – Mick

@Patt Ich versuche, 'em' mehr zu verwenden, weil es besser skaliert, wenn sich' font-size' ändert. insgesamt hat die '

' eine Höhe von 1em, was gleich der aktuellen' font-size' ist. Ich könnte mir vorstellen, dass die '

' den Platzbedarf von 1 Line-Sounds fair aufnehmen. – thgaskell

haben Sie einen Blick auf https://codepen.io/ibrahimjabbari/pen/ozinB. Diese Website bietet 18 Arten von horizontalen Linien. Manche scheinen fantastisch.

Folgendes ist ein Beispiel.

hr.style17 { 
    border-top: 1px solid #8c8b8b; 
    text-align: center; 
} 
hr.style17:after { 
    content: '§'; 
    display: inline-block; 
    position: relative; 
    top: -14px; 
    padding: 0 10px; 
    background: #f0f0f0; 
    color: #8c8b8b; 
    font-size: 18px; 
    -webkit-transform: rotate(60deg); 
    -moz-transform: rotate(60deg); 
    transform: rotate(60deg); 
}

Quelle

2016-06-21 15:46:31 Allen

Hier ist die einfachste Form dieses Ziel zu erreichen:

hr{ 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

Quelle

2017-09-19 09:29:48

eine schöne horizontale Linie mit CSS nur

Antwort

Verwandte Themen