![]() ![]() This snippet is different, as it utilizes content from tags. It often involves techniques that aren’t very accessible. Placing text inside a horizontal rule can be tricky. See the Pen Some HR Styles by Mark Murray Medium Style with Accessibility by Zoë Bijl Examples include the usage of symbols, centered text, colors and border patterns. This snippet offers nine interesting horizontal rules that can fit a variety of styles and use cases. See the Pen Accordion Effect with Horizontal Rules by Will Boyd Simple HR Style Variations by Mark Murray A rare instance of the good old being used for functional purposes. This pure CSS take on the feature includes horizontal rules as part of the user interface. See the Pen Fancy Horizontal Rules by szpakoli Accordion Rules by Will BoydĪccordions have become one of the more popular UI elements due to their penchant for being space savers. Combined with the rule’s short width and bright color, it helps readers delineate one section of content from another. A standard horizontal rule is enhanced with shapes (circle, diamond, star, etc.) and provides for an attractive visual. Here’s proof that subtlety can still stand out. See the Pen Inline horizontal rule by Ohad Iconic HR Shapes by szpakoli It’s also delightfully simple in terms of code. Text or other design elements can be placed inline with the divider, making for an attention-grabbing effect. While this snippet doesn’t use an actual horizontal rule, it simulates the effect with CSS. See the Pen A Horizontal rule-er by John W Inline Lines by Ohad It features a large conglomerate of tags (100 in all) that are styled to simulate the look of a ruler. This example is incredibly clever, if a bit on the extreme side. If you’re looking to take your HR up to the next level, you’ll want to check out this collection of fanciful dividers that go beyond the default. They can also be used as an enhanced branding mechanism, complete with color and logo elements in tow. Horizontal rules can be quite decorative, whether you prefer a bold or subtle design. It’s easy to simply place them within our content without any attention to detail.īut this venerable HTML tag is capable of doing so much more – thanks to some clever CSS. The horizontal rule ( hr) is one of them. Some design elements are so common that they almost become afterthoughts. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |