Create 3D Text in CSS3 using text shadow | Techbirds
Add in body section in the html document.
3D
TEXT
3D
|
Add in style tag in Head section in the html document.
.text-effect{ color: #FFFFFF; font-family: Arial; font-size: 150px; font-weight: bold; margin: 50px auto; text-align: center; text-shadow: 0 1px 1px #DDDDDD, 0 2px 1px #D6D6D6, 0 3px 1px #CCCCCC, 0 4px 1px #C5C5C5, 0 5px 1px #C1C1C1, 0 6px 1px #BBBBBB, 0 7px 1px #777777, 0 8px 3px rgba(100, 100, 100, 0.4), 0 9px 5px rgba(100, 100, 100, 0.1), 0 10px 7px rgba(100, 100, 100, 0.15), 0 11px 9px rgba(100, 100, 100, 0.2), 0 12px 11px rgba(100, 100, 100, 0.25), 0 13px 15px rgba(100, 100, 100, 0.3); }
|
.text-effect{ color: #FFFFFF; font-family: Arial; font-size: 150px; font-weight: bold; margin: 50px auto; text-align: center; text-shadow: 0 1px 1px #DDDDDD, 0 2px 1px #D6D6D6, 0 3px 1px #CCCCCC, 0 4px 1px #C5C5C5, 0 5px 1px #C1C1C1, 0 6px 1px #BBBBBB, 0 7px 1px #777777, 0 8px 3px rgba(100, 100, 100, 0.4), 0 9px 5px rgba(100, 100, 100, 0.1), 0 10px 7px rgba(100, 100, 100, 0.15), 0 11px 9px rgba(100, 100, 100, 0.2), 0 12px 11px rgba(100, 100, 100, 0.25), 0 13px 15px rgba(100, 100, 100, 0.3); } |
1,476 total views, 1 views today
Share this On
