[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

[moosey]

I ended up changing out the wrong RBGA's and it looked all wonky lol

[lina_trinch]

hrm. If you have it posted it somewhere, can I see it?

[hello_dean]

I got the outside color changed here but I get lost in numbers trying to change the link colors and the details stuff

[lina_trinch]

Ah, okay. Let's see here.


For the links, Ctrl+F for text-shadow in your code. You should see a bit or two that looks like this:

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;

That's the shadow on the links. All I did was alternate the colors between light and dark pink. You can do the same or make a sort of ombre effect or just make them all the same color. You'll have to adjust this at least twice, once in the main chunk of code near the top and every time you have a new dropdown.


About the dropdown menus, you'll see portions that'll be labeled with details and summary. That's the things that make the dropdown effect. To change their backgrounds, Ctrl+F for background and look around until you find one that looks like this:

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));

Those rgba colors create the gradient that's one the background of those dropdown menus.


Does that help you out?

[hello_dean]

Thank you so much! That was perfect!!

[hatejakku]

Awesome! Glad it worked!