API tools faq
paste
mixue

cr crdskiz 2 (pro standard)

mixue
May 7th, 2023 (edited)
1,525
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.28 KB | None | 0 0
raw download clone embed print report
  1. * PLEASE CREDIT CRDSKIZ WHEN REMAKING *
  2.  
  3. --- MAIN CONTAINER ---
  4. #elementID > .wrapper {
  5. 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;
  6. width: 300px;
  7. border-radius: 0.50em 5em 0.50em 5em;
  8. background: radial-gradient(circle, #ffc8e5, #fffcfa, #fffae2, #fce5ef, #CBDBFE);
  9. height: 19.5em;
  10. }
  11.  
  12. @media only screen and (max-width: 600px) {
  13. #elementID > .wrapper {
  14. height: 21em;
  15. }
  16. }
  17.  
  18. --- NAME TEXT ---
  19. @font-face {
  20. font-family: genty;
  21. src: url(https://dl.dropbox.com/s/ctpy3s68nge1r8d/GentyDemo-Regular.ttf);
  22. }
  23.  
  24. @font-face {
  25. font-family: kiwi;
  26. src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
  27. }
  28.  
  29. #elementID {
  30. font-family: kiwi;
  31. 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);
  32. }
  33.  
  34. #elementID mark {
  35. font-family: genty;
  36. font-size: 1.2em;
  37. }
  38.  
  39. --- LEFT SCROLLBOX ---
  40. #elementID {
  41. height: 120px;
  42. background: #FFFFFF80;
  43. overflow: auto;
  44. padding: 5px;
  45. border-radius: 0.5em 0em 0em 0.5em;
  46. }
  47.  
  48. @media only screen and (max-width: 600px) {
  49. #elementID {
  50. height: 100px;
  51. }
  52. }
  53.  
  54. #elementID mark {
  55. background: linear-gradient(90deg, #DEB6CB, #AFCDE3, #F0D5E3, #F2C9E4, white, #ADA193);
  56. padding-left: 2px;
  57. padding-right: 2px;
  58. font-size: 1.6em;
  59. font-family: kiwi;
  60. font-weight: bold;
  61. -webkit-background-clip: text;
  62. -webkit-text-fill-color: transparent;
  63. -webkit-text-stroke: 0.5px black;
  64. letter-spacing: 1px;
  65. line-height: 0.5em;
  66. 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);
  67. }
  68.  
  69. --- SCROLLBAR ---
  70.  
  71. ** THIS IS THE OLD CODE FOR THE SCROLLBAR AND THE ARROWS DON'T SHOW UP ANYMORE, SO YOU CAN TRY TO USE THIS ALTERNATE CODE INSTEAD: https://codepen.io/flowerfairy/pen/wvmpjQL **
  72.  
  73. <style>
  74. ::-webkit-scrollbar {
  75. width: 13px }
  76.  
  77. ::-webkit-scrollbar:horizontal {
  78. height: 17px
  79. }
  80.  
  81. ::-webkit-scrollbar-corner {
  82. background: #eee
  83. }
  84.  
  85. ::-webkit-scrollbar-track:vertical {
  86. background: linear-gradient(90deg, #e5e5e580, #f0f0f080 20%)
  87. }
  88.  
  89. ::-webkit-scrollbar-track:horizontal {
  90. background: linear-gradient(180deg, #e5e5e580, #f0f0f080 20%)
  91. }
  92.  
  93. ::-webkit-scrollbar-thumb {
  94. border: 1.5px solid #888;
  95. border-radius: 3px;
  96. box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
  97. background-color: #eee;
  98. }
  99.  
  100. ::-webkit-scrollbar-thumb:vertical {
  101. 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)
  102. }
  103.  
  104. ::-webkit-scrollbar-thumb:horizontal {
  105. 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)
  106. }
  107.  
  108. ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement {
  109. display: block
  110. }
  111. ::-webkit-scrollbar-button:vertical {
  112. height: 17px
  113. }
  114.  
  115. ::-webkit-scrollbar-button:vertical:start:decrement {
  116. background: white;
  117. background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
  118. background-repeat: no-repeat;
  119. background-position: center;
  120. -moz-background-size: cover;
  121. -webkit-background-size: cover;
  122. -o-background-size: cover;
  123. background-size: cover;
  124. }
  125.  
  126. ::-webkit-scrollbar-button:vertical:start:increment {
  127. display: none;
  128. }
  129.  
  130. ::-webkit-scrollbar-button:vertical:end:decrement {
  131. display: none;
  132. }
  133.  
  134. ::-webkit-scrollbar-button:vertical:end:increment {
  135. background: white;
  136. background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
  137. background-repeat: no-repeat;
  138. background-position: center;
  139. -moz-background-size: cover;
  140. -webkit-background-size: cover;
  141. -o-background-size: cover;
  142. background-size: cover;
  143. }
  144. </style>
  145.  
  146. --- LEFT IMAGE ---
  147. #elementID .frame {
  148. max-width: 125%;
  149. -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);
  150. position: relative;
  151. right: 25px;
  152. bottom: 20px;
  153. }
  154.  
  155. --- IMAGE MASK ---
  156.  
  157. (1ST OPTION)
  158.  
  159. .image .frame img {
  160. -webkit-mask-image: url(https://dl.dropbox.com/s/5nxo40dtl1cmsa7/pink-heart-shaped-cloud-isolated-on-white-background-illustration-vector-removebg-preview.png);
  161. -webkit-mask-size: 120%;
  162. -webkit-mask-repeat: no-repeat;
  163. -webkit-mask-position: center;
  164. }
  165.  
  166. (2ND OPTION)
  167. * USE THIS CODE IF THE FIRST ONE DOESN'T WORK FOR YOU/DOESN'T SHOW UP ON YOUR DEVICE *
  168.  
  169. .image .frame img {
  170. -webkit-mask-box-image: url(https://dl.dropbox.com/s/5nxo40dtl1cmsa7/pink-heart-shaped-cloud-isolated-on-white-background-illustration-vector-removebg-preview.png);
  171. -webkit-mask-size: 120%;
  172. -webkit-mask-repeat: no-repeat;
  173. -webkit-mask-position: center;
  174. }
  175.  
  176. --- RIGHT IMAGE ---
  177. #elementID .frame {
  178. max-width: 125%;
  179. -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);
  180. position: relative;
  181. bottom: 20px;
  182. }
  183.  
  184. --- RIGHT SCROLLBOX ---
  185. #elementID {
  186. height: 120px;
  187. background: #FFFFFF80;
  188. overflow: auto;
  189. padding: 5px;
  190. border-radius: 0.5em 0em 0em 0.5em;
  191. bottom: 35px;
  192. }
  193.  
  194. @media only screen and (max-width: 600px) {
  195. #elementID {
  196. height: 100px;
  197. }
  198. }
  199.  
  200. --- LINKS ---
  201. #elementID {
  202. background: #FFFFFF80;
  203. padding: 5px;
  204. border-radius: 0.5em 0em 0em 0.5em;
  205. bottom: 40px;
  206. }
  207.  
  208. @media only screen and (max-width: 600px) {
  209. #elementID {
  210. bottom: 35px;
  211. }
  212. }
  213.  
  214. #elementID a {
  215. text-decoration-style: dotted;
  216. }
  217.  
  218. --- CREDITS ---
  219. imgs used are originally by lunnedelicate
  220. © crdskiz for this crd layout
  221.  
  222. --- CREDITS POSITIONING ---
  223. #elementID {
  224. left: 10px;
  225. }
  226.  
  227. --- EXTRA CONTAINER ---
  228. #elementID > .wrapper {
  229. 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;
  230. height: 200px;
  231. width: 200px;
  232. border-radius: 0.50em 4em 0.50em 4em;
  233. background: radial-gradient(circle, #FBFFE0, #fffcfa, #fffae2, #fce5ef, #FBFFE0);
  234. z-index: 99;
  235. position: absolute;
  236. bottom: 1.2em;
  237. right: 1em;
  238. }
  239.  
  240. @media only screen and (max-width: 600px) {
  241. #elementID > .wrapper {
  242. right: -1.5em;
  243. }
  244. }
  245.  
  246. --- EXTRA SCROLLBOX ---
  247. #elementID {
  248. height: 105px;
  249. background: #FFFFFF80;
  250. overflow: auto;
  251. padding: 5px;
  252. border-radius: 0.50em 0em 0em 2em;
  253. }
  254.  
  255. #elementID mark {
  256. background: linear-gradient(90deg, #DEB6CB, #AFCDE3, #F0D5E3, #F2C9E4, white, #ADA193);
  257. padding-left: 2px;
  258. padding-right: 2px;
  259. font-size: 1.6em;
  260. font-family: kiwi;
  261. font-weight: bold;
  262. -webkit-background-clip: text;
  263. -webkit-text-fill-color: transparent;
  264. -webkit-text-stroke: 0.5px black;
  265. letter-spacing: 1px;
  266. line-height: 0.5em;
  267. 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);
  268. }
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!