[25] 3D Text Navs

[lina_trinch]

hmd
open post
permissions
biosheet
info

prismatica

application
contact
information
cr chart
activity

mask or menace

application
contact
information
cr chart
activity

credit

Simple Version Code:
<center><div style="overflow:hidden;"> <div style="width: 500px;border: 20px solid #FFB7D5;background: #fafafa;font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size:45px;color:#fff;text-shadow:1px 1px 0 #FFB7D5, 2px 2px 0 #FFB7D5, 3px 3px 0 #FFB7D5, 4px 4px 0 #FFB7D5, 5px 5px 0 #FFB7D5, 6px 6px 0 #FFB7D5;overflow:hidden;padding-bottom:15px;line-height: 52px;"> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <details><summary style="outline:none;cursor:pointer;text-fill-color:#fff;-webkit-text-fill-color:#fff;-moz-text-fill-color:#fff;color: transparent;margin-right: 45px;">game</summary> <div style="font-size: 35px;background: rgba(255, 183, 213,0.2);margin: 10px 80px 0 80px;box-shadow:1px 1px 0 #FFB7D5, 2px 2px 0 #FFB7D5, 3px 3px 0 #FFB7D5, 4px 4px 0 #FFB7D5, 5px 5px 0 #FFB7D5, 6px 6px 0 #FFB7D5;"> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a> </div> </details> <details><summary style="outline:none;cursor:pointer;text-fill-color:#fff;-webkit-text-fill-color:#fff;-moz-text-fill-color:#fff;color: transparent;margin-right: 45px;">game</summary> <div style="font-size: 35px;background: rgba(255, 183, 213,0.2);margin: 10px 80px 0 80px;box-shadow:1px 1px 0 #FFB7D5, 2px 2px 0 #FFB7D5, 3px 3px 0 #FFB7D5, 4px 4px 0 #FFB7D5, 5px 5px 0 #FFB7D5, 6px 6px 0 #FFB7D5;"> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a> </div> </details> <a href="https://killthecake.dreamwidth.org/" style="color: #fff;text-decoration:none;">credit</a> </div> </div>

hmd
open post
permissions
biosheet
info

prismatica

application
contact
information
cr chart
activity

mask or menace

application
contact
information
cr chart
activity

credit

Gradient Version Code:
<center><div style="overflow:hidden;"> <div style="width: 540px;background: linear-gradient(45deg, #ffb7d5, #ff9ac4, #ff6fab, #ff9ac4, #ffb7d5);padding: 1px;"> <div style="width: 500px;background: #fafafa;font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size:45px;color:#fff;text-shadow:1px 1px 0 #ff9ac4, 2px 2px 0 #FFB7D5, 3px 3px 0 #ff9ac4, 4px 4px 0 #FFB7D5, 5px 5px 0 #ff9ac4, 6px 6px 0 #FFB7D5;overflow:hidden;padding-bottom:15px;margin: 20px;line-height: 52px;"> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <details><summary style="outline:none;cursor:pointer;text-fill-color:#fff;-webkit-text-fill-color:#fff;-moz-text-fill-color:#fff;color: transparent;margin-right: 45px;">game</summary> <div style="font-size: 35px;background: linear-gradient(45deg, rgba(255, 183, 213,0.2),rgba(255, 154, 196,0.2),rgba(255, 111, 171,0.2),rgba(255, 154, 196,0.2),rgba(255, 183, 213,0.2));margin: 10px 80px 0 80px;box-shadow:1px 1px 0 #FFB7D5, 2px 2px 0 #FFB7D5, 3px 3px 0 #FFB7D5, 4px 4px 0 #FFB7D5, 5px 5px 0 #FFB7D5, 6px 6px 0 #FFB7D5;"> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a> </div> </details> <details><summary style="outline:none;cursor:pointer;text-fill-color:#fff;-webkit-text-fill-color:#fff;-moz-text-fill-color:#fff;color: transparent;margin-right: 45px;">game</summary> <div style="font-size: 35px;background: linear-gradient(45deg, rgba(255, 183, 213,0.2),rgba(255, 154, 196,0.2),rgba(255, 111, 171,0.2),rgba(255, 154, 196,0.2),rgba(255, 183, 213,0.2));margin: 10px 80px 0 80px;box-shadow:1px 1px 0 #FFB7D5, 2px 2px 0 #FFB7D5, 3px 3px 0 #FFB7D5, 4px 4px 0 #FFB7D5, 5px 5px 0 #FFB7D5, 6px 6px 0 #FFB7D5;"> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a><br /> <a href="URL" style="color: #fff;text-decoration:none;">link</a> </div> </details> <a href="https://killthecake.dreamwidth.org/" style="color: #fff;text-decoration:none;">credit</a> </div></div></div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ I did a crazy work around to get the arrows for the dropdowns/details tags to disappear. It should work on all browsers but please let me know if you have any problems. ❖ You can add as many links and/or dropdowns as you want. The height will adjust. Just, y'know, don't remove the credit bit. ❖ If you want a different look for a splash page type journal layout, you can remove the borders/gradient background, the off white background, and make the font size larger. Big, bold, 3D links! I just think it's neat. ❖ As usual, I learned how to do this text trick from Tessisamess. Ctrl+F & Replace: ❖ URL - link url ❖ link - link text. lowercase letters will appear as they are in the previews. ❖ game - header of the dropdown menu. you can remove these by deleting everything between the details tags or add more by c/ping the same code block. #ffb7d5 border, text shadows #ff9ac4 border gradient, staggering text shadows (gradient version only) #ff6fab border gradient (gradient version only) #fafafa background #fff text color rgba(255, 183, 213,0.2) background of dropdowns rgba(255, 154, 196,0.2) gradient background of dropdowns (gradient version only) rgba(255, 111, 171,0.2) gradient background of dropdowns (gradient version only) Learn about rgba colors here!

Comments

[plentyofwords]

Hi! This is Beth and I want to use the gradient drop-down version of the code but I wanted to make the gradient in dark blues/greys/blacks but for the life of me, I can't figure out how to make it work. Whenever you have the time do you think you might be able to help me?

Thank you!!