Pride HTML Dividers

[biteshelter]

Something small I thought someone here might like :)

I made some pride-themed dividers to use for bio decoration in my personal wiki. Since it's just in-line styling, it should work in Dreamwidth posts on modern browsers as well. Older browsers will show a blank divider and places that don't allow styling (like DW profile pages) will show a standard divider instead.

---

Six-stripe rainbow flag (shown above)
<hr style="border: none !important; width: 100%; margin:auto; margin-top:1.5em;margin-bottom:1.5em;height: 20px; background: linear-gradient( to bottom, #E40303, #E40303 16.66%, #FF8C00 16.66%, #FF8C00 33.32%, #FFED00 33.32%, #FFED00 49.98%, #008026 49.98%, #008026 66.64%, #24408E 66.64%, #24408E 83.3%, #732982 83.3%, #732982);">

11-stripe rainbow flag

---

<hr style="border: none !important; width: 100%; margin:auto; margin-top:1.5em;margin-bottom:1.5em;height: 30px; background: linear-gradient( to bottom, #FFFFFF, #FFFFFF 9.09%, #FFAFC8 9.09%, #FFAFC8 18.18%, #74D7EE 18.18%, #74D7EE 27.27%, #613915 27.27%, #613915 36.36%, #000000 36.36%, #000000 45.45%, #E40303 45.45%, #E40303 54.54%, #FF8C00 54.54%, #FF8C00 63.63%, #FFED00 63.63%, #FFED00 72.72%, #008026 72.72%, #008026 81.81%, #24408E 81.81%, #24408E 90.90%, #732982 90.90%, #732982);">

Trans

---

<hr style="border: none !important; width: 100%; margin:auto; margin-top:1.5em;margin-bottom:1.5em;height: 20px; background: linear-gradient( to bottom, #5BCEFA, #5BCEFA 20%, #F5A9B8 20%, #F5A9B8 40%, #FFFFFF 40%, #FFFFFF 60%, #F5A9B8 60%, #F5A9B8 80%, #5BCEFA 80%, #5BCEFA);">

Nonbinary

---

<hr style="border: none !important; width: 100%; margin:auto; margin-top:1.5em;margin-bottom:1.5em;height: 20px; background: linear-gradient( to bottom, #FCF434, #FCF434 25%, #FFFFFF 25%, #FFFFFF 50%, #9C59D1 50%, #9C59D1 75%, #2C2C2C 75%, #2C2C2C)">

Bisexual

---

<hr style="border: none !important; width: 100%; margin:auto; margin-top:1.5em;margin-bottom:1.5em;height: 20px; background: linear-gradient(to bottom, #D60270, #D60270 40%, #9B4F96 40%, #9B4F96 60%, #0038A8 60%, #0038A8);">

Aromantic

---

<hr style="border: none !important; width: 100%; margin:auto; margin-top:1.5em;margin-bottom:1.5em;height: 20px; background: linear-gradient( to bottom, #3DA542, #3DA542 20%, #A7D379 20%, #A7D379 40%, #FFFFFF 40%, #FFFFFF 60%, #A9A9A9 60%, #A9A9A9 80%, #000000 80%, #000000);">

Asexual

---

<hr style="border: none !important; width: 100%; margin:auto; margin-top:0.5em;margin-bottom:0.5em;height: 20px; background: linear-gradient(to bottom, #000000, #000000 25%, #A5A5A5 25%, #A5A5A5 50%, #FFFFFF 50%, #FFFFFF 75%, #84067C 75%, #84067C);">




Start with this:
<hr style="border: none !important; width: 100%; margin:auto; margin-top:1.5em;margin-bottom:1.5em;height: 20px; background: linear-gradient(to bottom, );">

The flag information will go in the parentheses for "linear-gradient" seen near the end of the tag.

1. Get the hex code for each color. If you don't have a browser color picker, you can use a site like Flag Color Codes.
2. After "to bottom," paste each hex code twice in order from top to bottom. Each hex code should include the # symbol and be separated with a comma if there's another code after it.
   • For an ace flag, it looks like: linear-gradient(to bottom, #000000, #000000, #A5A5A5, #A5A5A5, #FFFFFF, #FFFFFF, #84067C, #84067C);
3. If you've done this right, your preview should give you a very blurry version of your flag. To stop it from blurring, you need to specify where each color should start and stop.
4. Divide 100% by the number of stripes you have to determine your step size.
5. Count the steps using the step size you found at the beginning. For a 4-stripe flag, it should be: 25%, 50%, 75%.
   • You don't need to include 0% or 100% because the browser will assume it for you.
   • You can include decimal places. Incrementing by 16.66% works fine for a 6-stripe flag.
6. For each neighboring pair of hex codes that aren't identical, put the percentage after the hex codes but before their comma separators. Start with the lowest percentage and go up for each pair as you go down the list.
   • For an ace flag, it looks like: linear-gradient(to bottom, #000000, #000000 25%, #A5A5A5 25%, #A5A5A5 50%, #FFFFFF 50%, #FFFFFF 75%, #84067C 75%, #84067C);

Before percentages:

---

With percentages:

---

Comments

[dissectionist]

Aw, these are lovely! Thank you for sharing them. :)

[biteshelter]

You're welcome! I'm glad you like them.

[vriddy]

Oooh they look super neat :D

[biteshelter]

Thank you! This linear gradient technique can be applied to basically any HTML, but I found this to be a very unobtrusive way to make resizable flags.

[redsixwing]

Wow, nicely done!

[biteshelter]

Thank you! :)

[dhampyresa]

How cute!

[biteshelter]

Thank you! ^-^

[soc_puppet]

Oh, this is super fun! Thanks for sharing ♥

[biteshelter]

You're welcome! I'm glad you think so ^-^

[jellyfishlover]

These are so lovely! Thank you for making them!

[biteshelter]

Happy to share! It took a little work to figure out but I hope someone finds it useful :)

[mistressofmuses]

These are so cool!

[biteshelter]

Thank you! :D

[grayestofghosts]

These are cool! thank you!

[biteshelter]

You're welcome! I'm glad you like them!

[scintilla10]

These are so cheerful and charming! Thanks for sharing!

[biteshelter]

Gladly!
(That's a cute rainbow icon ^-^)

[nosleepforthewatcher]

Oh these are awesome!! I'm going to have to start decorating my profile with these!

[biteshelter]

Yay! I'm glad you found them useful!

[facethestrange]

Thank you for sharing, what an awesome idea! :D ♡

[biteshelter]

You're welcome, I'm glad you like it! :D

[bluedreaming]

These are lovely! And they make great flags for intro posts/etc too!

[biteshelter]

Agreed! Basing them on HTML's built-in dividers makes them pair well with text for intro posts ^-^

[tropicsbear]

Thank you so much for sharing! These are so neat!

[biteshelter]

You're welcome, I'm glad you like them! :)

[silveradept]

That's some very fancy CSS work there!

Is it okay to share these out more widely?

[biteshelter]

Thank you! Gradients are definitely outside my usual wheelhouse, but they're useful for some neat effects.

Feel free to share them! Thank you for asking :)

[falkner]

This is super neat!

[renfys]

These are amazing.