rernanded
Erfahrenes Mitglied
Hi, hier mein bisheriger Code:
Ziel ist es das Wort HEALTH, oben, kann auch ein längeres Wort werden, sowie die Zahlenreihe unten, kann auch länger werden, zu "curven".
Oben wie ein schollender Mund, unten wie ein lächelnder Mund.
Insgesamt soll der Eindruck eines Stempels/Siegels entstehen.
Habe schon Versuche mit svg hinter mir, doch alles vergebens.
Meine Lösung für den curved Text (oben) ist "mühselig" vor allem wenn der Text etwas länger ist und ich das gesamte Werk verkleinere. Dann müssten immer alle Werte für jeden char neu angepasst werden.
MONI
HTML:
<style>
.seal {
position: relative;
width: 600px;
height: 600px;
border: 10px solid #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.inner-circle {
position: absolute;
width: 400px;
height: 400px;
border: 10px solid #000;
border-radius: 50%;
}
.text {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: Arial, sans-serif;
font-size: 30px;
color: #000;
}
.top-text {
position: absolute;
top: 10%;
transform: translateY(-50%);
white-space: nowrap;
text-transform: uppercase;
font-weight: bold;
}
.middle-text{
z-index: 1000;
position: absolute;
top: 40%;
width: 440px;
height: 100px;
border: solid 10px #fff;
background: orange;
white-space: nowrap;
text-transform: uppercase;
font-weight: bold;
-webkit-transform: rotate(-10deg);
}
.bottom-text {
position: absolute;
bottom: 10%;
transform: translateY(50%);
white-space: nowrap;
text-transform: uppercase;
font-weight: bold;
}
.char1 {
-webkit-transform: translate(0px, 10px) rotate(-20deg);
}
.char2 {
-webkit-transform: translate(0px, 5px) rotate(-10deg);
}
.char3 {
-webkit-transform: rotate(0deg);
}
.char4 {
-webkit-transform: rotate(0deg);
}
.char5 {
-webkit-transform: translate(0px, 5px) rotate(10deg);
}
.char6 {
-webkit-transform: translate(0px, 10px) rotate(20deg);
}
span {
display: inline-block;
margin: 1px;
}
</style>
<div class="seal">
<div class="inner-circle"></div>
<div class="text top-text"><span class="char1">H</span><span class="char2">E</span><span class="char3">A</span><span class="char4">L</span><span class="char5">T</span><span class="char6">H</span></div>
<div class="text middle-text">WOW</div>
<div class="text bottom-text">0987654321</div>
</div>Ziel ist es das Wort HEALTH, oben, kann auch ein längeres Wort werden, sowie die Zahlenreihe unten, kann auch länger werden, zu "curven".
Oben wie ein schollender Mund, unten wie ein lächelnder Mund.
Insgesamt soll der Eindruck eines Stempels/Siegels entstehen.
Habe schon Versuche mit svg hinter mir, doch alles vergebens.
Meine Lösung für den curved Text (oben) ist "mühselig" vor allem wenn der Text etwas länger ist und ich das gesamte Werk verkleinere. Dann müssten immer alle Werte für jeden char neu angepasst werden.
MONI
