ADVERTISEMENT
Best way to show the text in beautiful shadow and with splitted text. Split text created using HTML (Pug) and CSS (Stylus). Clean code and can be used as a logo too 🙂
Code developed by naomochi and Created on November 27, 2019, Updated on November 27, 2019.
Find the demo below
See the Pen shadowbringers by naomochi (@naomochi) on CodePen.
Find the code below
HTML
Pug
.wrap
.logo.i: span.inner: span.gr W3T
.logo.ii: span.inner: span.gr TWEAKSView Compiled HTML
<div class="wrap">
<div class="logo i"><span class="inner"><span class="gr">W3T</span></span></div>
<div class="logo ii"><span class="inner"><span class="gr">TWEAKS</span></span></div>
</div>CSS
Stylus
@import url('https://fonts.googleapis.com/css?family=Average&display=swap');
body
font-size 0
font-family 'Average', serif
background #222
.wrap
display flex
align-items center
justify-content center
height 100vh
.logo
font-size 7vw
letter-spacing -0.05em
overflow hidden
height 5em
line-height 5em
transform rotate(30deg)
position relative
.i
display inline-block
z-index 2
.inner
margin-right -0.25em
.gr
background linear-gradient(90deg,rgba(160, 130, 80, 1) 0%,rgba(200, 170, 100, 1) 80%)
-webkit-text-fill-color transparent
-webkit-background-clip text
.ii
display inline-block
margin-left .55em
margin-top .2em
.inner
margin 0 -0.4em 0 -0.6em
.gr
background linear-gradient(90deg,rgba(200, 170, 100, 1) 0%,rgba(240, 210, 130, 1) 20%,rgba(160, 130, 80, 1) 100%)
-webkit-text-fill-color transparent
-webkit-background-clip text
.inner
display block
transform rotate(-30deg)
color #f8db89View Compiled CSS
@import url("https://fonts.googleapis.com/css?family=Average&display=swap");
body {
font-size: 0;
font-family: 'Average', serif;
background: #222;
}
.wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo {
font-size: 7vw;
letter-spacing: -0.05em;
overflow: hidden;
height: 5em;
line-height: 5em;
transform: rotate(30deg);
position: relative;
}
.i {
display: inline-block;
z-index: 2;
}
.i .inner {
margin-right: -0.25em;
}
.i .gr {
background: linear-gradient(90deg, #a08250 0%, #c8aa64 80%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.ii {
display: inline-block;
margin-left: 0.55em;
margin-top: 0.2em;
}
.ii .inner {
margin: 0 -0.4em 0 -0.6em;
}
.ii .gr {
background: linear-gradient(90deg, #c8aa64 0%, #f0d282 20%, #a08250 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.inner {
display: block;
transform: rotate(-30deg);
color: #f8db89;
}
