Curved Edges
As demonstrated on the Basic Boxes page of the Box module, the border-radius property can be added to one, two, three, or four sides of a box to create curved edges. The same principle applies to horizontal rules. To round the ends of horizontal rules, you must specify their height and which borders are visible so that the length and direction of the curves can be calculated.
In this first example, a radius of 20px is used to create a line with two curved edges that slope downwards.
<hr style="height: 30px; border-color: #BE0000; border-width: 3px 0 0 0; border-radius: 20px; margin: 1.5rem 0;" />In this second example, the margins of two horizontal lines have been adjusted so that two lines with different curves sit on top of one another. The resulting effect simulates curved arrows pointing towards the horizontal line.
<hr style="height: 45px; margin: 0; border-style: solid; border-color: #001E44; border-width: 0 0 0.5px 0; border-radius: 20px;" />
<hr style="height: 45px; margin: -1px 0 0 0; border-color: #001E44; border-width: 0.5px 0 0 0; border-radius: 20px;" />This third example uses the same approach as the second example. However, in this instance four horizontal lines are used to create the effect.
<hr style="height: 50px; margin: 0 30% -52px 25%; border-style: solid; border-color: #BE0000; border-width: 0 0 3px 0; border-radius: 35px;" />
<hr style="height: 50px; margin: 0 25% 0 30%; border-style: solid; border-color: #890000; border-width: 0 0 2px 0; border-radius: 35px;" />
<hr style="height: 50px; margin: -1px 25% 0 30%; border-color: #BE0000; border-width: 2px 0 0 0; border-radius: 35px;" />
<hr style="height: 50px; margin: -52px 30% 0 25%; border-color: #890000; border-width: 3px 0 0 0; border-radius: 35px;" />The fourth example uses six horizontal lines.
<hr style="height: 50px; margin: 0 30% -67px 20%; border-style: solid; border-color: #890000; border-width: 0 0 2px 0; border-radius: 25px;" />
<hr style="height: 65px; margin: 0 25% -52px 25%; border-style: solid; border-color: #BE0000; border-width: 0 0 3px 0; border-radius: 50px;" />
<hr style="height: 50px; margin: 0 20% 0 30%; border-style: solid; border-color: #890000; border-width: 0 0 2px 0; border-radius: 25px;" />
<hr style="height: 50px; margin: -1px 30% 0 20%; border-color: #BE0000; border-width: 2px 0 0 0; border-radius: 25px;" />
<hr style="height: 65px; margin: -52px 25% 0 25%; border-color: #890000; border-width: 3px 0 0 0; border-radius: 50px;" />
<hr style="height: 50px; margin: -67px 20% 0 30%; border-color: #BE0000; border-width: 2px 0 0 0; border-radius: 25px;" />And the fifth example and final example demonstrates how the border-style property can be altered to create an alternate effect.
<hr style="height: 50px; margin: 0 35% -69px 20%; border-style: solid; border-color: #BE0000; border-width: 0 0 1px 0; border-radius: 15px;" />
<hr style="height: 65px; margin: 0 25% -52px 25%; border-style: dotted; border-color: #3ABFC0; border-width: 0 0 5px 0; border-radius: 50px;" />
<hr style="height: 50px; margin: 0 20% 0 35%; border-style: solid; border-color: #BE0000; border-width: 0 0 1px 0; border-radius: 15px;" />
<hr style="height: 50px; margin: -2px 35% 0 20%; border-color: #BE0000; border-width: 1px 0 0 0; border-radius: 15px;" />
<hr style="height: 65px; margin: -52px 25% 0 25%; border-style: dotted; border-color: #3ABFC0; border-width: 5px 0 0 0; border-radius: 50px;" />
<hr style="height: 50px; margin: -69px 20% 0 35%; border-color: #BE0000; border-width: 1px 0 0 0; border-radius: 15px;" />Color Shifting and Shading
Colors can be modified either through gradient shifting or incremental shading, (i.e., a combination of lighter and darker shades of the same color to create a variety of visual effects), using the border-style property. Gradient shifting can be applied to backgrounds of horizontal rules and other elements. Incremental shading can be applied to borders. For more information on applying incremental shading to borders see the Box Borders and Backgrounds page of the boxes Manual.
Gradient Shifting - Linear Gradients
A gradient is a smooth transition between two or more colors that may be applied to backgrounds of elements. The style used to create a gradient is: background-image: linear-gradient(direction, color1, color2, etc.).
The default style of linear gradient is top to bottom. When using this effect, it is not necessary to indicate directionality of the gradient. In this example, the gradient begins with Nittany Navy (#001E44) and transitions to Creek (#3EA39E).
<hr style="height: 20px; background-image: linear-gradient(#BE0000, #3ABFC0);" />To change the direction in which Nittany Navy starts then transitions into Slate, simply specify if you'd like it to transition to the top, right, or left in the linear-gradient expression.
<hr style="height: 20px; background-image: linear-gradient(to right, #BE0000, #3ABFC0);" />Gradient Shifting - Diagonal Gradients
Diagonal linear gradients can also be created by setting both the horizontal and vertical starting points (ex: "bottom right") or indicating a degree of rotation (ex: "135deg"). In this example, the gradient starts at the top left and moves to the bottom right and the ratio of colors has been adjusted by adding the color code for Creek to the position for a third color.
<hr style="height: 20px; background-image: linear-gradient(to bottom right, #BE0000, #3ABFC0, #3ABFC0);" />Quick Tip: Change Color Ratio
If you want to make sure a specific color in your gradient is more prominent, don't be afraid to repeat a color twice.
Gradients with More Than Two Colors
The previous examples have used two colors; however, it is possible to create gradients with many more colors. For instance, this rainbow was created using Utah's seven colors.
<hr style="height: 30px; background-image: linear-gradient(to right, #BE0000, #FFB81D, #FFB81D, #6CC24A, #3ABFC0, #708E99, #890000);" />Shifting and Shading with Transparency
Gradients with Transparency
Linear gradients can also be created with one only one color visible (as was the case with the library of code snippet example). In these instances they are paired with a 100% transparent “color.” Using this effect creates a smooth transition from the background to the solid color of your choice. The next example uses three color placements to transition from fully transparent to Original 1887 (#BC204B) and back to fully transparent.
<hr style="border-top: none; height: 15px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #BE0000, rgba(0, 0, 0, 0)); margin: 1.5rem 0;" />Color Codes with Transparency
To alter/control the level of color saturation use a two-character suffix on the hex code. The higher the value used, the greater the saturation of color will be. A listing of hexadecimal color codes for transparency from GitHub is a good resource to help determine which characters to use. (Note, the resource also lists prefixes that can be added; however, they do not work in Canvas.)
<hr style="border-top: 10px solid #BE000035; border-bottom: 10px solid #BE0000;" />Quick Tip: Transparency
When using transparency it is important to remember the color of your page (or background). This is the color that will appear in the "transparent" portions of the border line.
Combining Curved Edges and Shading
Both gradients and curved edges can be combined to create other effects.
In this first example, the border-radius and the background-image style properties are used to create a purple and grey colored line with two curved edges.
<hr style="height: 30px; border-radius: 0 30px; background-image: linear-gradient(to bottom left, #890000, #890000, rgba(0, 0, 0, 0));" />In this second example, the border-radius and the background-image style properties are used in conjunction with margins, and padding within a <div> to create a curved frame for content.
<div style="margin: 2.5rem 0; padding: 2px; border-radius: 20px 0; background-image: linear-gradient(170deg, #BE0000, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #BE0000);">
<div style="margin: 0; padding: 1rem; border-radius: 20px 0; background-color: white;">
<p>Content</p>
</div>
</div>
0 Comments
Add your comment