{"id":5928,"date":"2020-11-06T17:34:00","date_gmt":"2020-11-06T17:34:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5928"},"modified":"2020-11-22T17:41:48","modified_gmt":"2020-11-22T17:41:48","slug":"8-horizontal-rules-and-dividers-enhanced-with-css","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/8-horizontal-rules-and-dividers-enhanced-with-css\/","title":{"rendered":"8 Horizontal Rules and Dividers Enhanced with CSS"},"content":{"rendered":"\n<p>Some design elements are so common that they almost become afterthoughts. The&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/hr\" target=\"_blank\" rel=\"noreferrer noopener\">horizontal rule<\/a>&nbsp;is one of them. It\u2019s easy to simply place them within our content without any attention to detail.<\/p>\n\n\n\n<p>But this venerable HTML tag is capable of doing so much more \u2013 thanks to some clever CSS. Horizontal rules can be quite decorative, whether you prefer a bold or subtle design. They can also be used as an enhanced branding mechanism, complete with color and logo elements in tow.<\/p>\n\n\n\n<p>If you\u2019re looking to take your HR\u2019s up to the next level, you\u2019ll want to check out this collection of fanciful dividers that go beyond the default. Let\u2019s dig in!<\/p>\n\n\n\n<h2>01. The Measure of an HR<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poyBaoj\" src=\"\/\/codepen.io\/anon\/embed\/poyBaoj?height=250&amp;theme-id=1&amp;slug-hash=poyBaoj&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poyBaoj\" title=\"CodePen Embed poyBaoj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This example is incredibly clever, if a bit on the extreme side. It features a large conglomerate of\u00a0<code>&lt;hr><\/code>\u00a0tags (100 in all) that are styled to simulate the look of a ruler.\u00a0Practical? Maybe not. But it\u2019s certainly creative.<\/p>\n\n\n\n<h2>02. Inline Lines<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GqXwYp\" src=\"\/\/codepen.io\/anon\/embed\/GqXwYp?height=250&amp;theme-id=1&amp;slug-hash=GqXwYp&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GqXwYp\" title=\"CodePen Embed GqXwYp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>While this snippet doesn\u2019t use an actual horizontal rule, it simulates the effect with CSS. Text or other design elements can be placed in line with the divider, making for an attention-grabbing effect. It\u2019s also delightfully simple in terms of code.<\/p>\n\n\n\n<h2>03. Iconic Shapes<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rFneG\" src=\"\/\/codepen.io\/anon\/embed\/rFneG?height=250&amp;theme-id=1&amp;slug-hash=rFneG&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rFneG\" title=\"CodePen Embed rFneG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here\u2019s proof that subtlety can still stand out. A standard horizontal rule is enhanced with\u00a0shapes\u00a0(circle, diamond, star, etc.) and provides for an attractive visual. Combined with the rule\u2019s short width and bright color, it helps readers delineate one section of content from another.<\/p>\n\n\n\n<h2>04. Accordion Rules<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_brdCk\" src=\"\/\/codepen.io\/anon\/embed\/brdCk?height=250&amp;theme-id=1&amp;slug-hash=brdCk&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed brdCk\" title=\"CodePen Embed brdCk\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Accordions have become one of the more popular UI elements due to their penchant for being space savers. This pure CSS take on the feature includes horizontal rules as part of the usable interface. A rare instance of the good old&nbsp;<code>&lt;hr&gt;<\/code>&nbsp;being used for functional purposes.<\/p>\n\n\n\n<h2>05. Simple Style Variations<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_raVPmp\" src=\"\/\/codepen.io\/anon\/embed\/raVPmp?height=250&amp;theme-id=1&amp;slug-hash=raVPmp&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed raVPmp\" title=\"CodePen Embed raVPmp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This snippet offers up 9 interesting horizontal rules that can fit a variety of styles and use cases. Examples include the usage of symbols, centered text, colors and\u00a0border patterns. There\u2019s something here for everyone.<\/p>\n\n\n\n<h2>06. Medium Style with Accessibility<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mbHCx\" src=\"\/\/codepen.io\/anon\/embed\/mbHCx?height=250&amp;theme-id=1&amp;slug-hash=mbHCx&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mbHCx\" title=\"CodePen Embed mbHCx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Placing text inside a horizontal rule can be tricky. It often involves techniques that aren\u2019t very accessible. This snippet is different, as it utilizes content from&nbsp;<code>&lt;h2&gt;<\/code>&nbsp;tags. It not only offers a cool Medium-style aesthetic, but it\u2019s friendly to screen readers as well.<\/p>\n\n\n\n<h2>07. Decorative and Minimal Designs<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ozinB\" src=\"\/\/codepen.io\/anon\/embed\/ozinB?height=250&amp;theme-id=1&amp;slug-hash=ozinB&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ozinB\" title=\"CodePen Embed ozinB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Perhaps you\u2019d like your dividers to look nice without distracting from the rest of your content. This collection of 18 simple styles is for you. The effects are well-executed without going over-the-top with flashy features.<\/p>\n\n\n\n<h2>08. Charlie Brown\u2019s Shirt or Bart Simpson\u2019s Hair?<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Jojvqw\" src=\"\/\/codepen.io\/anon\/embed\/Jojvqw?height=250&amp;theme-id=1&amp;slug-hash=Jojvqw&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Jojvqw\" title=\"CodePen Embed Jojvqw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>When viewing this zig-zag pattern, one conjures up images of cartoon characters. But it&#8217;s also a clever bit of code. It\u2019s a combination of two\u00a0<code>&lt;hr><\/code>\u00a0tags with angled CSS gradients. Now, which character does it best represent? Let\u2019s go with\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.google.com\/search?q=bart+simpson&amp;sxsrf=ALeKk00Lw-cqd9HLN0Nmfl4xSRhdOPGsPQ:1603112619828&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=2ahUKEwi8mPXx28DsAhVGlXIEHeW-A8YQ_AUoAXoECC4QAw&amp;biw=1920&amp;bih=938\" target=\"_blank\">Bart\u2019s hair<\/a>.<\/p>\n\n\n\n<h2>(Horizontally) Divide and Conquer<\/h2>\n\n\n\n<p>Sure, the default styling of a horizontal rule gets the job done \u2013 but where\u2019s the fun in that? Take a cue from the examples above and create something that compliments all of your great design work.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some design elements are so common that they almost become afterthoughts. The&nbsp;horizontal rule&nbsp;is one of them. It\u2019s easy to simply place them within our content without any attention to detail. But this venerable HTML tag is capable of doing so much more \u2013 thanks to some clever CSS. Horizontal rules can be quite decorative, whether [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5929,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,131],"tags":[25,146,132],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/11\/horizontal-rule-snippets.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1xC","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5928"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5928"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5928\/revisions"}],"predecessor-version":[{"id":5930,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5928\/revisions\/5930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5929"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}