WIP Coding



Metallic Stripes


This was copied from the free coding website, so credits.

The text seems too light for some intersections, though. The darker ones, I mean.

Stripes


To make stripes, use a "repeating-linear-gradient" and slant it with "___deg".

The color combination right here is also quite nice.

Also, credits to Icy.

Triangles


Without content here, this looks like brackets adding to each other. For all I see, transparent helps the coding form shapes. Gotta experiment with that "transparent" function. The scroll part also repeats the sequence.

I'm not much of a fan of this color scheme, though, so I'll probably mess around with it and change the colors. Hopefully I can do more too.

Credits to the original coder. Sorry for not putting your name.

Adding Dark, Pale, or Light Combinations to Gradients, and In Which I Made Layers By Accident


So, adding "Dark", "Pale", "Light", etc. before a working color name (e.g. blue, green, etc.) WITHOUT a space (e.g. lightblue, darkgreen, etc.) will give a nice gradient.

There are certain colors with plural names without spaces between compound words also, such as "limegreen".

I accidentally messed it up somehow and made it look like 3-D layers, whoopsie. But this one is on my own, and it looks cool. So I'm keeping it xF.

Criss-Cross


Transparent is helping develop the shapes, and the color after the parentheses helps cooperate as well.

Note the two numbers used for the background help form the square shapes.

Circles


Credit to the original.

This one's really cool to me! Once again, transparent is helping the properties become shapes. I need to decipher this one xD.

Original




Insert text between this for the summary.

This one's super cool. Credit to the original. I left out some parts of the example infobox to prove the point.

It seems to be a variation of Circles but with more detail?

Added "dotted" seems to add a design. I wonder what else one can do.



Actual content after summary

Blablabla

Stuff

Hhhhh

Look. I needed two divides (below in Source). Weird. But I figured it out hahahah

Different Borders
I changed the former code to prove some things, so still credit.





This was a dashed border.

Go to https://coding-help.fandom.com/wiki/Borders for borders coding help hehe.

But you can make the border dashed, dotted, solid, double, inset, outset, and ridge. Just put the individual word before the color behind the border coding.

For instance:



This is ridge. As you can see, different color combos have different types of borders suiting their visual look.

Old Box-Border Coding
  

I used this for a while.

Relatively simple coding. Still looks cool :D.

It used a webkit border, which is one of the coolest borders in my opinion.

Wonder if you can combine webkit with the other kinds. Probably not.

Oh yeah. If you use more div styles than just one, you have to use that many ending divides. For this one, I used 5. It may be the organization of the div styles, but you might want to combine them if you know the coding well enough.

Really Basic Old Coding and Collapsible
<div style="background: linear-gradient(to left, #000000, navy, #002366, #000080, #0038A8, #273BE2, blue, #273BE2, #0038A8, #000080, #002366, navy, #000000); border: 2px solid #000; padding: 12px; text-align: left; color: #ffffff;">

I used this for GGaD!Galaxian's background for a bit. It was really basic; solid border, no text aligns other than left, basic linear gradient. Not much to see, huh?

Oh, and adding more than one font to a page apparently messes with the coding (font face code). So choose wisely.

Nice Dark Green Gradient
<div style="background: linear-gradient(to left, #008000, #006700, #004d00, #003400 ); border: 5px outset #005400; border-radius: 15pt; padding: 20 px;">

Colors are nice, but other than that, very basic. It's worth noting that border shapes can change, as can already be seen.

Using a Picture as Background, Me Saying Things You Can't See With Code, and Scroll function to a text box
Original coding: Credit to WillowLight7.

<div style="background:rgba(255, 255, 255,.6); padding:5px; overflow:hidden; text-align:center; color:white; margin:-50% auto 90% auto; border-radius:19px; width:500px; height:370px; overflow-x: hidden; overflow-y: scroll; box-shadow: 0 0 28px rgba(255,255,255,.9); position: relative;font-family:angelic serif;text-shadow:0 0 3px navy">

YouR NamE

Hello. This is content, and content, and content. 'Tis very contentious. You put your introramble here.

HeadinG

This is even more content. You can put anything here! Your friends, where to find you, links to stuff, etc.

HeadinG

This is even more content. You can put anything here! Your friends, where to find you, links to stuff, etc.

HeadinG

This is even more content. You can put anything here! Your friends, where to find you, links to stuff, etc.

If you want to add more content, just look in Classic Editor's source mode. There'll be a comment there with the code you need.

<div style="text-align:right;font-size:14px;color:rgba(255,255,255,0.5);text-shadow:none;">Coding by <span style="color:rgba(255,255,255,0.5);">Willowlight7 

Maroon Gradient
<div style="background:linear-gradient(0deg,#641E16,#7B241C,#922B21); padding:10px; border-radius:20px; text-align:left; margin:20px;"> <div style="background:linear gradient(50deg,#910000,#910000,#710000,#710000,#510000,#510000); padding:10px; border-radius:20px; color:#FFA600; text-align:left; margin:20px;">

Nice color gradients :).

Nice Gold-White Gradient
<div style="background:linear-gradient(180deg,#cc9932,white);"> <div style="border:8px double #7a5b1e;border-radius:1em;text-align:center;box-shadow:inset 0px 0px 10px #7a5b1e;color:#7a5b1e;">

Credit to Wollow.

Nice Water Effect Blue Gradient
<div style="background:linear-gradient(150deg, rgba(13, 24, 255, .8), rgba(0, 234, 239, .8), rgba(0, 0, 138, .8)); border: 3px solid black; border-radius:100px; padding:10px;box-shadow:0 2px 6px rgba(0,0,255,0.5), inset 0 1px rgba(60,70,240,0.3), inset 0 10px rgba(200,200,255,,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(255,255,255,0.3);margin:10px;color:black;">

<div style="background:linear-gradient(150deg, rgba(13, 24, 255, .8), rgba(0, 234, 239, .8), rgba(0, 0, 138, .8)); border: 3px solid black; border-radius:100px; padding:10px;box-shadow:0 2px 6px rgba(0,0,255,0.5), inset 0 1px rgba(60,70,240,0.3), inset 0 10px rgba(200,200,255,,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(255,255,255,0.3);margin:10px;color:black;">

Interesting Smoosh of Green and Blue in Radial
<div style="background: linear-gradient(to top, #a6f4d2 0%, #a6e6f4 15%, #a6b4f4 30%, #b3a6f4 45%, #d0a6f4 60%, #e6a6f4 75%, #f4a6f4 100%); color:#6104ed; font-size:15pt"> <div style="background:radial-gradient(mediumspringgreen,darkturquoise,aquamarine);">

Blub blub; credit to Mintfeather

My Current (8/14/19) Coding for OC pages
<div style="background:rgba(253, 0, 6, .9);border:4px solid white;box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);border-radius:20px;margin:5px;">

<div style="background:linear-gradient(150deg, rgba(29, 47, 119, 0.9), rgba(250, 133, 163, 1), rgba(242, 232, 142, 0.9)); border: 3px solid black; border-radius:100px; padding:10px;box-shadow:0 2px 6px rgba(0,0,255,0.5), inset 0 1px rgba(60,70,240,0.3), inset 0 10px rgba(200,200,107,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(255,255,255,0.3);margin:10px;color:#c11b17;">

Using RGBA, whoo!

This specific coding is for Aeorius' page, but feel free to add to the number of colors (in RGBA, which is red, green, blue, and...opacity or something related to that starting with a).

Somehow, I couldn't add font again. So yay, confirmed my theory.

Pink and Violet Red
<div style="background: linear-gradient(to right, white, lightpink, pink); color: black;">

This is white to pink.

<div style="background: linear-gradient(to right, hotpink, deeppink); color: black;">

This is like a different, darker kind of pink.

<div style="background: linear-gradient(to right, palevioletred, mediumvioletred); color: black;">

This is violet red.

<div style="background: linear-gradient(to right, white, lightpink, pink, hotpink, deeppink, mediumvioletred); color: black;">

All of them, except for pale violet red, which just didn't work as well with the others.

Red
<div style="background: linear-gradient(to right, lightsalmon, salmon, darksalmon); color: black;">

This is salmon. He is your friend...just kidding xD.

<div style="background: linear-gradient(to right, lightcoral, indianred); color: black;">

Two colors. Light coral, and "indian red".

<div style="background: linear-gradient(to right, red, crimson, firebrick, darkred); color: black;">

Reds.

Orange
<div style="background: linear-gradient(to right, Orangered, tomato, coral, darkorange, orange); color: black;">

These are the oranges. 'Tis a nice sunset color.

Yellow
<div style="background: linear-gradient(to right, lightyellow, yellow, gold); color: black;">

This is yellow, gold.

<div style="background: linear-gradient(to right, khaki, darkkhaki); color: black;">

Khaki.

<div style="background: linear-gradient(to right, lemonchiffon, lightgoldenrodyellow, palegoldenrod, papayawhip, moccasin, peachpuff); color: black;">

Too many food names. Except for moccasin lol. To be honest, this one looks like a banana or something, and a peach.

Brown
<div style="background: linear-gradient(to right, cornsilk, blanchedalmond, bisque, navajowhite, wheat, burlywood, tan, rosybrown, sandybrown, goldenrod, darkgoldenrod, peru, chocolate, saddlebrown, sienna, brown, maroon); color: black;">

All of them that I'm too lazy to sort right now. A part of it looks awfully like a bruise.

Olive Green
<div style="background: linear-gradient(to right, darkolivegreen, olive, olivedrab, yellowgreen); color: black;">

Olive.

Bright Green
<div style="background: linear-gradient(to right, limegreen, lime, lawngreen, chartreuse, greenyellow); color: black;">

Lime and lawn and all that good stuff.

Spring Greens
<div style="background: linear-gradient(to right, springgreen, mediumspringgreen, lightgreen, palegreen); color: black;">

Sea and pale green.

Sea Greens
<div style="background: linear-gradient(to right, darkseagreen, mediumaquamarine, mediumseagreen, seagreen); color: black;">

OwO?

Forest Green and just Green
<div style="background: linear-gradient(to right, forestgreen, green, darkgreen); color: black;">

This is it.

Cyan
<div style="background: linear-gradient(to right, lightcyan, cyan, aqua); color: black;">

Uh

Beautiful Medium Blue
<div style="background: linear-gradient(to right, paleturquoise, aquamarine, turquoise, mediumturquoise, darkturquoise); color: black;">

This is it :D

Blue with Green
<div style="background: linear-gradient(to right, cadetblue, lightseagreen, darkcyan, teal); color: black;">

This reminds me of Syd :)

Dreary Blue
<div style="background: linear-gradient(to right, lightsteelblue, powderblue); color: black;">

Boo

Sky Blues
<div style="background: linear-gradient(to right, lightblue, skyblue, lightskyblue, deepskyblue); color: black;">

Beautiful sky :D

Rich Blues
<div style="background: linear-gradient(to right, dodgerblue, cornflowerblue, steelblue, royalblue, blue, mediumblue, darkblue, navy, midnightblue); color: black;">

'Tis it

Purple, Violet, and Magenta
<div style="background: linear-gradient(to right, lavender, thistle, plum, violet, orchid, fuchsia, magenta, mediumorchid, mediumpurple, blueviolet, darkviolet, darkorchid, darkmagenta, purple, indigo, darkslateblue, slateblue, mediumslateblue); color: black;">

Got lazy and just put everything in xF

Light White-Ish Complementary Colors
<div style="background: linear-gradient(to right, white, snow, honeydew, mintcream, azure, aliceblue, ghostwhite, whitesmoke, seashell, beige, oldlace, floralwhite, ivory, antiquewhite, linen, lavenderblush, mistyrose); color: black;">

Not much on their own but :D

Gray and Black-Ish Complementary Colors
<div style="background: linear-gradient(to right, gainsboro, lightgray, silver, darkgray, gray, dimgray, lightslategray, slategray, darkslategray, black); color: black;">

The font is hehe

Weird Rainbow Gradient
<div style="background: linear-gradient(to right, #e84258, #fd8060, #fee191, #b0d8a4, #8281a0); color: black;">

Hehehe weird

====