User blog:Anonymous Asteroid/Ellie's coding guide

 <div style="hsla(266, 85%, 43%, 0.2); background-image: linear-gradient(45deg, hsla(51, 100%, 54%, 0.00), hsla(51, 100%, 54%, 0.00) 0.5%, hsla(53, 100%, 49%, 0.31) 0.5%, hsla(53, 100%, 49%, 0.31) 7.6%, hsla(51, 100%, 54%, 0.00) 7.6%, hsla(51, 100%, 54%, 0.00) 8.642857143%, hsla(29, 100%, 54%, 0.31) 8.642857143%, hsla(29, 100%, 54%, 0.31) 15.64285714%, hsla(51, 100%, 54%, 0.00) 15.64285714%, hsla(51, 100%, 54%, 0.00) 16.88571429%, hsla(0, 100%, 54%, 0.31) 16.88571429%, hsla(0, 100%, 54%, 0.31) 23.84285714%, hsla(51, 100%, 54%, 0.00) 23.84285714%, hsla(51, 100%, 54%, 0.00) 25%, transparent 25%), linear-gradient(-45deg, hsla(51, 100%, 54%, 0.00), hsla(51, 100%, 54%, 0.00) 0.5%, hsla(53, 100%, 49%, 0.31) 0.5%, hsla(53, 100%, 49%, 0.31) 7.6%, hsla(51, 100%, 54%, 0.00) 7.6%, hsla(51, 100%, 54%, 0.00) 8.642857143%, hsla(29, 100%, 54%, 0.31) 8.642857143%, hsla(29, 100%, 54%, 0.31) 15.64285714%, hsla(51, 100%, 54%, 0.00) 15.64285714%, hsla(51, 100%, 54%, 0.00) 16.88571429%, hsla(0, 100%, 54%, 0.31) 16.88571429%, hsla(0, 100%, 54%, 0.31) 23.84285714%, hsla(51, 100%, 54%, 0.00) 23.84285714%, hsla(51, 100%, 54%, 0.00) 25%, transparent 25%), linear-gradient(45deg, transparent 73.85714286%, hsla(51, 100%, 54%, 0.00) 73.85714286%, hsla(51, 100%, 54%, 0.00) 75%, transparent 75%), linear-gradient(-45deg, transparent 73.85714286%, hsla(51, 100%, 54%, 0.00) 73.85714286%, hsla(51, 100%, 54%, 0.00) 75%, transparent 75%), linear-gradient(45deg, transparent 66.85714286%, hsla(0, 100%, 54%, 0.31) 66.85714286%, hsla(0, 100%, 54%, 0.31) 73.85714286%, transparent 73.85714286%), linear-gradient(-45deg, transparent 66.85714286%, hsla(0, 100%, 54%, 0.31) 66.85714286%, hsla(0, 100%, 54%, 0.31) 73.85714286%, transparent 73.85714286%), linear-gradient(45deg, transparent 65.71428571%, hsla(51, 100%, 54%, 0.00) 65.71428571%, hsla(51, 100%, 54%, 0.00) 66.85714286%, transparent 66.85714286%), linear-gradient(-45deg, transparent 65.71428571%, hsla(51, 100%, 54%, 0.00) 65.71428571%, hsla(51, 100%, 54%, 0.00) 66.85714286%, transparent 66.85714286%), linear-gradient(45deg, transparent 58.71428571%, hsla(29, 100%, 54%, 0.31) 58.71428571%, hsla(29, 100%, 54%, 0.31) 65.71428571%, transparent 65.71428571%), linear-gradient(-45deg, transparent 58.71428571%, hsla(29, 100%, 54%, 0.31) 58.71428571%, hsla(29, 100%, 54%, 0.31) 65.71428571%, transparent 65.71428571%), linear-gradient(45deg, transparent 57.57142857%, hsla(51, 100%, 54%, 0.00) 57.57142857%, hsla(51, 100%, 54%, 0.00) 58.71428571%, transparent 58.71428571%), linear-gradient(-45deg, transparent 57.57142857%, hsla(51, 100%, 54%, 0.00) 57.57142857%, hsla(51, 100%, 54%, 0.00) 58.71428571%, transparent 58.71428571%), linear-gradient(45deg, transparent 50.57142857%, hsla(53, 100%, 49%, 0.31) 50.57142857%, hsla(53, 100%, 49%, 0.31) 57.57142857%, transparent 57.57142857%), linear-gradient(-45deg, transparent 50.57142857%, hsla(53, 100%, 49%, 0.31) 50.57142857%, hsla(53, 100%, 49%, 0.31) 57.57142857%, transparent 57.57142857%), linear-gradient(45deg, transparent 49.42857143%, hsla(51, 100%, 54%, 0.00) 49.42857143%, hsla(51, 100%, 54%, 0.00) 50.57142857%, transparent 50.57142857%), linear-gradient(-45deg, transparent 49.42857143%, hsla(51, 100%, 54%, 0.00) 49.42857143%, hsla(51, 100%, 54%, 0.00) 50.57142857%, transparent 50.57142857%), linear-gradient(45deg, transparent 42.42857143%, hsla(92, 100%, 54%, 0.31) 42.42857143%, hsla(92, 100%, 54%, 0.31) 49.42857143%, transparent 49.42857143%), linear-gradient(-45deg, transparent 42.42857143%, hsla(92, 100%, 54%, 0.31) 42.42857143%, hsla(92, 100%, 54%, 0.31) 49.42857143%, transparent 49.42857143%), linear-gradient(45deg, transparent 41.28571429%, hsla(51, 100%, 54%, 0.00) 41.28571429%, hsla(51, 100%, 54%, 0.00) 42.42857143%, transparent 42.42857143%), linear-gradient(-45deg, transparent 41.28571429%, hsla(51, 100%, 54%, 0.00) 41.28571429%, hsla(51, 100%, 54%, 0.00) 42.42857143%, transparent 42.42857143%), linear-gradient(45deg, transparent 34.28571429%, hsla(215, 100%, 54%, 0.15) 34.28571429%, hsla(215, 100%, 54%, 0.15) 41.28571429%, transparent 41.28571429%), linear-gradient(-45deg, transparent 34.28571429%, hsla(215, 100%, 54%, 0.15) 34.28571429%, hsla(215, 100%, 54%, 0.15) 41.28571429%, transparent 41.28571429%), linear-gradient(45deg, transparent 33.142857143%, hsla(51, 100%, 54%, 0.00) 33.142857143%, hsla(51, 100%, 54%, 0.00) 34.28571429%, transparent 34.28571429%), linear-gradient(-45deg, transparent 33.142857143%, hsla(51, 100%, 54%, 0.00) 33.142857143%, hsla(51, 100%, 54%, 0.00) 34.28571429%, transparent 34.28571429%); background-size: 100px 100px; background-position: 0 0;font-family:Cinzel Decorative;font-size:50px;color:white;text-align:center;border:5px dashed blueviolet;"> Ellie's NEW AND UPDATED CODING GUIDE



Intro= Hello! My name is Ellie. I have been here since october 10th, 2019. My account might not say that because i hoped accounts many times.I found out about coding from some friends that have been on other people. Some people I would like to thank for my coding journey are Miss Voltron, Cherry, Wyvern,Evelina and Nam. If you enjoy this blog, please distribute to anyone else who would love to learn more about coding. Every single code here is for your use. You can copy and paste any or every code that I give here because I am giving you permission. This is not true for some other people's pages/templates though. Please make sure with the owner of pages/templates that they give you permission to edit their page/template. This is something that I know might be hard. The problem is that if you don't mean to change a code on someone's page/template, you can accidentally delete their code or change it. Coding is something that take some time to learn, so please respect other peoples' codes. Enough with all the serious talk, this is a coding guide. Each tab is referring to a selection of topics, this blog is very long, so I thought to organize it neatly. Please know that I am here for questions or suggestions. If you have some new codes that you would like to show me, I am totally open to learning. Thanks so much, and enjoy.

My To Do List For This
Simple Tags=
 * 1) Patterns
 * 2) Word-Wraps under word properties
 * 3) Tooltips maybe
 * 4) Imagemaps
 * 5) Percentage v. Pixels
 * 6) Simple CSS for usernames/imports
 * 7) Relfections more in depth
 * 8) 4 point border radius
 * 9) Columns under positioning
 * 10) Border radius on images

Simple Tags
Four Main Tags! 1.) Font- Used for easy codes, like font colors and size. Doesn't work though for templates. Use Div/Span 2.) Div- Most commonly used tag. Used for all kinds of codes! 3.) Span-Less-used tag same as the other tags for same purposes! 4.) P- Not used very much, but same purpose as the others! Simple Styling Tags 1.) Strikes- Contents Looks like this: Contents 2.) Underline- Contents  Looks like this: Contents 3.) Italic- Contents Or Contents Looks like this:Contents 4.) Bold- Contents Or Contents Looks like this:Contents 5.) Breaks- Contents Looks like this: Contents 6.) Line-  Looks like this:

7.) Headers- ==Content== Looks like this

Font Sizes
1.) Contents Looks like this: Contents 2.) Contents  Looks like this:Contents 3.) Contents Looks like this: Contents

4.) Contents Looks like this: Contents Coding a Badge!= Hello! These are the steps to create a badge, and I'm going to try to help out. The rest of the blog is more in depth details about everything. There are basics forms of badge making, this is especially going to focus on friend badges!

The Simple Code
Hello! This is my badge code, so if you do use it, please copy and paste, (includes my coding credits!)Thanks.

Looks Like This


USERNAME's Friend

'''Yay! You've won username's friendship! This badge resembles that, hope you have a wonderful day! More text can go here! More text and more filler!'''

To put this on your profile, put  into the source code Coding Credits

Borders/Padding/Content
The CSS Box Model is the model of the areas around HTML/Wikitext elements. The following chart demonstrates it: Margin Border Padding Content area Padding Border Margin Coding Credits

Main Code
 TESTING THiS CODE 

TESTING THiS CODE

Giving Out Codes
1.) Nowiki- Used frequently, doesn't like blocked codes with spaces and breaks though. CODE  Looks like this:  Tip: You can try on some devices, it will work, try putting a space right before the first nowiki tab. Example: {| 2.) Pre- Used somewhat frequently, good for any code. CODE Looks like this:  3.) Different Font- Used for distinguishing regular letters from codes. Still need to use either nowiki/pre tag.

Spacing
1.) Word spacing- Used for big text to keep from overlapping. Contents Contents Contents  Looks like this: Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents 2.) Letter Spacing- Used for putting spaces within each letter. Contents Looks like this- Contents Word Properties=

Word Wraps/Properties
These are word properties.

Test Align
Text Aligns: You can align your text left/center/right.

For example:
text-align:left; text-align:center; text-align:right;

Text Decorations
1.) Underlines- Underline-overline text 2.) Overlines- Overlined text 3.) Strikes- Strikethrough text 4.) Squiggly- Wavy Underline

Colored Text Decorations
Wavy Underline

Writing Modes
This  to restrict the text into a box but vertically. Helps with overflow words and long words. This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Colors= 1.) A handy color code website, it includes, hex color codes, RGB, and HSL 2.) Handy for color combination groups 3.) Color convertor

Name of colors
Some common color names work here, so you can test them out. Like, midnight blue,skyblue,aqua,turquoise,aquamarine,antiquewhite,snowwhite,blueviolet,coral,chocolate,lavender,black,white,red,orange,yello,green,blue,purple, etc... See full list for more color names!

Hex Color Codes
These color codes have 6 numbers/letters. Example: Red is: #ff0000 List of common hex codes
 * RRGGBB
 * RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.
 * For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.

RGB/A
RGB Color Picker
 * RGB color values are supported in all browsers.


 * An RGB color value is specified with: rgb(red, green, blue).


 * Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.


 * For example, rgb(0, 0, 255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.


 * The A in RGBA stands for Alpha see the A in hsla table below.

Syntaxes
and

HSL/A
HSL/A Color Picker

Credit:Coding Definitions Source Backgrounds=

1.Linear gradients
Meaning: The colors go in a line This is the website for the color codes <div style="background:linear-gradient(to *which direction*, *color/s*)">

My code example
<div style="background:linear-gradient(to top right, aqua, lavender)">  Hello!

Looks like this:

<div style="background:linear-gradient(to top right, aqua, lavender)">  Hello!

2.Radial gradients
Meaning: The colors go in a circle <div style="background:radial-gradient(*color/s*)">

My code example
<div style="background:radial-gradient(White,aqua,lavender)">   Hello!

<div style="background:radial-gradient(White,aqua,lavender,aqua)">   Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!

Hello!

Add On: Opacity Backgrounds
To add, you can add opacity to your backgrounds instead of using hsla/rgba color codes, this might be a little more simple. I still reccomend doing hsla color codes though for the best.

The Code
<div style="background:linear-gradient(to top right,red,orange,pink);opacity:0.2;">Testing

HSLA/RGBA Backgrounds
These backgrounds use hsla or rgba color codes, these are different from html hex color codes since these have the a which stands for alpha. This is basically transparency and thse are used nicely for gif backgrounds when you want a filter or image backgrounds really. They also are nice if you want hsla patterns on your image/gif background. That's what I tend to do. <div style="margin:8px; background: hsla(231, 100%, 79%, 0.29); border:1px solid #303662; padding:6px; text-align:center; letter-spacing:2px;"> TEXT GOES HERE

An Example
<div style="background:linear-gradient(324deg, hsla(236, 30%, 72%, 0.2) 4%,   transparent 4%) -70px 43px,linear-gradient( 36deg, hsla(236, 30%, 72%, 0.2)  4%,   transparent 4%) 30px 43px,linear-gradient( 72deg, hsla(192, 97%, 72%, 0.2) 8.5%, transparent 8.5%) 30px 43px,linear-gradient(288deg, hsla(192, 97%, 72%, 0.2) 8.5%, transparent 8.5%) -70px 43px,linear-gradient(216deg, hsla(192, 97%, 72%, 0.2) 7.5%, transparent 7.5%) -70px 23px,linear-gradient(144deg, hsla(192, 97%, 72%, 0.2) 7.5%, transparent 7.5%) 30px 23px,linear-gradient(324deg, hsla(236, 30%, 72%, 0.55)  4%,   transparent 4%) -20px 93px,linear-gradient( 36deg, hsla(236, 30%, 72%, 0.2)  4%,   transparent 4%) 80px 93px,linear-gradient( 72deg, hsla(192, 97%, 72%, 0.2), transparent 8.5%) 80px 93px,linear-gradient(288deg, hsla(192, 97%, 72%, 0.2) 8.5%, transparent 8.5%) -20px 93px,linear-gradient(216deg, hsla(192, 97%, 72%, 0.2) 7.5%, transparent 7.5%) -20px 73px,linear-gradient(144deg, hsla(192, 97%, 72%, 0.2) 7.5%, transparent 7.5%) 80px 73px;background-color: hsla(236, 30%, 72%, 0.8);background-size: 100px 100px;">   WORDS GO HERE

Another Example
This would be my friend badge, oh also, please don't take this without my permission!!!!

Borders=

Borders:
<div style="border:5px *border type* *color*;padding:10px">

My code example
Solid Border

Border Types
Solid Border

Dotted Border

Dashed Border

Double Border

Ridge Border

Groove Border

Inset Border

Gradient/Image Borders
If you want a border that has a gradient like multiple colors, you can use this code:

<div style="border:15px dashed transparent;border-image:linear-gradient(to top right,purple,blue,purple,blue)3; padding:5px;"> Testing

<div style="border:15px dashed transparent;border-image:linear-gradient(to top right,purple,blue,purple,blue); padding:5px;"> Testing <div style="position:absolute;height:40px;transformX(50);"> <div style="font-family:Brush Script MT; color:darkblue;font-size:30px;text-align:center;margin-left:10px;margin-right:10px;">Testing With All The Content Here Content Here <div style="position:relative;right:40px;height:20px;top:20px;width:100px;overflow:hidden;transform:rotate(90deg);"> <div style="position:relative;left:535px;height:20px;top:.5px;width:110px;overflow:hidden;transform:rotate(90deg);"> Okay so this code is extremely difficult and I had to do so much positioning to get the four sides to connect, if you need help, then come and ask me but I'm still not sure if this positioning is correct and will work for you.

<div style="position:absolute;height:40px;transformX(50);"> <div style="font-family:Brush Script MT; color:darkblue;font-size:30px;text-align:center;margin-left:10px;margin-right:10px;">Testing With All The Content Here Content Here <div style="position:relative;right:40px;height:20px;top:20px;width:100px;overflow:hidden;transform:rotate(90deg);"> <div style="position:relative;left:535px;height:20px;top:.5px;width:110px;overflow:hidden;transform:rotate(90deg);">

Add-on: Border radius
Creates rounded edges: Example of Border radius

Looks like this:
Example of Border radius

Note: If you add it to the border, you will also have to add it to the background code also.

For example:
<div style="background:linear-gradient(to top right, aqua, lavender);border-radius:50px"> Example of Border radius  Hello!

<div style="background:linear-gradient(to top right, aqua, lavender);border-radius:50px"> Example of Border radius  Hello!

Ellpitical Border-Radius:
This iis just ading a percentage to the border-radius, this creates a more of an elliptical shape! 100% border radius

Add On:Curved Edges:
These are like border radius but kind of 3D if you understand that. Curved Edges

Add on: Padding
This is just basically how far you want the text from the border of your badge! This is just *padding* border around your text! With no padding

White padding (10px)

The Code
Fonts=

Font sizes
You can have different types.

P style
Use this for templates, this is important: <p style="font-size:20px">Testing

Example
<p style="font-size:20px">Testing

Font-size
You can just add this to your continuing background code,boder,etc. all under one div style

;font-size:20px">Testing

Font colors
<font color=" *color* "> *message* <font color="Purple"> HELLO! <font color="Purple"> HELLO!

Rainbow Fonts
<span style="background: linear-gradient(to *which direction* *color/s*); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> *message* <span style="background: linear-gradient(to right, red, orange, yellow, green, blue, purple, pink); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Hello!

An Example:
<span style="background: linear-gradient(to right, red, orange, yellow, green, blue, purple, pink); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Hello!

Fonts:
<div style="font-family: *name of font* "> *Message*

For example:
Shadows/Reflections=

Text-shadows:
These have a text shadow, the shadow can be bigger if you increase the "px". <div style="text-shadow:2px 2px 2.5px *Color* ;">

My Example:
Hello! Hello!

Box shadows:
These are box shadows, Same with the "px". <div style="background:linear-gradient:(to right, purple, blue);box-shadow: 0px 0px 28px *color* ;">

My Example:
<div style="background:linear-gradient:(to right, purple, blue);box-shadow: 0px 0px 28px Purple;">Hello!

<div style="background:linear-gradient:(to right, purple, blue);box-shadow: 0px 0px 28px Purple;">Hello!

Reflections
The simple CSS codes I've been learning XD yes of course. Anyways, I've been learning and testing around to see if I can change the CSS codes into wikitext and most of them yes I can! These are just reflections, they are kind of like shadows, well these reflections can be not just under but to the side. They can also be different colors! <div style="-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));">Testssssss Yesssssssssssss



Tabs=

Sub Tabs
There are multiple tabs under each tabs!

Tabviews
Template:Name of Template|Displayed Name of Tab Template:Name Of Template|Displayed Name of Tab

My Tabview Example
Template:Template:EllieMW/Status|Status Template:EllieMW/Requests|Requests Template:EllieMW/Books&Piano|Fun Stats Template:EllieMW/Templates|Templates Template:EllieMW/Important|Important!

Looks like this
Template:EllieMW/Status|Status Template:EllieMW/Requests|Requests Template:EllieMW/Books&Piano|Fun Stats Template:EllieMW/Templates|Templates Template:EllieMW/Important|Important!

Collapsibles=

1. Code for the contents to not show first, they are hidden, and then you have to open the contents:
<div class="mw-collapsible mw-collapsed" data-expandtext="OPEN" data-collapsetext="CLOSE" style="width:100%">

Example:
<div class="mw-collapsible mw-collapsed" data-expandtext="OPEN" data-collapsetext="CLOSE" style="width:100%"> Hello! Showing you something again! Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!

Example:
Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!Teaching everyone to code! Feel free to copy any codes you like here. These are codes that you are free to take. I’m here!

Closing tags=

Important thing!!!!!!!!!
A LOT OF PEOPLE FORGET TO CLOSE THEIR TAGS. THE ONLY PLACE YOU DO NOT CLOSE YOUR TAGS IS YOUR MESSAGE WALL, BECAUSE YOU WANT ALL THE COLORS TO GO ALL THE WAY DOWN TO THE BOTTOM OF YOUR PAGE.

HOW TO CLOSE TAGS
Picture closing tags like a mirror. Every tag you have is mirrored and closed. For example: <font-family="Lobster"><font-size=10px"> Hello!    As you see in this picture, everything is closed as mirrored. They have to be in an exact order, if you don't, then the template will run all the way through other things, like other friend badges.
 * This is a tricky concept, and it might be hard to grasp, but ask me to close tags for you if you don't know how. Practice makes perfect!

A Lesson I taught On Closing Tags
Yes closing tags are the etc.

They close the tags of the opening tags like these:

-

The way you close tags you go from inner to outward.

They always have to be a specific order, every opening tag you use, you have to put a closing tag, something with </ and that's how it works.

For example you may have:

<div style="background:radial-gradient(#C0C0C0,#FFD700, #cd7f32);border-radius:50px"> <div style="font-family: 'Goldman', cursive;">CONGRATULATIONS! You are a Friend of TeamValiant+OrderOfThePhoenix! If given permission, put this badge on your profile"



For this ^^:

You have: -2 of these: <div style

-One of these:

-One of these: <div style

-Text/File

-One of these:

-One of these:

-Then your template name!

To close the tags on the badge. You start from the text/file upward so you have to close them in a certain way. For the nowiki and small, i usually have it incase the template name because that part of the code only pertains to that part of the code.

Then you have

Since you start from the file up the list I gave you.

Tables= [https://the-experimental-coding.fandom.com/wiki/Tables Information gotten from this page. Coding Credits:Wyvern] Tables are a common form of data preservation. They are also sometimes known as "graphs". They can be made in code with two ways; a way applicable to wikitext, and one applicable to both wikitext and HTML.

Wikitext Tables
This type of table only works in wikitext. If you were to use it elsewhere, such as in HTML, it would not work.

The Code
Toggles= Toggles are used for changing panels/pages without going to another page.

Example Code:
Testing(Words/picture) <div class="mw-collapsible" id="mw-customcollapsible-Test" style="position:absolute; left:0; top:0; width:100%; height:2000px; background:aqua; opacity:100%; z-index:1001;">Example

Secret Toggles
Contents

Example, click in this blank space!
Contents hehe you found the contents!

Toggle Portals
<div style="border:5px double purple;background:linear-gradient(to right, lavender, skyblue, lavender, skyblue);"> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-DO"style="padding: 20px; height: 200px; overflow:auto; border: 2px solid black; background:linear-gradient(to right, lavender, skyblue, lavender, skyblue); margin-top:30px;"> WORDS GO HERE! <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-Badges"style="padding: 20px; height: 200px; overflow:auto; border: 2px solid black; background:linear-gradient(to right, lavender, skyblue, lavender, skyblue); margin-top:30px;"> WORDS GO HERE! <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-Messages"style="padding: 20px; height: 200px; overflow:auto; border: 2px solid black; background:linear-gradient(to right, lavender, skyblue, lavender, skyblue); margin-top:30px;"> WORDS GO HERE!

The Code:
Links= 1.) For Internal Links- used just for the name of the page on the wiki. Ellie Looks like this:Ellie 2.) Used for External links- Can be a link outside or inside this wiki. Don't forget the space between the link and the displayed text. Ellie Ellie

Coloring Links
ELlie Looks like this: Ellie

Transforms/Positoning=

Positioning
There are different types of positioning! It always depends on what you want to use or prefer using! I usually prefer regular positoning but I'm going to show float, and also read transforms down there like translates.

Float
These just work for  and <div style="background: pink; color: purple;font-family:indie flower; width: 80px; height: 50px; float: left"> float:left; <div style="background: pink; color: green;font-family:indie flower; width: 80px; height: 50px; float: right"> float:right;

Positioning
[https://the-experimental-coding.fandom.com/wiki/Positioning Coding Credits Information! ]

1.) Relative Positioning
Relative positioned elements are positioned relative to where they would normally be. If an element is positioned relatively, the top, bottom, left, and right selectors will be according to where the element was supposed to be, which means that every pixel or percentage value for each selector will be away from the element's original position. Positioning an element relatively will cause a gap to form once the element is positioned, that will not be filled. The code to position an element as so is:

This is a scrollbox with relative positioning, if I add more filler text, you can see what happens to the positioned element. The place where it's supposed to be is completely blank. Filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text<div style="position: relative; background-color:purple; border:5px solid darkblue; width:100px; left:300px;">Example of Relative Positioning! filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text

2.) Fixed Positioning
Fixed positioned elements are positioned relative to the device someone is using to view something. If a selector such as left was positioned to the corner of someone's screen, it would stay there no matter where they scrolled, until they left the site. Percentages are most commonly used for this type of positioning. The code to position an element as so is:

This is a scrollbox with fixed positioning, if I add more filler text, you can see what happens to the positioned element. The place where it's supposed to be is completely blank. Filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text<div style="position: fixed; background-color:purple; border:5px solid darkblue; width:100px; left:300px;">Example of Fixed Positioning! filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text

3.) Absolute Positioning
Absolute positioned elements are positioned relative to the nearest positioned ancestor, which is an element specified before another element. It is basically just like fixed positioning, except that rather than being positioned relative to a user's screen, it's positioned relative to that element before it. The code to position an element as so is:

This is a scrollbox with absolute positioning, if I add more filler text, you can see what happens to the positioned element. The place where it's supposed to be is completely blank. Filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text<div style="position: absolute; background-color:purple; border:5px solid darkblue; left:225px; width:120px; height:50px;">Example of Absolute Positioning! filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text  filler ttext filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text  filler text  filler textfiller text filler text filler text  filler textfiller text filler text filler text filler text  filler textfiller text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text  filler text  filler ttext filler text filler text  filler text  filler t

4.) Sticky Positoning
Sticky positioned elements are elements that switch (or "toggle") between relative and fixed position. Specifying a selector for an element that is sticky positioned will not do anything, the element will stay positioned normally, until the user scrolls away from it. Then the element's position will be fixed. It will stay fixed it a specific area on the screen, depending on what the selectors are. The code to position an element as so is:

This is a scrollbox with sticky positioning, if I add more filler text, you can see what happens to the positioned element. The place where it's supposed to be is completely blank. Filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text<div style="position: sticky;top:2px; background-color:purple; border:5px solid darkblue; width:100px; left:300px;">Example of Sticky Positioning! filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text

5.) Static Positoning
Static positioned elements are not affected by top, right, left, and bottom properties. If an element is positioned as so, it will not be affected in any special way, and will just follow the normal flow of everything else. The code to position an element as so is:

This is a scrollbox with static positioning, if I add more filler text, you can see what happens to the positioned element. The place where it's supposed to be is completely blank. Filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text<div style="position: static; background-color:purple; border:5px solid darkblue; width:100px; left:300px;">Example of Static Positioning! filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text

Positioning/Skews/Rotations:
These are trans forms, for rotation/skews/positioning

Matrix
This is just literally just tilting it on an X and Y axis.

Translate
This is just placing it exactly on the X and Y axis, used mostly for positioning, you can use instead of left:#px etc.

Scale
This is just zooming in and out

Rotate
This is just rotating by degrees

Skew
This is just making it more squishy and squashy

Perspective
This is just what makes it more clear when it is a 3D element

Message Wall Pop Up=

Message Wall Greeting Pop Ups!
These are basically toggles/collapsibles that pop up when you open a page like your profile page, sadly with UCP, the only place you can use them is most likely your profile page. On message walls, they do not work anymore. These pop ups first use a collapsible, then you specify exactly where you want this to be positioned on the page using fixed, left, top, width, and then height. Then you can fill in your styling bits and pieces (backgrounds,opacity), then you have the z-index which is an element of "overlapping". Then you have the rest of it with the toggle, make sure to have the same name for the collapsible and toggle, you can name it anything but tin this, I named it "MW-Entrance", then you have more positioning and styling elements. Then there goes your text! Don't forget to add you closing div tags that look like this.

(For the Gif Background one, you add the gif right after the z-index part, and then the toggle part and styling, words, two closing div tags.)

The Code Without Gif Background
<div class="mw-collapsible" id="mw-customcollapsible-MW-Entrance" style="position:fixed; left:0; top:0; width:100%; height:100%; background:linear-gradient(to right,lavender,aqua,skyblue); opacity:94%; z-index:1;"><div class="mw-customtoggle-MW-Entrance" style="position:fixed; top:40%; left:33%; width:33%; max-height:40%; border:10px dotted white;border-radius:300px;padding:1%;box-shadow: 0px 0px 23px blue;padding:20px; padding-bottom:1.5px; font-family:Courier;color: purple; font-size:25px; line-height:100%; font-weight:bold; text-align:center;">WORDS GO HERE!

The Code With Gif Background!
<div class="mw-collapsible" id="mw-customcollapsible-MW-Entrance" style="position:fixed; left:0; top:0; width:100%; height:100%;opacity:90%; z-index:1;"><div class="mw-customtoggle-MW-Entrance" style="position:fixed; top:40%; left:33%; width:33%; max-height:40%; border:20px Double white;padding:1%;-moz-box-shadow: 0 0 5px 3px purple; -webkit-box-shadow: 0 0 5px 3px purple;padding:20px; padding-bottom:1.5px; font-family:Noteworthy; font-color:Purple;text-shadow: 2px 2px 2.5px white; font-size:150%; line-height:97%; font-weight:bold; text-align:center;">WORDS GO HERE

Floating Boxes= These boxes float in the corner, note: they do not work on UCP Message Walls, they do work on profile pages and template pages. This code is by Nam

Floating Box With Gif
Gif Backgrounds/Overflow=

Overflows:
Overflows are when you have more text that spills out of the specific height of the box, there has to be a height specified for these to work!

1.)Overflow:visible
Default. The overflow is not clipped. The content renders outside the element's box <div style="background-color:yellow;width: 200px;height: 50px;border: 1px dotted black;overflow: visible;">AN EXAMPLE OF OVERFLOW VISIBLE!!!AN EXAMPLE OF OVERFLOW VISIBLE!!!AN EXAMPLE OF OVERFLOW VISIBLE!!!AN EXAMPLE OF OVERFLOW VISIBLE!!!AN EXAMPLE OF OVERFLOW VISIBLE!!!AN EXAMPLE OF OVERFLOW VISIBLE!!!

2.)Overflow:hidden
The overflow is clipped, and the rest of the content will be invisible AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!AN EXAMPLE OF OVERFLOW HIDDEN!!!

3.)Overflow:scroll
The overflow is clipped, and a scrollbar is added to see the rest of the content AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!AN EXAMPLE OF OVERFLOW:SCROLL!!!

4.)Overflow:auto
Similar to scroll, but it adds scrollbars only when necessary AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!AN EXAMPLE OF OVERFLOW AUTO!!!

5.)Overflow-X:
This is just overflow along the x axis. It specifies what to do with the left/right edges of the content if it overflows the element's content area. <div style="background-color:yellow;width: 700px;height: 30px;border: 1px dotted black;overflow-x: scroll;">AN EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!N EXAMPLE OF OVERFLOW-X!!!

6.)Overflow-Y
This is just overflow along the Y-Axis. It specifies what to do with the top/bottom edges of the content if it overflows the element's content area! <div style="background-color:yellow;width: 100px;height: 80px;border: 1px dotted black;overflow-y: scroll;">AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!AN EXAMPLE OF OVERFLOW-Y!!!

Gif Backgrounds:
<div style="position:relative;border:10px double rebeccapurple;height:391px; max-width:auto; overflow:hidden">

<div style="position:absolute; top:20px; left:10%; width:80%;text-align:center;font-family:Courier;color:lavender;font-size:15px;height:350px;overflow:auto;">WORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HEREWORDS GO HERE

The Code


Countdowns= First, please not that you need the Import JS dev.countdown/js imported to the wiki first!

An Example
Only July 8 2021 00:00:00 until Ellie's birthday! ==The Code=

Spotify= You can use spotify links to connect with wiki now!

An Example

 * 1) <spotify uri="spotify:track:0dhw2WjJZBsbBDv0Ipdgbw?si=ed86d9dd81e248a8" height='80' width="200"/>
 * 2) <spotify uri="https://open.spotify.com/artist/2jHp7gQArCQrlMvdrIVFCg?si=-qtxvt3uRcyEkTvV_W3Cuw" height='80' width="200"/>
 * 3) <spotify uri="https://open.spotify.com/playlist/2SWpKPGPfDxbq89Uhyxg9H?si=66b2928811ae49f4" height='300' width="400"/>

The Codes
Buttons= 1.) ---> A great template Nam made and you can use! Just put that code on any page and it will automatically link it to your edit source page whenver you want to edit the page! 2.)<span class="wds-button" style="position:absolute;left:200px;background: linear-gradient(0.3turn,hsla(264, 100%, 44%, 0.61) 50%,hsla(210, 100%, 44%, 0.61) 50%); border-color: purple; cursor: help;text-align:center;">CodingGuide Customized button I made



NOTE=

Lastly
Anyone who needs help with coding, please message me on my message wall, click here to go to this link. There are some other codes maybe, that I can give you. If you are interested in making a information box or a complex message wall greeting and a floating box, please contact me. Coding Templates Requests=

Coding Requests: Answer in comments:


Patterns=

Some Patterns You Might Want To Use!
WORK IN PROGRESS, GOING TO GET THE TOGGLES WITH THE CODES WORKING LATER

Source:Heliosanctus Wiki

Triangles
'OSCILLATING' TRIANGLES <div style="background: linear-gradient(115deg, transparent 75%, #CCC 75%), linear-gradient(115deg, transparent 75%, #EEE 75%) 7px -15px, linear-gradient(245deg, transparent 75%, #CCC 75%) 7px -15px, #FFF; background-size: 15px 30px; border: 2px solid #000; height: 150px; width: 150px;"> .

TRIANGLES? <div style="background-position: -50px 0px, -50px 0px, 0% 0%, 0% 0%; background-image: linear-gradient(135deg, #000 25%, transparent 25%), linear-gradient(225deg, #fff 25%, transparent 25%), linear-gradient(315deg, #fff 25%, transparent 25%), linear-gradient(45deg, #000 25%, transparent 25%); background-attachment: scroll, scroll, scroll, scroll; background-repeat: repeat, repeat, repeat, repeat; background-size: 50px 50px; background-origin: padding-box, padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box, border-box; background-color: #fff; border: 2px solid #000; height: 150px; width: 150px;"> .

TEETH <div style="background: linear-gradient(63deg, #000 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 50%, #fff 60%), linear-gradient(63deg, transparent 60%, #000 60%), #000; background-size: 10px 30px; border: 2px solid #000; height: 150px; width: 150px;"> .

THORNS

Spirals
CHAIN MESH <div style="background: radial-gradient(circle at 0% 60%, transparent 9px, #AAA 11px, transparent 12px), radial-gradient(circle at 100% 50%, transparent 7px, #BBB 9px, transparent 10px), radial-gradient(circle at 0% 60%, transparent 5px, #CCC 7px, transparent 8px), radial-gradient(circle at 100% 50%, transparent 3px, #DDD 5px, transparent 6px), radial-gradient(circle at 0% 60%, transparent 1px, #EEE 3px, transparent 4px), #000; background-size: 11px 15px; color: #FFF; text-shadow: 1px 1px 3px #000; border: 2px solid #000; height: 150px; width: 150px;"> .

Spirals

Cubes
TWO-TONE SIMPLE

Geometric
PICNIC

RUBBER TILES <div style="background: linear-gradient(135deg, #111 50%, #000 50%); background-size: 5px 5px; border: 2px solid #000; height: 150px; width: 150px;"> .

SANCTUS TILES

GEOMETRIC BEADS

PIXEL SUNSET <div style="background: linear-gradient(0deg, rgba(255, 0, 102, 0) 20%, rgba(255, 0, 102, 0.0980392) 20%, rgba(255, 0, 102, 0.0980392) 40%, rgba(255, 0, 102, 0.2) 40%, rgba(255, 0, 102, 0.2) 60%, rgba(255, 0, 102, 0.4) 60%, rgba(255, 0, 102, 0.4) 80%, rgba(255, 0, 102, 0.6) 80%), linear-gradient(-90deg, rgba(255, 0, 102, 0) 20%, rgba(255, 0, 102, 0.0980392) 20%, rgba(255, 0, 102, 0.0980392) 40%, rgba(255, 0, 102, 0.2) 40%, rgba(255, 0, 102, 0.2) 60%, rgba(255, 0, 102, 0.4) 60%, rgba(255, 0, 102, 0.4) 80%, rgba(255, 0, 102, 0.6) 80%), rgb(255, 204, 0); background-size: 100px 100px; border: 2px solid #000; height: 150px; width: 150px;"> . HONEYCOMB <div style="background: radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px, linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1; background-size: 40px 60px; border: 2px solid #000; height: 150px; width: 150px;"> .

RAINBOW PIXELS .

GRAPH PAPER <div style="background: linear-gradient(90deg, transparent 4px, #789 5px, transparent 5.5px), linear-gradient(180deg, transparent 4px, #789 5px, transparent 5.5px), #F8F8F8; background-size: 10px 10px; border: 2px solid #000; height: 150px; width: 150px;"> .

NOTEBOOK <div style="background: linear-gradient(180deg, transparent 4px, #000080 5px, transparent 5.5px), #FFFFFF; background-size: 10px 10px; border: 3px solid #000; height: 150px; width: 150px;"> . 3D SQUARES

CIRCUIT WANNABE <div style="Background: linear-gradient(45deg, transparent 23px, #7F0 24px, #7F0 26px, transparent 26px, transparent 27px, #7F0 28px, #7F0 30px, transparent 30px, transparent 31px, #7F0 32px, #7F0 33px, transparent 34px), linear-gradient(135deg, transparent 23px, #7F0 24px, #7F0 26px, transparent 26px, transparent 27px, #7F0 28px, #7F0 30px, transparent 30px, transparent 31px, #7F0 32px, #7F0 33px, transparent 34px), radial-gradient(transparent 1px, #7F0 1px, #7F0 4px, transparent 4px) 20px 40px, radial-gradient(transparent 1px, #7F0 1px, #7F0 4px, transparent 4px) 40px 20px, #000; background-size: 40px 40px; border: 2px solid #000; height: 150px; width: 150px;"> .

TITLE PENDING <div style="background: linear-gradient(135deg, transparent 25%, rgba(255, 0, 0, 0.5) 25%, rgba(255, 0, 0, 0.5) 75%, transparent 75%), linear-gradient(45deg, transparent 25%, rgba(0, 0, 255, 0.5) 25%, rgba(0, 0, 255, 0.5) 75%, transparent 75%), #FFF; background-size: 100px 100px; border: 2px solid #000; height: 150px; width: 150px;"> .

Steampunk
METAL STUDS

Cheese <div style="background: radial-gradient(#BDB76B 2px, #F0E68C 11px, #FFFF66 17px); background-size: 30px 30px; border: 2px solid #000; height: 150px; width: 150px;"> . NESTED CIRCLES

ROSES <div style="background: radial-gradient(rgba(255, 0, 0, 0.5) 23px, #000, transparent 25px), radial-gradient(rgba(255, 100, 100, 0.5) 23px, #000, transparent 25px) 0 25px, radial-gradient(rgba(255, 100, 100, 0.5) 23px, #000, transparent 25px) 25px 0, radial-gradient(rgba(255, 0, 0, 0.5) 23px, #000, transparent 25px) 25px 25px, #911; background-size: 75px 75px; border: 2px solid #000; height: 150px; width: 150px;"> .

RUG

VICTORIAN CIRCLES

CIRCLES OF DOOM <div style="background: radial-gradient(circle at 100% 60%, #800 7%, transparent 0px), radial-gradient(circle at 100% 60%, #000 10%, transparent 0px), radial-gradient(circle at 100% 40%, #800 7%, transparent 0px), radial-gradient(circle at 100% 40%, #000 10%, transparent 0px), radial-gradient(circle at 0% 60%, #800 7%, transparent 0px), radial-gradient(circle at 0% 60%, #000 10%, transparent 0px), radial-gradient(circle at 0% 40%, #800 7%, transparent 0px), radial-gradient(circle at 0% 40%, #000 10%, transparent 0px), radial-gradient(circle at 60% 100%, #800 7%, transparent 0px), radial-gradient(circle at 60% 100%, #000 10%, transparent 0px), radial-gradient(circle at 40% 100%, #800 7%, transparent 0px), radial-gradient(circle at 40% 100%, #000 10%, transparent 0px), radial-gradient(circle at 60% 0%, #800 7%, transparent 0px), radial-gradient(circle at 60% 0%, #000 10%, transparent 0px), radial-gradient(circle at 40% 0%, #800 7%, transparent 0px), radial-gradient(circle at 40% 0%, #000 10%, transparent 0px), radial-gradient(circle at 70% 70%, #800 8%, transparent 0px), radial-gradient(circle at 70% 70%, #000 13%, transparent 0px), radial-gradient(circle at 30% 70%, #800 8%, transparent 0px), radial-gradient(circle at 30% 70%, #000 13%, transparent 0px), radial-gradient(circle at 70% 30%, #800 8%, transparent 0px), radial-gradient(circle at 70% 30%, #000 13%, transparent 0px), radial-gradient(circle at 70% 70%, #800 8%, transparent 0px), radial-gradient(circle at 70% 70%, #000 13%, transparent 0px), radial-gradient(circle at 30% 30%, #800 8%, transparent 0px), radial-gradient(circle at 30% 30%, #000 13%, transparent 0px), radial-gradient(circle at 85% 85%, #800 4%, transparent 0px), radial-gradient(circle at 85% 85%, #000 7%, transparent 0px), radial-gradient(circle at 15% 85%, #800 4%, transparent 0px), radial-gradient(circle at 15% 85%, #000 7%, transparent 0px), radial-gradient(circle at 85% 15%, #800 4%, transparent 0px), radial-gradient(circle at 85% 15%, #000 7%, transparent 0px), radial-gradient(circle at 15% 15%, #800 4%, transparent 0px), radial-gradient(circle at 15% 15%, #000 7%, transparent 0px), radial-gradient(circle at 100% 100%, #800 7%, transparent 0px), radial-gradient(circle at 100% 100%, #000 10%, transparent 0px), radial-gradient(circle at 0% 100%, #800 7%, transparent 0px), radial-gradient(circle at 0% 100%, #000 10%, transparent 0px), radial-gradient(circle at 100% 0%, #800 7%, transparent 0px), radial-gradient(circle at 100% 0%, #000 10%, transparent 0px), radial-gradient(circle at 0% 0%, #800 7%, transparent 0px), radial-gradient(circle at 0% 0%, #000 10%, transparent 0px), radial-gradient(circle at 100% 0%, #b00 33%, transparent 0px), radial-gradient(circle at 0% 100%, #b00 33%, transparent 0px), radial-gradient(circle at 100% 100%, #b00 33%, transparent 0px), radial-gradient(circle at 0% 0%, #b00 33%, transparent 0px), radial-gradient(circle at 100% 0%, #000 36%, transparent 0px), radial-gradient(circle at 0% 100%, #000 36%, transparent 0px), radial-gradient(circle at 100% 100%, #000 36%, transparent 0px), radial-gradient(circle at 0% 0%, #000 36%, transparent 0px), radial-gradient(circle at 50% 50%, #b00 20%, transparent 0px), radial-gradient(circle at 50% 50%, #000 25%, transparent 0px), radial-gradient(circle at 25% 50%, #b00 5%, transparent 0px), radial-gradient(circle at 25% 50%, #000 10%, transparent 0px), radial-gradient(circle at 75% 50%, #b00 5%, transparent 0px), radial-gradient(circle at 75% 50%, #000 10%, transparent 0px), radial-gradient(circle at 50% 25%, #b00 5%, transparent 0px), radial-gradient(circle at 50% 25%, #000 10%, transparent 0px), radial-gradient(circle at 50% 75%, #b00 5%, transparent 0px), radial-gradient(circle at 50% 75%, #000 10%, transparent 0px); background-color: #800; background-size: 75px 75px; border: 2px solid #000; height: 150px; width: 150px;"> .

Rainbow
RAINBOW

Miscellaneous
FLOWER POWER

SHAMROCKS <div style="background: radial-gradient(circle at 50% 50%, #fff 30%, transparent 1px), radial-gradient(circle at 75% 75%, #ADFF2F 20%, transparent 1px), radial-gradient(circle at 25% 25%, #ADFF2F 20%, transparent 1px), radial-gradient(circle at 25% 75%, #ADFF2F 20%, transparent 1px), radial-gradient(circle at 75% 25%, #ADFF2F 20%, transparent 1px); background-color: #00FF00; background-size: 50px 50px; border: 2px solid #000; height: 150px; width: 150px;"> .

SUNSHINE AND BLUE SKIES <div style="background: radial-gradient(circle at 50% 50%, #fff 10%, transparent 1px), radial-gradient(circle at 50% 50%, #ffffb2 20%, transparent 1px), radial-gradient(circle at 50% 100%, #FFF44F 50%, transparent 1px); background-color: #A9F5D0; background-size: 50px 50px; border: 2px solid #000; height: 150px; width: 150px;"> .

TEARDROPS

CLOUDS <div style="background: radial-gradient(circle at 50% 50%, #fff 30%, transparent 1px), radial-gradient(circle at 50% 30%, #fff 15%, transparent 1px), radial-gradient(circle at 50% 75%, #fff 15%, transparent 1px), radial-gradient(circle at 80% 50%, #fff 20%, transparent 1px), radial-gradient(circle at 20% 50%, #fff 20%, transparent 1px), radial-gradient(circle at 70% 35%, #fff 15%, transparent 1px), radial-gradient(circle at 35% 70%, #fff 15%, transparent 1px), radial-gradient(circle at 35% 35%, #fff 15%, transparent 1px), radial-gradient(circle at 70% 65%, #fff 15%, transparent 1px); background-color: #ADD8E6; background-size: 50px 50px; border: 2px solid #000; height: 150px; width: 150px;"> .

DRAGONS <div style="background: radial-gradient(circle at 85% -19%, transparent 14px, #888 15px, transparent 16px) 22px 25px, radial-gradient(circle at 113% -16%, transparent 14px, #888 15px, transparent 16px) 22px 21px, radial-gradient(circle at 0% -19%, transparent 14px, #888 15px, transparent 16px) 4px 21px, radial-gradient(circle at 15% -19%, transparent 14px, #888 15px, transparent 16px) 25px 25px, radial-gradient(circle at -13% -16%, transparent 14px, #888 15px, transparent 16px) 26px 21px, radial-gradient(circle at 100% -19%, transparent 14px, #888 15px, transparent 16px) -5px 20px, radial-gradient(circle at 50% 50%, transparent 2px, #888 3px, transparent 4px) 49px 47px, radial-gradient(circle at 110% 3%, transparent 10px, #888 11px, transparent 12px) 32px 25px, radial-gradient(circle at 111% -3%, transparent 10px, #888 11px, transparent 12px) 27px 29px, radial-gradient(circle at 91% -2%, transparent 4px, #888 5px, transparent 6px)22px 31px, radial-gradient(circle at 80% -14%, transparent 15px, #888 16px, transparent 17px) 36px 33px, radial-gradient(circle at 100% 0%, transparent 2px, #888 3px, transparent 4px) 25px 15px, radial-gradient(circle at 100% 0%, transparent 2px, #888 3px, transparent 4px) 22px 16px, radial-gradient(circle at 85% -19%, transparent 14px, #888 15px, transparent 16px) 47px 50px, radial-gradient(circle at 113% -16%, transparent 14px, #888 15px, transparent 16px) 47px 46px, radial-gradient(circle at 0% -19%, transparent 14px, #888 15px, transparent 16px) 28px 45px, radial-gradient(circle at 15% -19%, transparent 14px, #888 15px, transparent 16px) 50px 50px, radial-gradient(circle at -13% -16%, transparent 14px, #888 15px, transparent 16px) 51px 46px, radial-gradient(circle at 100% -19%, transparent 14px, #888 15px, transparent 16px) 20px 45px, radial-gradient(circle at 50% 50%, transparent 2px, #888 3px, transparent 4px) 24px 72px, radial-gradient(circle at 110% 3%, transparent 10px, #888 11px, transparent 12px) 57px 50px, radial-gradient(circle at 111% -3%, transparent 10px, #888 11px, transparent 12px) 52px 54px, radial-gradient(circle at 91% -2%, transparent 4px, #888 5px, transparent 6px)46px 56px, radial-gradient(circle at 80% -14%, transparent 15px, #888 16px, transparent 17px) 61px 58px, radial-gradient(circle at 100% 0%, transparent 2px, #888 3px, transparent 4px) 50px 40px, radial-gradient(circle at 100% 0%, transparent 2px, #888 3px, transparent 4px) 47px 41px, #FFF; background-size: 50px 50px; border: 2px solid #000; height: 150px; width: 150px;"> .

Hotpink

<div style="background: radial-gradient(rgba(255, 20, 147, 0.5) 50px, #000000, transparent 30px), radial-gradient(rgba(255, 105, 180, 0.8) 23px, #000000, transparent 30px) 0 25px, radial-gradient(rgba(200, 66, 20, 0.3) 23px, #000, transparent 25px) 25px 0, radial-gradient(rgba(0, 0, 0, 0.5) 23px, #000, transparent 25px) 25px 25px, #FFF; background-size: 70px 80px; color: black; border: 3px solid black; border-radius: 1px; color: #FFFFFF; height: 150px; width: 150px;"> .

HEARTS <div style="background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%), radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%) 50px 50px; background-color: #b03; background-size: 100px 100px; height: 150px; width: 150px; border: 2px solid #000;"> . ARGYLE <div style="background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0, 0, 0, 0.3) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3)), linear-gradient(120deg, rgba(0, 0, 0, 0.3) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3)); background-size: 140px 240px; background-color: #400; border: 2px solid #000; height: 150px; width: 150px;"> .

CRISS-CROSS <div style="background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 25%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 75%, rgba(255, 255, 255, 0.2) 75%), linear-gradient(45deg, rgba(0, 0, 0, 0) 25%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 75%, rgba(255, 255, 255, 0.2) 75%), rgb(0, 153, 151); background-size: 100px 100px; border: 2px solid #000; height: 150px; width: 150px;"> .

LILY PADS <div style="background: radial-gradient(circle at 10% 10%, #fff 10%, transparent 1%), radial-gradient(circle at 15% 15%, #8BFF8B 20%, transparent 1%), radial-gradient(circle at 25% 25%, #0f0 30%, transparent 1%), radial-gradient(circle at 30% 30%, #00C100 40%, transparent 1%), radial-gradient(circle at 90% 90%, #fff 10%, transparent 1%), radial-gradient(circle at 85% 85%, #8BFF8B 20%, transparent 1%), radial-gradient(circle at 75% 75%, #0f0 30%, transparent 1%), radial-gradient(circle at 70% 70%, #00C100 40%, transparent 1%), radial-gradient(circle at 10% 90%, #fff 10%, transparent 1%), radial-gradient(circle at 15% 85%, #8BFF8B 20%, transparent 1%), radial-gradient(circle at 25% 75%, #0f0 30%, transparent 1%), radial-gradient(circle at 25% 27%, #00C100 40%, transparent 1%), radial-gradient(circle at 90% 10%, #fff 10%, transparent 1%), radial-gradient(circle at 85% 15%, #8BFF8B 20%, transparent 1%), radial-gradient(circle at 75% 25%, #0f0 30%, transparent 1%), radial-gradient(circle at 75% 25%, #00C100 40%, transparent 1%); background-size: 50px 50px; border: 2px solid #000; height: 150px; width: 150px;"> .

FLOWERS AND DOTS <div style="background: radial-gradient(circle at 50% 50%, #E0FFFF 12%, transparent 0px), radial-gradient(circle at 50% 50%, #066 15%, transparent 0px), radial-gradient(circle at 60% 60%, #e0ffff 14%, transparent 0px), radial-gradient(circle at 65% 65%, #066 15%, transparent 0px), radial-gradient(circle at 60% 40%, #e0ffff 14%, transparent 0px), radial-gradient(circle at 65% 35%, #066 15%, transparent 0px), radial-gradient(circle at 40% 40%, #e0ffff 14%, transparent 0px), radial-gradient(circle at 35% 35%, #066 15%, transparent 0px), radial-gradient(circle at 40% 60%, #e0ffff 14%, transparent 0px), radial-gradient(circle at 35% 65%, #066 15%, transparent 0px), radial-gradient(circle at 65% 50%, #E0FFFF 14%, transparent 0px), radial-gradient(circle at 70% 50%, #066 15%, transparent 0px), radial-gradient(circle at 35% 50%, #e0ffff 14%, transparent 0px), radial-gradient(circle at 30% 50%, #066 15%, transparent 0px), radial-gradient(circle at 50% 65%, #e0ffff 14%, transparent 0px), radial-gradient(circle at 50% 70%, #066 15%, transparent 0px), radial-gradient(circle at 50% 35%, #e0ffff 14%, transparent 0px), radial-gradient(circle at 50% 30%, #066 15%, transparent 0px), radial-gradient(circle at 90% 90%, #e0ffff 5%, transparent 0px), radial-gradient(circle at 90% 90%, #066 8%, transparent 0px); background-size: 75px 75px; background-color: #088; border: 2px solid #000; height: 150px; width: 150px;"> .

GRADIENTS

PEACOCK TAIL

FEATHERS

Ice <div style="background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 49%, rgba(50, 50, 50, 0.5) 50%, rgba(0, 0, 0, 0.1) 51%), linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 49%, rgba(50, 50, 50, 0.5) 50%, rgba(0, 0, 0, 0.1) 51%), linear-gradient(0deg, rgba(50, 50, 50, 0.5) 0, transparent 5%), #BFF; background-size: 15px 15px; border: 2px solid #000; height: 150px; width: 150px;"> .

Stars <div style="background: radial-gradient(transparent 13px, #000, transparent 15px), radial-gradient(transparent 13px, #000, transparent 15px) 15px 15px; background-color: #fff; background-size: 25px 25px; border: 2px solid #000; height: 150px; width: 150px;">

. Ocean <div style="background: linear-gradient(#87ceeb 50%, rgba(135,206,235,0) 0) 0 0, radial-gradient(circle closest-side, #87ceeb 53%, rgba(135,206,235,0) 0) 0 0, radial-gradient(circle closest-side, #87ceeb 50%, rgba(135,206,235,0) 0) 50px 0 #005684; background-size: 100px 100px; background-repeat: repeat-x; border: 2px solid #000; height: 150px; width: 150px;"> .

{|