A horizontal rule can be a nice, quick, and easy separator for your HTML content. Did you know you can style an HR element? In under four minutes, style a horizontal rule element with CSS in order to create a fading effect on the right and left sides. Soften the edges a bit, and it adds a nice touch to an otherwise plain rule.
- [Chris] Hi, this is Chris Converse and in this episode, we'll style a horizontal rule element with CSS in order to create a fading effect on the right and left sides. So, if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in your favorite text editor and when you have the HTML file open, up in the head area, you'll see a link to style that CSS, we'll be opening this in a moment. If we continue down, we have an article element and inside of the article element, we have two H2 elements and two paragraph elements. And so what we're going to do to begin in the HTML file is add a horizontal rule, so that'll be a less than sign, HR, then a greater than sign, and we're going to add this before the second h2 tag.
So, with that in place, save your HTML, let's go back to the exercise files, let's find style.css, let's open this in our text editor, let's scroll down, after the rule that targets the paragraph elements, let's come in here and add a new rule that's going to target the HR element. So, I'll type hr and then a space, add in our brackets, and set a few returns. Inside, let's begin by adding some margin properties and we'll set 30 pixels for the top and bottom then a space then 15% for the right and left value.
Next, let's set a height. We're going to set this to three pixels. Next line, let's set a border. Let's set this to zero. This will get rid of the inset border shadow that we have by default in most browsers. And then next we'll set some background image properties. So, type background-image: and then we'll type linear-gradient beginning and ending parenthesis and then a semicolon and then let's come in here and split the parenthesis open because we're going to add a couple of properties inside of here.
So, what we're going to do is we're going to set to space right, this will set the direction of the gradient, then a comma. On the next line we're going to set the color, we're going to use the rgba color space. So, rgba, beginning and ending parenthesis, then a comma, inside of the parenthesis we're going to set white which is 255 for red comma 255 for green comma 255 for blue comma then a 0 so that we have no color for the beginning.
Then we'll come in here, copy this entire line, paste it on the next line, the next line, and then finally the last line, so we'll have four copies of this color property. For the last one we'll remove the comma and then for the second color property, we're going to set the output of .5, then we'll do the same thing for the third color property and for the fourth one, we'll leave this at zero. So, with these rules in place, we'll hit Save then go back over to the browser and we'll now see the new background image property being defined inside of the horizontal rule and on the left hand side we start this at zero which is this property here.
On the right hand side, we end this with zero, which is this property here, and we go up to a maximum of .5 in the center and so now in the browser we have a gradient rule that is 50% white and fades off to 0% transparency on both the right and left edges. And so with that, I'll conclude this episode and, as always, thanks for watching.
Author
Updated
12/11/2018Released
12/6/2016Skill Level Intermediate
Duration
Views
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.
Related Courses
-
CSS to Sass: Converting an Existing Site
with John Riviello2h 31m Intermediate -
CSS: Animation
with Val Head1h 59m Intermediate
-
Introduction
-
Welcome34s
-
-
February 2019
-
Multiple background images3m 34s
-
OpenType swashes2m 36s
-
Photo gallery, part 14m 17s
-
Photo gallery, part 26m 38s
-
-
January 2019
-
Accordion panels5m 39s
-
Border image3m 54s
-
Aspect ratio3m 37s
-
Style by download type6m 51s
-
-
December 2018
-
Every nth element4m 58s
-
Layout patterns5m 17s
-
Style placeholder text2m 25s
-
-
July 2018
-
Diamond-shaped image crop5m 50s
-
Responsive iframes5m 42s
-
Create a star10m 33s
-
Color SVG with CSS5m 45s
-
Style a progress bar10m 48s
-
Curve your header4m 4s
-
Striped pattern with CSS4m 46s
-
-
June 2018
-
Clip an image3m 53s
-
Vertically aligned columns2m 47s
-
Gradient text4m 2s
-
May 2018
-
Create a speech bubble6m 20s
-
Animate SVG elements3m 37s
-
See more links7m 54s
-
April 2018
-
Create a vignette5m 47s
-
Create variables6m 33s
-
CSS not selector4m 4s
-
Parallax scroll effect4m 26s
-
-
March 2018
-
Filter a list7m 35s
-
3D shadow text3m 25s
-
Show URLs when printing4m 19s
-
Style breadcrumb links5m 27s
-
-
February 2018
-
Box sizing to the rescue4m 24s
-
Set text on an angle4m 12s
-
Triangle bullets3m 51s
-
Force text to wrap2m 8s
-
-
January 2018
-
Animate a sprite sheet5m 19s
-
Style telephone links4m 12s
-
December 2017
-
Sticky footers2m 45s
-
Selection colors3m 28s
-
November 2017
-
Detect screen resolution5m 1s
-
Continue a numbered list4m 46s
-
Add a QR code for print4m 56s
-
Interactive tab panels7m 23s
-
-
October 2017
-
Outline your text2m 56s
-
Create polka dots3m 42s
-
Gradient horizontal rule3m 22s
-
Embed SVG art in CSS3m 15s
-
Style big list numbers4m 57s
-
-
September 2017
-
Text indents3m 44s
-
Display images as grayscale2m 57s
-
Customized radio buttons7m 37s
-
-
August 2017
-
Indicating off-site links4m 15s
-
Creating a pie chart8m 42s
-
Numbering items3m 44s
-
Animating backgrounds3m 55s
-
Angled headers3m 55s
-
-
July 2017
-
Checkboxes to switches9m 36s
-
Blurring images5m 18s
-
Overlapping heading rule4m 4s
-
-
June 2017
-
Center A positioned element5m 32s
-
Put your best footer forward11m 23s
-
Mixin' it up with SASS12m 4s
-
Mixin' it up with LESS13m 15s
-
-
May 2017
-
Drop the cap5m 41s
-
Get nestled with SASS7m 4s
-
Get nestled with LESS6m 11s
-
Flex your columns5m 34s
-
Let’s focus on the focus5m 44s
-
-
April 2017
-
Expand your mobile menu6m 38s
-
Vertical and center6m 32s
-
Creating a grid9m 33s
-
-
March 2017
-
Get your links in a row8m 28s
-
Give me a few tips8m 48s
-
Setting a stylish table6m 8s
-
-
February 2017
-
Hover in a hover4m 24s
-
January 2017
-
A button for your link5m 16s
-
Visiting the visited link6m 47s
-
You can quote me5m 34s
-
A glowing property10m 11s
-
Dress up that link4m 54s
-
-
December 2016
-
Give me some background10m 45s
-
What’s your position?11m 19s
-
Let me float this by you6m 56s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Gradient horizontal rule