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';"]
 
You must log in or register to reply here.
Back
Top