API tools faq
paste
mixue

cr crdskiz 4

mixue
Feb 26th, 2023 (edited)
561
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.41 KB | None | 0 0
raw download clone embed print report
  1. * PLEASE CREDIT CRDSKIZ WHEN REMAKING *
  2.  
  3. --- MAIN CONTAINER ---
  4. box-shadow: inset 0 7px 7px -5px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
  5. width: 300px;
  6. border-radius: 0.50em 5em 0.50em 5em;
  7. background: radial-gradient(circle, #ffc8e5, #fffcfa, #fffae2, #fce5ef, #CBDBFE);
  8. height: 19.5em;
  9.  
  10. (mobile)
  11. height: 21em;
  12.  
  13. --- NAME TEXT ---
  14. font-family: kiwi;
  15. filter: drop-shadow(1px 1px 0 gray) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 2px 0 #fdc0df) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 1.5px #fdfdfb) drop-shadow(0 -1px 1.5px #cbdbfe) drop-shadow(1px -1px 1.5px #f6daf0) drop-shadow(-1px -1px 1.5px #fee9f2);
  16.  
  17. (Text: Highlight)
  18. font-family: genty;
  19. font-size: 1.2em;
  20.  
  21. --- MAIN SCROLLBOX ---
  22. height: 120px;
  23. background: #FFFFFF80;
  24. overflow: auto;
  25. padding: 5px;
  26. border-radius: 0.5em 0em 0em 0.5em;
  27.  
  28. (mobile)
  29. height: 100px;
  30.  
  31. (Text: Highlight)
  32. background: linear-gradient(90deg, #DEB6CB, #AFCDE3, #F0D5E3, #F2C9E4, white, #ADA193);
  33. padding-left: 2px;
  34. padding-right: 2px;
  35. font-size: 1.6em;
  36. font-family: kiwi;
  37. font-weight: bold;
  38. -webkit-background-clip: text;
  39. -webkit-text-fill-color: transparent;
  40. -webkit-text-stroke: 0.5px black;
  41. letter-spacing: 1px;
  42. line-height: 0.5em;
  43. filter: drop-shadow(1px 1px 0 gray) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 1px 0 #fdc0df) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 1.5px #fdfdfb) drop-shadow(0 -1px 1.5px #cbdbfe) drop-shadow(1px -1px 1.5px #f6daf0) drop-shadow(-1px -1px 1.5px #fee9f2);
  44.  
  45. --- LEFT IMAGE ---
  46. max-width: 125%;
  47. -webkit-filter: drop-shadow(1px 1px 0 gray) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 2px 0 #fdc0df) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 1.5px #fdfdfb) drop-shadow(0 -1px 1.5px #cbdbfe) drop-shadow(1px -1px 1.5px #f6daf0) drop-shadow(-1px -1px 1.5px #fee9f2);
  48. position: relative;
  49. right: 25px;
  50. bottom: 20px;
  51.  
  52. --- RIGHT IMAGE ---
  53. max-width: 125%;
  54. -webkit-filter: drop-shadow(1px 1px 0 gray) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 2px 0 #fdc0df) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 1.5px #fdfdfb) drop-shadow(0 -1px 1.5px #cbdbfe) drop-shadow(1px -1px 1.5px #f6daf0) drop-shadow(-1px -1px 1.5px #fee9f2);
  55. position: relative;
  56. bottom: 20px;
  57.  
  58. --- LINKS ---
  59. background: #FFFFFF80;
  60. padding: 5px;
  61. border-radius: 0.5em 0em 0em 0.5em;
  62. bottom: 40px;
  63.  
  64. (mobile)
  65. bottom: 35px;
  66.  
  67. (Text: Link)
  68. text-decoration-style: dotted;
  69.  
  70. --- EXTRA CONTAINER ---
  71. box-shadow: inset 0 7px 7px -5px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
  72. height: 200px;
  73. width: 200px;
  74. border-radius: 0.50em 4em 0.50em 4em;
  75. background: radial-gradient(circle, #ffc8e5, #fffcfa, #fffae2, #fce5ef, #CBDBFE);
  76. z-index: 99;
  77.  
  78. --- EXTRA SCROLLBOX ---
  79. height: 105px;
  80. background: #FFFFFF80;
  81. overflow: auto;
  82. padding: 5px;
  83. border-radius: 0.50em 0em 0em 2em;
  84.  
  85. (Text: Highlight)
  86. background: linear-gradient(90deg, #DEB6CB, #AFCDE3, #F0D5E3, #F2C9E4, white, #ADA193);
  87. padding-left: 2px;
  88. padding-right: 2px;
  89. font-size: 1.6em;
  90. font-family: kiwi;
  91. font-weight: bold;
  92. -webkit-background-clip: text;
  93. -webkit-text-fill-color: transparent;
  94. -webkit-text-stroke: 0.5px black;
  95. letter-spacing: 1px;
  96. line-height: 0.5em;
  97. filter: drop-shadow(1px 1px 0 gray) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 1px 0 #fdc0df) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 1.5px #fdfdfb) drop-shadow(0 -1px 1.5px #cbdbfe) drop-shadow(1px -1px 1.5px #f6daf0) drop-shadow(-1px -1px 1.5px #fee9f2);
  98.  
  99. --- POSITIONING for EXTRA CONTAINER ---
  100. position: absolute;
  101. bottom: 1.2em;
  102. right: 1em;
  103.  
  104. (mobile)
  105. right: -1.5em;
  106.  
  107.  
  108. --- ALL FONTS ---
  109. <style>
  110. @font-face {
  111. font-family: genty;
  112. src: url(https://dl.dropbox.com/s/ctpy3s68nge1r8d/GentyDemo-Regular.ttf);
  113. }
  114.  
  115. @font-face {
  116. font-family: kiwi;
  117. src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
  118. }
  119.  
  120. </style>
  121.  
  122. --- IMAGE MASK ---
  123. (1ST OPTION)
  124.  
  125. <style>
  126. .image .frame img {
  127. -webkit-mask-image: url(https://dl.dropbox.com/s/5nxo40dtl1cmsa7/pink-heart-shaped-cloud-isolated-on-white-background-illustration-vector-removebg-preview.png);
  128. -webkit-mask-size: 120%;
  129. -webkit-mask-repeat: no-repeat;
  130. -webkit-mask-position: center;
  131. }
  132. </style>
  133.  
  134. * USE THIS CODE IF THE FIRST ONE DOESN'T WORK FOR YOU/DOESN'T SHOW UP ON YOUR DEVICE *
  135.  
  136. (2ND OPTION)
  137.  
  138. <style>
  139. .image .frame img {
  140. -webkit-mask-box-image: url(https://dl.dropbox.com/s/5nxo40dtl1cmsa7/pink-heart-shaped-cloud-isolated-on-white-background-illustration-vector-removebg-preview.png);
  141. -webkit-mask-size: 120%;
  142. -webkit-mask-repeat: no-repeat;
  143. -webkit-mask-position: center;
  144. }
  145. </style>
  146.  
  147.  
  148. --- SCROLLBAR ---
  149. <style>
  150. ::-webkit-scrollbar {
  151. width: 13px }
  152.  
  153. ::-webkit-scrollbar:horizontal {
  154. height: 17px
  155. }
  156.  
  157. ::-webkit-scrollbar-corner {
  158. background: #eee
  159. }
  160.  
  161. ::-webkit-scrollbar-track:vertical {
  162. background: linear-gradient(90deg, #e5e5e580, #f0f0f080 20%)
  163. }
  164.  
  165. ::-webkit-scrollbar-track:horizontal {
  166. background: linear-gradient(180deg, #e5e5e580, #f0f0f080 20%)
  167. }
  168.  
  169. ::-webkit-scrollbar-thumb {
  170. border: 1.5px solid #888;
  171. border-radius: 3px;
  172. box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
  173. background-color: #eee;
  174. }
  175.  
  176. ::-webkit-scrollbar-thumb:vertical {
  177. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
  178. }
  179.  
  180. ::-webkit-scrollbar-thumb:horizontal {
  181. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
  182. }
  183.  
  184. ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement {
  185. display: block
  186. }
  187. ::-webkit-scrollbar-button:vertical {
  188. height: 17px
  189. }
  190.  
  191. ::-webkit-scrollbar-button:vertical:start:decrement {
  192. background: white;
  193. background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
  194. background-repeat: no-repeat;
  195. background-position: center;
  196. -moz-background-size: cover;
  197. -webkit-background-size: cover;
  198. -o-background-size: cover;
  199. background-size: cover;
  200. }
  201.  
  202. ::-webkit-scrollbar-button:vertical:start:increment {
  203. display: none;
  204. }
  205.  
  206. ::-webkit-scrollbar-button:vertical:end:decrement {
  207. display: none;
  208. }
  209.  
  210. ::-webkit-scrollbar-button:vertical:end:increment {
  211. background: white;
  212. background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
  213. background-repeat: no-repeat;
  214. background-position: center;
  215. -moz-background-size: cover;
  216. -webkit-background-size: cover;
  217. -o-background-size: cover;
  218. background-size: cover;
  219. }
  220. </style>
  221.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!