#Codevember 4 - CSS Text Effects

HTML
<div class="section"> <div class="card"> <div class="glasses">Codevember</div> </div> </div> <div class="section"> <div class="card"> <div class="long-shadow">Codevember</div> </div> </div> <div class="section"> <div class="card"> <div class="retro">Codevember</div> </div> </div> <div class="section"> <div class="card"> <div class="vintage">Codevember</div> </div> </div>
SCSS
body { display: flex; flex-direction: column; justify-contents: center; align-items: center; background-color: #e74c3c; } .card { width: 500px; height: 135px; background-color: #ffffe6; box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.65); margin: 25px; display: flex; justify-content: center; align-items: center; border-radius: 6px; } .glasses { font-family: 'Lobster', cursive; font-size: 90px; color: rgb(51, 51, 51); letter-spacing: 3px; text-shadow: -3px 0 1px rgb(30,242,241) , 3px 0 1px rgb(246,5,10) ; } .long-shadow { font-family: 'Oswald', sans-serif; font-size:80px; color: #F25F5C; text-shadow: 1px 1px 0 #70C1B3 , 2px 2px 0 #70C1B3 , 3px 3px 0 #70C1B3 , 4px 4px 0 #70C1B3 , 5px 5px 0 #70C1B3 , 6px 6px 0 #70C1B3 , 7px 7px 0 #70C1B3 , 8px 8px 0 #70C1B3 , 9px 9px 0 #70C1B3 , 10px 10px 0 #70C1B3 , 11px 11px 0 #70C1B3 , 12px 12px 0 #70C1B3 , 13px 13px 0 #70C1B3 , 14px 14px 0 #70C1B3 , 15px 15px 0 #70C1B3 , 16px 16px 0 #70C1B3 , 17px 17px 0 #70C1B3 , 18px 18px 0 #70C1B3 , 19px 19px 0 #70C1B3 , 20px 20px 0 #70C1B3 ; } .retro { font-family: 'Oswald', sans-serif; font-size: 66px; color: #663300; text-transform: uppercase; -o-text-overflow: clip; text-overflow: clip; letter-spacing: 10px; text-shadow: 2px 2px 0 #F07818 , 4px 4px 0 #ffcc00 , 6px 6px 0 rgb(112,112,112) ; } .vintage { font-family: 'Oswald', sans-serif; font-size: 80px; color: #990033; text-shadow: 4px 4px 0 #00ffff , 5px 5px 0 #b3b3b3 , 6px 6px 0 #b3b3b3 , 7px 7px 0 #b3b3b3 , 8px 8px 0 #b3b3b3 , 9px 9px 0 #b3b3b3 , 10px 10px 0 #b3b3b3 , 11px 11px 0 #b3b3b3 , 12px 12px 0 #b3b3b3 , 13px 13px 0 #b3b3b3 , 14px 14px 0 #b3b3b3 , 15px 15px 0 #b3b3b3 , 16px 16px 0 #b3b3b3 , 17px 17px 0 #b3b3b3 , 18px 18px 0 #b3b3b3 , 19px 19px 0 #b3b3b3 , 20px 20px 0 #b3b3b3 ; }
JAVASCRIPT
Expand for more options Login