API tools faq
paste
Advertisement
soxxx

012 - dark

soxxx
Dec 29th, 2024
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.21 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by sox
  2.  
  3. [font=Staatliches]font1[/font]
  4.  
  5. [/comment][comment]----
  6.  
  7.  
  8. SOX'S RECOMMENDED WAY TO CUSTOMIZE THIS CODE:
  9.  
  10. 1. swap out the sample picture URL value (mainpic) to your new picture's URL
  11. 2. try different colors for the overlay blocks (accent1) to find one that creates a color scheme that you feel suits the picture. i usually start by picking a color from the background of the picture and going warmer/colder/brighter/darker from there, or trying a color from the foreground if that one doesn't work.
  12. 3. pick two new accent colors (accent2, accent3) out of the color scheme you just created with the overlay blocks that balance out the color distribution across the card
  13.  
  14.  
  15. ----[/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;
  16.  
  17. /*accent colors*/
  18. --accent0: #000; /*black - keep dark!*/
  19. --accent1: #FB3B3F; /*red*/
  20. --accent2: #069870; /*green*/
  21. --accent3: #F1BBA2; /*tan*/
  22.  
  23.  
  24. /*other colors*/
  25. --cord: #171717; /*lanyard color - dark gray*/
  26. --clip: #9C9C9C; /*metal clips color - gray*/
  27.  
  28.  
  29. /*values to edit*/
  30. --card: var(--accent0); /*card background color*/
  31.  
  32. --blockcolor: var(--accent1); /*overlay block decorations color*/
  33. --blockblend: difference; /*block blend mode*/
  34.  
  35. --titlecolor: var(--accent2); /*name color*/
  36. --titlesize: 18px; /*name font size*/
  37. --titlelineheight: 15px; /*name line height*/
  38. --titlefont: var(--font1); /*name font*/
  39.  
  40. --rolecolor: var(--accent3); /*role color*/
  41. --rolesize: 13px; /*role font size*/
  42. --rolelineheight: 15px; /*role line height*/
  43. --rolefont: var(--font1); /*role font*/
  44.  
  45.  
  46. /*pics*/
  47. --mainpic: url('https://i.imgur.com/4yxrNMG.png'); /*character picture*/
  48. --mainpicsize: cover; /*picture size*/
  49. --mainpicposition: 50% 50%; /*picture positioning*/
  50.  
  51.  
  52. /*values you probably don't need to edit*/
  53. --cardshadow: 3px 3px 5px rgba(0,0,0,0.4); /*card bkgd shadow*/
  54. --contentwidth: 140px; /*card content container width*/
  55. --contentheight: 235px; /*card content container height*/
  56. --clipbase: 5px solid var(--clip); /*metal clips base color/width*/
  57. --clipshadowouter: 0px 0px 3px rgba(0,0,0,1) inset; /*clips shading*/
  58. --clipshadowinner: 0px 0px 3px rgba(0,0,0,1); /*clips shading*/
  59. --topclipradius: 5px 5px 50px 50px; /*top clip border radius*/
  60. --bottomclipradius: 10px; /*bottom clip border radius*/
  61. --coverradius: 0px 0px 3px 3px; /*clip overlap cover border radius*/
  62. --covershadow: 0px 0px 3px rgba(0,0,0,0.5) inset; /*clip overlap cover shading*/
  63. --cordradius: 0px 0px 3px 3px; /*lanyard border radius*/
  64. --cordshadow: 0px 0px 3px rgba(0,0,0,1) inset; /*lanyard shading*/
  65.  
  66.  
  67. /*fonts*/
  68. --font1: 'Staatliches', sans-serif;
  69.  
  70.  
  71. ][div=margin:auto; position:relative; width:300px; height:410px; margin-top:10px; margin-bottom:10px; background:var(--bkgd); border:var(--border0); box-sizing:border-box; overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto; font-family:var(--font1); color:var(--accent00);][nobr]
  72.  
  73.  
  74. [comment]---- CARD START ----[/comment]
  75. [div=position:absolute; left:57px; bottom:8px; width:185px; height:275px; background:var(--card); border-radius:5px; box-shadow: var(--cardshadow);]
  76.  
  77. [comment]---- content container start ----[/comment]
  78. [div=position:absolute; left:22.5px; top:20px; width:var(--contentwidth); height:var(--contentheight); box-sizing-border-box;overflow:hidden;]
  79.  
  80. [comment]-- top line --[/comment][div=position:absolute; left:0px; top:0px; width:100%; height:2px; background:var(--accent3);][/div]
  81. [comment]-- bottom line --[/comment][div=position:absolute; left:0px; bottom:0px; width:100%; height:2px; background:var(--accent2);][/div]
  82. [comment]-- picture --[/comment][div=position:absolute; left:0px; top:5px; width:100%; height:140px; background:var(--mainpic); background-size:var(--mainpicsize); background-position:var(--mainpicposition);][/div]
  83.  
  84. [comment]-- block 1: overlay block --[/comment][div=position:absolute; right:0px; top:5px; width:20px; height:175px; background:var(--blockcolor); background-size:cover; background-position:50% 50%; mix-blend-mode:var(--blockblend);][/div]
  85. [comment]-- block 2: bottom left --[/comment][div=position:absolute; left:0px; bottom:5px; width:36px; height:33px; background:var(--blockcolor); background-size:cover; background-position:50% 50%; mix-blend-mode:var(--blockblend);][/div]
  86. [comment]-- block 3: bottom right --[/comment][div=position:absolute; left:0px; bottom:5px; width:var(--contentwidth); height:13px; background:var(--blockcolor); background-size:cover; background-position:50% 50%; mix-blend-mode:var(--blockblend);][/div]
  87.  
  88. [comment]-- right line --[/comment][div=position:absolute; right:0px; top:183px; width:20px; height:2px; background:var(--accent3);][/div]
  89. [comment]-- left line --[/comment][div=position:absolute; left:0px; top:191px; width:36px; height:2px; background:var(--accent2);][/div]
  90.  
  91. [comment]-- name start --[/comment][div=position:absolute; left:0px; top:150px; width:115px; height:170px; font-family:var(--titlefont); font-size:var(--titlesize); line-height:var(--titlelineheight); color: var(--titlecolor); text-align:right;][comment]
  92.  
  93. ---- FIRST NAME HERE ----
  94. [/comment]yuchan
  95. [br][/br][comment]
  96.  
  97. ---- LAST NAME HERE ----
  98. [/comment]kang
  99. [/div][comment]-- name end --[/comment]
  100.  
  101. [comment]-- role start --[/comment][div=position:absolute; left:0px; top:198px; width:var(--contentwidth); height:170px; padding-left:41px; font-family:var(--rolefont); font-size:var(--rolesize); line-height:var(--rolelineheight); color: var(--rolecolor); text-align:left;]
  102. [comment]
  103.  
  104. ---- ROLE/FACECLAIM HERE ----
  105. [/comment]the spitfire
  106. [/div][comment]-- role end--[/comment]
  107.  
  108. [/div][comment]---- content container end----[/comment]
  109. [/div][comment]---- CARD END ----[/comment]
  110.  
  111.  
  112. [comment]---- CLIPS START ----[/comment]
  113. [comment]---- top clip start ----[/comment]
  114. [comment]-- metal body --[/comment][div=position:absolute; left:120px; top:15px; width:60px; height:60px; border:var(--clipbase); box-sizing:border-box;border-radius:var(--topclipradius);][/div]
  115. [comment]-- outer shadow --[/comment][div=position:absolute; left:120px; top:15px; width:60px; height:60px; border-radius:var(--topclipradius); box-shadow:var(--clipshadowouter);][/div]
  116. [comment]-- inner shadow --[/comment][div=position:absolute; left:125px; top:20px; width:50px; height:50px; border-radius:var(--topclipradius); box-shadow:var(--clipshadowinner);][/div]
  117. [comment]---- top clip end ----[/comment]
  118.  
  119. [comment]---- bottom clip start ----[/comment]
  120. [comment]-- metal body --[/comment][div=position:absolute; left:140px; top:65px; width:20px; height:75px; border:var(--clipbase); box-sizing:border-box; border-radius:var(--bottomclipradius);][/div]
  121. [comment]-- outer shadow --[/comment][div=position:absolute; left:140px; top:65px; width:20px; height:75px; box-sizing:border-box; border-radius:var(--bottomclipradius); box-shadow:var(--clipshadowouter);][/div]
  122. [comment]-- inner shadow --[/comment][div=position:absolute; left:145px; top:70px; width:10px; height:65px; box-sizing:border-box; border-radius:var(--bottomclipradius); box-shadow:var(--clipshadowinner);][/div]
  123. [comment]---- bottom clip end ----[/comment]
  124.  
  125. [comment]---- clip covers start ----[/comment]
  126. [comment]-- metal overlap container --[/comment][div=position:absolute; left:152px; top:69.5px; background:var(--clip); width:9px; height:4.5px;box-sizing:border-box; border-radius:var(--coverradius); transform:rotate(-14deg);overflow:hidden;]
  127. [comment]-- metal overlap --[/comment][div=position:absolute; left:-2px; top:0px; background:var(--clip); width:13px; height:4.5px;box-sizing:border-box; border-radius:var(--coverradius); box-shadow:var(--covershadow);][/div][/div]
  128. [comment]-- card hole 1 --[/comment][div=position:absolute; left:150px; top:127px; width:12px; height:8px; background:var(--card);][/div]
  129. [comment]-- card hole 2 --[/comment][div=position:absolute; left:152px; top:130px; width:10px; height:8px; background:var(--card); transform:rotate(40deg);][/div]
  130. [comment]---- clip covers end ----[/comment]
  131.  
  132. [comment]-- cord/lanyard --[/comment][div=position:absolute; left:127px; top:-2px; width:46px; height:25px; background:var(--cord); border-radius:var(--cordradius); box-shadow:var(--cordshadow);][/div]
  133.  
  134. [comment]---- CLIPS END ----[/comment]
  135.  
  136. [/nobr][/div][/div]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!