Using CSS alone, design a stunning horizontal divider

If you're looking to recreate a similar effect using CSS alone, check out this CSS fiddle I've put together. 

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>

Challenged by adding the gradient to the shadow? Any thoughts on how this could be enhanced?

css

Answer №1

In order to achieve a more tapered effect towards the edges, I suggest using a radial-gradient on a pseudo-element instead of a box-shadow.

You can position the radial-gradient above the <hr> element so that it appears cut in half. Then, place another pseudo-element just below the <hr> with the same background color and height sufficient to cover the remaining part of the gradient.

Check out the updated JSFiddle version here

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

Answer №2

Check out this collection of 18 stylish horizontal lines on this website. Some of them are really impressive.

Take a look at the example below:

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

https://i.sstatic.net/wzjSp.png

Answer №3

Below is a straightforward method to accomplish this task:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to vary the font size for different fonts within a single page?

Imagine using Helvetica for English text and a unique, exotic font (from an ASCII perspective) for another language on the same page. Even with the same font size, one font may appear larger to the eye. Is it possible to specify different font sizes for ...

javascriptjqueryhtmlcssfonts

How can you use JavaScript to retrieve the position of an element on a webpage?

As mentioned in the title, I am looking for a way to retrieve the x and y positions of an element relative to its location on the webpage and based on its positioning schemes such as absolute or relative. ...

javascriptcssxhtmlpositioning

Bootstrap 5 - Achieve automatic column width within a row

In my Bootstrap 5 setup, I have a variety of pages that have different column layouts - sometimes 2 columns, sometimes 3. The template system I'm using dynamically adjusts the layout to accommodate the need for a third column when necessary. <div ...

htmlcssbootstrap-5

Using Javascript/JQuery to apply pixel values in CSS styling

Recently, I've come across a discrepancy between two different ways of accessing CSS properties in jQuery: <foo>.css('marginTop') (which I always assumed was the standard notation) and <foo>.css('margin-top') (which ...

javascriptjquerycss

The functionality of displaying one div while hiding another upon click seems to be malfunctioning

Can anyone lend a hand? I'm having trouble with my code - the section isn't showing up after clicking the button. <script> $("#img1").on('click', function() { $("#div1").fadeIn(); $("#div2,#div3,#div4").fadeOut(); }); $(" ...

jquerycssshow-hide

What is the best way to animate CSS elements using jQuery to slide in from the right, left, or bottom?

When the page is scrolled on my website, I want table_area-left to move from left to right to its current position, table_area-right to move from right to left to its current position, and morph button to move from down to up. I am struggling to find the j ...

javascriptjqueryhtmlcss

What could be causing the menu to not align in the center?

Take a look at the HTML code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v ...

htmlcssbootstrap-5

Ways to resize column widths in tree views on Odoo version 10?

I have been struggling to adjust the column width of the columns in my tree view. I have attempted a few different solutions: Trying to change the width attribute in the field tag: width="100px" or width="15%%" Using the style att ...

csstreeviewodooodoo-10odoo-view

A guide on how to selectively blur and make the background transparent in jgrowl notifications without affecting the content

After some experimentation, I found that making the jGrowl notification background both transparent and blurry was not possible. When applying blur to the background, the content also became blurry, which is not the desired effect. If you want a transparen ...

phpjqueryhtmlcssjgrowl

How can I position two bootstrap tables side by side based on their columns

Currently, I am utilizing bootstrap and Laravel form control to generate the table structures below. The one issue I am encountering is figuring out how to align the delete and edit buttons from two separate tables. Here is a snapshot of the current layout ...

csslaravelbootstrap-4

The Battle of Naming Styles in HTML and CSS: CamelCase versus Underscores

After reading numerous articles discussing the pros and cons of camelCase and Underscore naming conventions, I have always leaned towards camelCase due to its byte-saving nature. However, upon discovering BEM, I must admit that I am now in a state of conf ...

htmlcsscamelcasingbem

Styling the Padding of MUI Select Component in ReactJS

Currently, I am facing an issue with the Material UI Select component where I am trying to decrease the padding within the element. The padding seems to be a property of one of the subclasses .MuiOutlinedInput-input, but my attempts to change the padding h ...

cssreactjsmaterial-ui

What is the reason behind fixing an overflow issue simply by moving the mouse outside of a container in IE7 and HTML?

My webpage includes a series of questions, with each question being displayed or hidden based on the answer to the previous question. Occasionally, after toggling back and forth between questions, I notice that the final question appears below its designa ...

htmlcssmouseevent

What is the best approach for extracting multiple images from a URL and inserting them individually into separate divs using JavaScript?

Is there a way to elegantly display images horizontally on my website without them stacking on top of each other? I want each image to be placed side by side in a specific space for a beautiful layout. <!DOCTYPE html> <html> <head ...

javascripthtmlcss

What is the best way to incorporate a description box for each city on the svg map that appears when you hover your mouse over it?

I am looking to display detailed descriptions for each city in the same consistent location on my map. With multiple pieces of information to include for each city, I want to ensure that the description box is positioned at the bottom of the map. Can any ...

javascripthtmlcsssvg

Errors can be thrown when using React and classNames in the class component

I'm relatively new to React and currently working on a large project. I've run into an issue where I can't use both class and className on all elements and components, particularly custom ones. To work around this, I've had to place the ...

htmlcssreactjsjsx

How to preserve alternating row styles when exporting Angular Data Table to Excel with .withButtons?

Utilizing Angular DataTable to display a list of data, with alternate row background color and border styles defined. An issue arises when exporting the Data table to excel as the alternate row style and border styles are lost. Only the raw data is includ ...

cssangularjs

How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...

cssfluid-images

Answer for background picture when reducing magnification

Currently, I am facing the challenge of converting a PSD template to HTML. Specifically, I need guidance on how to handle the background food images (highlighted in red in the image) when zooming out the browser. The total width is 1300px with a container ...

htmlcss

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

javascripthtmlcssvue.js