Graphic elements (code) inspired by GSGW manhwa

Actions

Work Header

Rating:

General Audiences

Archive Warning:

No Archive Warnings Apply

Category:

Fandoms:

Additional Tags:

Language:

English

Stats:

Published:: 2026-09-17
Updated:: 2026-09-19
Words:: 4,347
Chapters:: 2/?
Comments:: 14
Kudos:: 101
Bookmarks:: 22
Hits:: 441

M_Y_L

Summary:

I loved the novel, and I loved the manhwa's art style, so I'm recreating some things to use in my stories, or to practice.
Graphic elements from the manhwa, in CSS and HTML.

Until now:
Braun's program:
The Tuesday Quiz Show logo

Normal & angry speech bubbles

Post-it

Braun's head (television) Compatible con emojis and images
DER wiki page:
A wiki page open on Soleum's phone

Just the wiki open page, without the phone form

Notes:

I'm still learning, and I constantly review guides and other users' work. If there are any errors, please let me know. Any feedback is welcome 🙏🙏

Chapter 1: Things from the Braun Show

Summary:

I'm hosting my images on Discord, so if you can't see them on Braun's screen, that's probably why. Lol. I'll look for another host later.

Notes:

(See the end of the chapter for notes.)

Chapter Text

Braun's notes

Any conduct that does not respect the program will be sanctioned.

Code

CSS


#workskin .postit {
  position: relative;
  font-family: 'Comic Sans MS', 'Comic Neue', 'Courier New', cursive;
  color: #000000;
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1.3;
  background: #C2A365;
  background: linear-gradient(173deg,rgba(194, 163, 101, 1) 47%, rgba(156, 121, 72, 1) 100%);
  width: 260px;
  padding: 20px 20px 45px 20px;
  margin: 25px auto;
  display: block;
  box-shadow: 8px 8px 0px #2a221b;
  -webkit-box-shadow: 8px 8px 0px #2a221b;
  transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  outline: 1.5px solid #000000;
}

#workskin .postit::after {
  content: "㋡";
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 3em;
  opacity: 0.85;
  transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
}

HTML:


<p class="postit">Any conduct that does not respect the program will be sanctioned.</p>

Bruan's speech bubble

SEE YOU IN THE NEXT SHOW.

Code

CSS


#workskin .braun-bubble {
  position: relative;
  background: linear-gradient(180deg,rgba(105, 78, 58, 1) 0%, rgba(174, 133, 107, 1) 100%);
  width: 80%;
  max-width: 380px;
  margin: 35px auto;
  display: block;
  box-sizing: border-box;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #000000;
  padding: 6px;
}

#workskin .braun-bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 14px;
  right: 14px;
  background: linear-gradient(180deg,rgba(105, 78, 58, 1) 0%, rgba(174, 133, 107, 1) 100%);
  border-radius: 0px;
  box-shadow: 0 -3px 0 0 #000000, 0 3px 0 0 #000000;
  z-index: 1;
}

#workskin .braun-bubble::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -6px;
  right: -6px;
  background: linear-gradient(180deg,rgba(105, 78, 58, 1) 0%, rgba(174, 133, 107, 1) 100%);
  border-radius: 0px;
  box-shadow: -3px 0 0 0 #000000, 3px 0 0 0 #000000;
  z-index: 1;
}

#workskin .braun-bubble-inner {
  position: relative;
  z-index: 5;
  background-color: #E5DBC9;
  box-shadow: 0 0 0 2px #000000;
  padding: 30px 20px;
  display: block;
  font-family: 'Impact', 'Arial Black', sans-serif;
  color: #ffffff;
  font-size: 1.15em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000,

    0 0 2px #ffffff,
    0 0 3px #d8be69,
    0 0 10px #906B53;
}

#workskin .braun-bubble-inner::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 10px;
  right: 10px;
  background-color: #E5DBC9;
  border-radius: 4px;
  box-shadow: 0 -2px 0 0 #000000, 0 2px 0 0 #000000;
  z-index: -1;
}

#workskin .braun-bubble-inner::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -4px;
  right: -4px;
  background-color: #E5DBC9;
  border-radius: 4px;
  box-shadow: -2px 0 0 0 #000000, 2px 0 0 0 #000000;
  z-index: -1;
}

HTML:


<p class="braun-bubble><span class="braun-bubble-inner>SEE YOU IN THE NEXT SHOW.</span></p>

Braun's head*

🙄

Image*

Pantalla TV

I actually edited the image to make it look like this. Without it, it's just a normal image. I did add transparency from the workskin so the image would blend with the background. You can change that if you want.

Pantalla TV

Code

CSS


#workskin .braun-tv {
  position: relative;
  width: 320px;
  height: 200px;
  margin: 65px auto 30px auto;
  box-sizing: border-box;
}

#workskin .braun-tv::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50px;
  width: 120px;
  height: 100px;
  border-right: 6px solid #000000;
  border-radius: 4px;
  transform: rotate(-55deg);
}

#workskin .braun-tv::after {
  content: "";
  padding: 1px;
  margin: -0.5px;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #c2b8a3 0%, #9e937e 100%);
  border: 4px solid #000000;
  border-radius: 1px;
  box-shadow: 0 0 0 3px #635a4d, 0 6px 12px rgba(0,0,0,0.3);
  box-sizing: border-box;
}

#workskin .braun-screen,
#workskin .braun-panel {
  position: relative;
  z-index: 2;
}

#workskin .braun-screen {
  margin-top: 1.6px;
  width: 225px;
  height: 185px;
  float: left;
  background: linear-gradient(122deg,rgba(48, 45, 35, 1) 1%, rgba(115, 103, 84, 1) 10%, rgba(150, 130, 113, 1) 26%, rgba(116, 100, 85, 1) 44%, rgba(82, 69, 57, 1) 89%, rgba(41, 38, 29, 1) 100%);
  border: 3px solid #000000;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.9),
    0 0 0 3px #827766;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

#workskin .braun-screen .braun-face {
  opacity: 80%;
  font-size: 5em;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(77, 64, 53, 100));
}

#workskin .braun-screen img.braun-img {
  opacity: 85%;
  width: 99%;
  height: 99%;
  display: block;
  margin: auto;
  border-radius: 0.5px;
}

#workskin .braun-panel {
  margin-top: -1.5px;
  width: 80px;
  float: right;
  height: 192px;
  background: linear-gradient(122deg,rgba(140, 129, 109, 1) 0%, rgba(196, 175, 149, 1) 16%, rgba(148, 124, 102, 1) 28%, rgba(173, 146, 127, 1) 41%, rgba(189, 165, 136, 1) 59%, rgba(156, 137, 112, 1) 74%, rgba(194, 176, 140, 1) 83%, rgba(140, 129, 109, 1) 100%);
  border: 3px solid #000000;
  border-radius: 1px;
  box-sizing: border-box;
  padding: 8px 5px;
  text-align: center;
}

#workskin .knob-panel {
  width: 60px;
  height: 120px;
  background: linear-gradient(136deg,rgba(205, 188, 166, 1) 0%, rgba(232, 221, 207, 1) 16%, rgba(161, 140, 119, 1) 28%, rgba(224, 199, 177, 1) 41%, rgba(232, 215, 195, 1) 59%, rgba(168, 152, 131, 1) 74%, rgba(222, 211, 193, 1) 83%, rgba(205, 188, 166, 1) 100%);
  border: 3px solid #000000;
  border-radius: 0px;
  box-sizing: border-box;
  padding: 1px 5px;
  text-align: center;
  margin: 0px auto;
}

#workskin .braun-knob {
  width: 38px;
  height: 38px;
  margin: 4px auto 10px auto;
  background: radial-gradient(circle, #b8b0a0 30%, #524b40 100%);
  border: 2px solid #000000;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  position: relative;
}

#workskin .braun-knob::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 17px;
  width: 3px;
  height: 14px;
  background-color: #000000;
  border-radius: 2px;
}

#workskin .braun-speaker {
  width: 60px;
  height: 42px;
  margin: 5px auto;
  background: linear-gradient(110deg,rgba(0, 0, 0, 1) 0%, rgba(26, 26, 26, 1) 32%, rgba(0, 0, 0, 1) 100%);
  border: 2px double #6e6454;
  border-radius: 1px;
  box-shadow: inset 0 3px 3 #000000, inset 0 -3px 3 #000000;
  box-sizing: border-box;
}

HTML imagen:


<div class="braun-tv"><div class="braun-screen">

<p><img class="braun-img" src="https:// your link .png" alt="Pantalla TV"></p></div>

<div class="braun-panel">

<div class="knob-panel">

<div class="braun-knob"></div>

<div class="braun-knob"></div></div>

<div class="braun-speaker">

</div></div></div>

To be honest, I haven't tried it with complete words or phrases... meh

HTML emoji:


<div class="braun-tv"><div class="braun-screen">

<p><span class="braun-face">🙄</span></p></div>

<div class="braun-panel">

<div class="knob-panel">

<div class="braun-knob"></div>

<div class="braun-knob"></div></div>

<div class="braun-speaker">

</div></div></div>

Experiment

It's your turn to answer.

Pantalla TV

Mr. Badger

The Tuesday Quiz Show with Braun

The Tuesday

QUIZ SHOW

with Brown

Code

CSS


#workskin .quiz-badge {
  width: 320px;
  margin: 50px auto;
  box-sizing: border-box;
  transform: rotate(-1.2deg);
  -webkit-transform: rotate(-1deg);
}

#workskin .quiz-top {
  width: 170px;
  height: 32px;
  background: linear-gradient(230deg,rgba(77, 64, 53, 1) 0%, rgba(86, 72, 60, 1) 0%, rgba(143, 123, 107, 1) 5%, rgba(142, 122, 106, 1) 12%, rgba(86, 71, 60, 1) 28%, rgba(77, 64, 53, 1) 100%);
  border-radius: 12px 12px 0 0;
  margin-left: 10px;
  box-sizing: border-box;
  padding: 3px 3px 0 3px;
}

#workskin .quiz-top-dots {
  width: 100%;
  height: 100%;
  border: 3px dotted #ffebb2;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f7e6ad;
  font-family: 'Georgia', serif;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

#workskin .quiz-mid {
  width: 100%;
  height: 80px;
  background: linear-gradient(230deg,rgba(77, 64, 53, 1) 0%, rgba(86, 72, 60, 1) 14%, rgba(143, 123, 107, 1) 26%, rgba(142, 122, 106, 1) 34%, rgba(82, 68, 57, 1) 48%, rgba(77, 64, 53, 1) 100%);
  border-radius: 14px;
  box-sizing: border-box;
  padding: 4px;
}

#workskin .quiz-mid-dots {
  width: 100%;
  height: 100%;
  border: 3px dotted #ffebb2;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ebd397;
  font-family: 'Impact', 'Trebuchet MS', sans-serif;
  font-size: 3em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#workskin .quiz-bot {
  width: 140px;
  height: 28px;
  background: linear-gradient(230deg, rgba(86, 72, 60, 1) 0%, rgba(143, 123, 107, 1) 14%, rgba(142, 122, 106, 1) 26%, rgba(86, 71, 60, 1) 55%, rgba(77, 64, 53, 1) 100%);
  border-radius: 0 0 12px 12px;
  margin-left: auto;
  margin-right: 10px;
  box-sizing: border-box;
  padding: 0 3px 3px 3px;
}

#workskin .quiz-bot-dots {
  width: 100%;
  height: 100%;
  border: 3px dotted #ffebb2;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f7e6ad;
  font-family: 'Brush Script MT', 'Cursive', serif;
  font-size: 0.9em;
  font-style: italic;
  font-weight: bold;
}

HTML


<div class="quiz-badge"><div class="quiz-top"><div class="quiz-top-dots">

<p>The Tuesday</p></div></div><div class="quiz-mid"><div class="quiz-mid-dots">

<p>QUIZ SHOW</p></div></div><div class="quiz-bot"><div class="quiz-bot-dots">

<p>with Brown</p>

</div></div></div>

Bruan's angry! speech bubble

It's your turn to answer.

Code

CSS


#workskin .braunevil-bubble {
  position: relative;
  background-color: #8A8883;
  width: 80%;
  max-width: 380px;
  margin: 35px auto;
  display: block;
  box-sizing: border-box;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #000000;
  padding: 6px;
}

#workskin .braunevil-bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 14px;
  right: 14px;
  background-color: #8A8883;
  box-shadow: 0 -3px 0 0 #000000, 0 3px 0 0 #000000;
  z-index: 1;
}

#workskin .braunevil-bubble::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -6px;
  right: -6px;
  background-color: #8A8883;
  box-shadow: -3px 0 0 0 #000000, 3px 0 0 0 #000000;
  z-index: 1;
}

#workskin .braunevil-bubble-inner {
  position: relative;
  z-index: 5;
  background: linear-gradient(180deg,rgba(0, 0, 0, 1) 50%, rgba(110, 78, 77, 1) 50%);
  padding: 30px 20px;
  display: block;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 1.15em;
  color: #CC3131;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000,

    0 0 2px #CC3131,
    0 0 3px #511313,
    0 0 10px #000000;
}

#workskin .braunevil-bubble-inner::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 10px;
  right: 10px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 1) 50%, rgba(110, 78, 77, 1) 50%);
  border-radius: 4px;
  z-index: -1;
}

#workskin .braunevil-bubble-inner::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -4px;
  right: -4px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 1) 33%, rgba(110, 78, 77, 1) 100%);
  border-radius: 4px;
  z-index: -1;
}

HTML/span>


<p class="braunevil-bubble">

<span class="braunevil-bubble-inner">

It's your turn to answer.

</span></p>

Notes:

I'm tired, people 😔

Edit: After posting this I realized that Braun's antenna is not visible. I'll fix it later, probably 😩

Edit 2:It was a problem with mobile, fixed to make it compatible. 🙋

Actions

Kudos

Comments

Sorry, this work doesn't allow non-Archive users to comment. You can however still leave Kudos!

Archive of Our Own

Actions

Work Header