Создайте красивую горизонтальную линию только с CSS

Здесь есть учебник о том, как это сделать в Photoshop:

enter image description here

Я пытаюсь сделать это только с помощью CSS. Чем ближе я могу попасть, тем ниже 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>

Выполнение градиента в тени кажется довольно жестким. Любые идеи, как я мог бы улучшить это?

Ответы

Ответ 1

Я использовал бы radial-gradient для псевдоэлемента вместо box-shadow, поскольку он сжимается ближе к краям.

Расположите radial-gradient над <hr> так, чтобы он разрезал пополам. Затем расположите другой псевдоэлемент чуть ниже <hr> с тем же цветом, что и фон и высота, достаточно большие, чтобы покрыть остальную часть градиента.

Обновлен 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;
}

Ответ 2

Пожалуйста, посмотрите https://codepen.io/ibrahimjabbari/pen/ozinB. Этот веб-сайт предоставляет 18 стилей горизонтальных линий. Некоторые кажутся удивительными.

Ниже приведен пример.

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);
}

введите описание изображения здесь

Ответ 3

Вот простейшая форма для этого:

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); 
}