Result
Code
Details
HTML
CSS
< div class = " console " >
< div class = " name " >ROBROBROBROBROBROB</ div >
< div class = " name " >ROBROBROBROBROBROB</ div >
< div class = " name " >ROBROBROBROBROBROB</ div >
</ div >
@font-face {
font-family : LimeLight;
src : url ( " Limelight-Regular.ttf " );
font-display : swap ;
}
* ,
* :: before ,
* :: after {
box-sizing : border-box ;
}
: root {
--cols : 3 ;
--animation-len : 12 s ;
}
@media screen and ( min-width : 800 px ) {
: root {
--animation-len : 16 s ;
}
}
body {
width : 100 dvw ;
margin : 0 ;
}
.console {
width : 100 % ;
height : 100 dvh ;
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr );
background-color : hsl ( 140 , 50 % , 10 % );
overflow : hidden ;
cursor : default ;
}
.name {
color : transparent ;
-webkit-text-stroke-color : hsl ( 140 , 100 % , 70 % );
-webkit-text-stroke-width : 2 px ;
font-family : Limelight, sans-serif ;
font-size : calc ( 90 dvw / var (--cols));
line-height : 1 ;
text-transform : uppercase ;
writing-mode : vertical-lr ;
text-orientation : mixed ;
filter : drop-shadow ( 0 0 2 px hsl ( 140 , 100 % , 70 % ));
}
.name : nth-of-type ( even ) {
animation : scroll-up;
animation-duration : var (--animation-len);
animation-iteration-count : infinite ;
animation-timing-function : linear ;
}
.name : nth-of-type ( odd ) {
transform : rotate ( -180 deg ) translateY ( 33.33 % );
animation : scroll-down;
animation-duration : var (--animation-len);
animation-iteration-count : infinite ;
animation-fill-mode : forwards ;
animation-timing-function : linear ;
}
@keyframes scroll-up {
to {
transform : translateY ( -33.33 % );
}
}
@keyframes scroll-down {
to {
transform : rotate ( -180 deg ) translateY ( 0 );
}
}
I wanted to play with the idea of showcasing my name within a console. I went for columns of scrolling text similar to what the HTML element marquee
did, but hopefully in a tasteful way!
Collection
Part of the
Artifice collection.