Free Code For YOU My Friend

Reyn

Reyn

Sleepyhead
Staff member
Thread where people can dump FREE CODE for YOU TO USE IN YOUR POSTS

Feel free to add your own code- anything posted to this thread can be used by anyone for whatever reason forever
 
dice clip paths - outline edition

these may be a bit wonky :( and theyre not fun to resize. but if you want an outline then here you go eat up (background and padding div is for illustration purposes, feel free to remove everything up to and including this text)

20

12

10

100
100

8

6

4

:)

Code: 
D20
[div="clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);display:flex;align-items: center;justify-content:center;height:110px;width:100px;background-color:white;"][div="clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);display:flex;align-items: center;justify-content:center;height:106px;width:96px;font-size:42px;background-color:black;color:white;"]20[/div][/div]

D12
[div="clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);display:flex;align-items: center;justify-content:center;height:110px;width:100px;background-color:white;"][div="clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);display:flex;align-items: center;justify-content:center;height:106px;width:96px;font-size:42px;background-color:black;color:white;"]12[/div][/div]

D10
[div="clip-path:polygon(50% 0%, 100% 40%, 100% 60%, 50% 100%, 0% 60%, 0% 40%);background-color:white;height:110px;width:100px; display:flex;align-items: center;justify-content:center;"][div="clip-path:polygon(50% 0%, 100% 40%, 100% 60%, 50% 100%, 0% 60%, 0% 40%);background-color:black;height:106px;width:96px;font-size:42px;display:flex;align-items: center;justify-content:center;"]10[/div][/div]

D100
[div="clip-path:polygon(50% 0%, 100% 40%, 100% 60%, 50% 100%, 0% 60%, 0% 40%);background-color:white;height:110px;width:100px; display:flex;align-items: center;justify-content:center;"][div="clip-path:polygon(50% 0%, 100% 40%, 100% 60%, 50% 100%, 0% 60%, 0% 40%);background-color:black;height:106px;width:96px;font-size:42px;display:flex;align-items: center;justify-content:center;"]100[/div][/div]
[div="padding-left:75px;font-size:80%;transform:translate(0, -15px)"]100[/div]

D8
[div="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background-color:white;height:110px;width:110px; display:flex;align-items: center;justify-content:center;"][div="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background-color:black;height:106px;width:106px;font-size:42px;display:flex;align-items: center;justify-content:center;"]8[/div][/div]

D6
[div="width:85px;height:85px;border:2px solid white;background-color:black;color:white;display:flex;align-items: center;justify-content:center;font-size:42px"]6[/div]

D4
[div="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);display:flex;align-items: center;justify-content:center;height:95px;width:110px;background-color:white;"][div="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);display:flex;align-items: center;justify-content:center;font-size:42px;height:91px;width:104px;background-color:black;color:white;"][div="transform:translate(0, 7px);"]4[/div]
 
dice clip paths - solid edition

these are okay :) and theyre fine to resize. and if you dont want an outline then here you go eat up (background and padding div is for illustration purposes, feel free to remove everything up to and including this text)

20

12

10

100
100

8

6

4

:)

Code: 
D20
[div="clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);display:flex;align-items: center;justify-content:center;height:110px;width:100px;background-color:white;color:black;font-size:42px;"]20[/div]

D12
[div="clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);display:flex;align-items: center;justify-content:center;height:110px;width:100px;background-color:white;color:black;font-size:42px;"]12[/div]

D10
[div="clip-path:polygon(50% 0%, 100% 40%, 100% 60%, 50% 100%, 0% 60%, 0% 40%);background-color:white;height:110px;width:100px; display:flex;align-items: center;justify-content:center;color:black;font-size:42px;"]10[/div]

D100
[div="clip-path:polygon(50% 0%, 100% 40%, 100% 60%, 50% 100%, 0% 60%, 0% 40%);background-color:white;height:110px;width:100px; display:flex;align-items: center;justify-content:center;color:black;font-size:42px;"]100[/div]
[div="padding-left:75px;font-size:80%;transform:translate(0, -15px)"]100[/div]

D8
[div="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background-color:white;height:110px;width:110px; display:flex;align-items: center;justify-content:center;font-size:42px;color:black;"]8[/div]

D6
[div="width:85px;height:85px;background-color:white;color:black;display:flex;align-items: center;justify-content:center;font-size:42px"]6[/div]

D4
[div="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);display:flex;align-items: center;justify-content:center;height:95px;width:110px;background-color:white;color:black;font-size:42px;"][div="transform:translate(0, 7px);"]4[/div][/div]
 

ALSO THIS CODE
make sure the title fits within the top thing, or you can expand its width idk

go crazie

Code: 
[style]@import url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap);[/style]

[div="--dark: #111111;--bright: red;--fontmain: Share Tech Mono, monospace;"][div="background-color:var(--dark);width:100%;padding-top:25px;padding-bottom:25px;color:var(--bright);"][div="margin:auto;max-width:900px;font-family:var(--fontmain);"][div="height:25px;width:150px;position:relative;"][div="height:100%;width:100%;background-color:var(--bright);position:absolute;z-index:15;color:var(--dark);padding-left:20px;padding-top:3px;"]ALSO THIS CODE[/div][div="height:25px;width:25px;transform:skew(25deg);position:absolute;right:-12px;top:0px;background-color:var(--bright);"][/div][/div][div="border:1px solid var(--bright);
width:100%;background-color:var(--dark);padding:5px;font-size:12px;color:var(--bright);"]make sure the title fits within the top thing, or you can expand its width idk

go crazie[/div][/div][/div][/div]
 
This is incredibly basic code that works well for people with dyslexia. You can thank Illirica for this code.

Code: 
[div="padding:10px;font-size:14px;line-height:25px;letter-spacing:3px;background-color:#444444;color:white;font-family:'Open Sans';"]
 

simple div with border + background color + text color


Code: 
[div="background:black; border:5px red solid; padding:25px;"][color="#ffffff"]
simple div with border + background color + text color

[/color][/div]
 
Last edited:


above + import font - Roboto - feel free to change font


Code: 
[style]@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);[/style]  

[div="background:black; border:5px red solid; padding:25px;"][font=Roboto][color="#ffffff"]
above + import font - Roboto - feel free to change font

[/color][/font][/div]
 
Last edited:

two stacked borders


Code: 
[div="background-color:black; border:5px red solid; padding:5px;"][div="border:5px pink solid; padding:15px;"][COLOR=white]
two stacked borders

[/COLOR][/div][/div]
 

border + background image

more text so u can see how the image scales

and repeats























.


Code: 
[div="background-color:black; border:5px pink solid;"][div="background-image:url(https://st2.depositphotos.com/2124221/46121/i/600/depositphotos_461218170-stock-photo-abstract-multicolored-background-poly-pattern.jpg); background-size:100%; background-repeat:repeat-y; padding:20px;"][div="background-color:black; padding:15px;"][COLOR=white]
border + background image

[/COLOR][/div][/div][/div]
 
You must log in or register to reply here.
Back
Top