|
// This file contains 100 examples of text effects using console.log() |
|
|
|
// Basic styles |
|
console.log("%c 1. Basic Bold Text", "font-weight: bold;") |
|
console.log("%c 2. Italic Text", "font-style: italic;") |
|
console.log("%c 3. Underlined Text", "text-decoration: underline;") |
|
console.log("%c 4. Blue Text", "color: blue;") |
|
console.log( |
|
"%c 5. Red Background", |
|
"background-color: red; color: white; padding: 2px 8px;" |
|
) |
|
|
|
// Font size and family |
|
console.log("%c 6. Large Text", "font-size: 24px;") |
|
console.log("%c 7. Small Text", "font-size: 10px;") |
|
console.log("%c 8. Comic Sans MS Font", "font-family: 'Comic Sans MS';") |
|
|
|
// Background and border |
|
console.log( |
|
"%c 9. Yellow Background", |
|
"background-color: yellow; padding: 2px 8px;" |
|
) |
|
console.log("%c 10. Green Border", "border: 2px solid green; padding: 2px 8px;") |
|
|
|
// Padding and margin |
|
console.log( |
|
"%c 11. Padding 10px", |
|
"padding: 10px; background-color: lightblue;" |
|
) |
|
|
|
console.log("%c 12. Margin 5px", "margin: 5px; background-color: lightgreen;") |
|
|
|
// Text alignment |
|
console.log( |
|
"%c 13. Centered Text", |
|
"text-align: center; background-color: lightcoral; padding: 2px 0;" |
|
) |
|
|
|
// Text shadow |
|
console.log("%c 14. Text with Shadow", "text-shadow: 2px 2px 4px #000000;") |
|
|
|
// Gradient text |
|
console.log( |
|
"%c 15. Gradient Text", |
|
"font-size: 24px; background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; color: transparent;" |
|
) |
|
|
|
// Box shadow |
|
console.log( |
|
"%c 16. Box with Shadow", |
|
"box-shadow: 5px 5px 5px #888888; padding: 10px;" |
|
) |
|
|
|
// Rounded corners |
|
console.log( |
|
"%c 17. Rounded Box", |
|
"border-radius: 10px; padding: 5px; background-color: lightgray;" |
|
) |
|
|
|
// Multiple styles |
|
console.log( |
|
"%c 18. Multiple Styles", |
|
"font-size: 18px; font-weight: bold; color: #4CAF50; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);" |
|
) |
|
|
|
// Text transform |
|
console.log("%c 19. Uppercase Text", "text-transform: uppercase;") |
|
|
|
// Opacity |
|
console.log("%c 20. Transparent Text", "opacity: 0.6;") |
|
|
|
// Rainbow effect |
|
console.log( |
|
"%c 21. Rainbow Text", |
|
"font-size: 24px; background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; color: transparent;" |
|
) |
|
|
|
// Blinking text (not supported in all browsers) |
|
console.log( |
|
"%c 22. Blinking Text", |
|
"animation: blink-animation 1s infinite; @keyframes blink-animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }" |
|
) |
|
|
|
// Code blocks |
|
console.log( |
|
"%c 23. Code Block", |
|
"font-family: 'Courier New', Courier, monospace; font-size: 14px; background-color: #f0f0f0; padding: 5px;" |
|
) |
|
|
|
// Gradient background |
|
console.log( |
|
"%c 24. Gradient Background", |
|
"background: linear-gradient(to right, #ff9966, #ff5e62); padding: 10px; color: white; font-size: 18px; border-radius: 0.5rem;" |
|
) |
|
|
|
// Transparent background |
|
console.log( |
|
"%c 25. Transparent Background", |
|
"background-color: rgba(0, 0, 255, 0.2); padding: 5px;" |
|
) |
|
|
|
// Glowing text effect |
|
console.log( |
|
"%c 26. Glowing Text", |
|
"text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00;" |
|
) |
|
|
|
// Neon text effect |
|
console.log( |
|
"%c 27. Neon Text", |
|
"color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff00de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de;" |
|
) |
|
|
|
// 3D text effect |
|
console.log( |
|
"%c 28. 3D Text", |
|
"text-shadow: 1px 1px 2px #333, 0 0 25px #00ff00, 0 0 5px #fff; font-size: 24px;" |
|
) |
|
|
|
// Animated underline |
|
console.log( |
|
"%c 29. Animated Underline", |
|
"background-image: linear-gradient(0deg, #000, #000), linear-gradient(0deg, #000, #000); background-position: 0 100%, 0 100%; background-size: 0 2px, 100% 2px; background-repeat: no-repeat; transition: background-size 0.3s;" |
|
) |
|
|
|
// Dark mode text |
|
console.log( |
|
"%c 30. Dark Mode Text", |
|
"color: white; background-color: #333; padding: 5px;" |
|
) |
|
|
|
// Hover effect |
|
console.log( |
|
"%c 31. Hover Effect", |
|
"transition: transform 0.3s; &:hover { transform: scale(1.1); }" |
|
) |
|
|
|
// CSS grid text |
|
console.log( |
|
"%c 32. CSS Grid Text", |
|
"display: inline-grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; background-color: lightblue; padding: 5px;" |
|
) |
|
|
|
// Text animation |
|
console.log( |
|
"%c 33. Text Animation", |
|
"animation: slidein 3s ease-in-out infinite; @keyframes slidein { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }" |
|
) |
|
|
|
// Star Wars opening crawl effect |
|
console.log( |
|
"%c 34. Star Wars Crawl", |
|
"font-family: 'Star Jedi', sans-serif; font-size: 18px; white-space: pre-line; color: yellow; text-align: justify; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffbf00, 0 0 30px #ff8000, 0 0 40px #ff4000, 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000;" |
|
) |
|
|
|
// Matrix digital rain effect |
|
console.log( |
|
"%c 35. Matrix Digital Rain", |
|
"font-family: 'Courier New', Courier, monospace; font-size: 14px; color: #0f0; line-height: 1; white-space: pre-wrap; position: absolute; left: 0; top: 0; z-index: 1; animation: animate 10s linear infinite; @keyframes animate { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }" |
|
) |
|
|
|
// Emoji text |
|
console.log("%c 36. Emoji Text 😊🎉", "font-size: 24px;") |
|
|
|
// ASCII art |
|
console.log( |
|
`%c |
|
37. ASCII Art |
|
/$$$$$$$ /$$ /$$ |
|
| $$__ $$|__/ | $$ |
|
| $$ \\ $$ /$$ /$$$$$$$| $$$$$$$ |
|
| $$ | $$| $$ /$$_____/| $$__ $$ |
|
| $$ | $$| $$| $$ | $$ \\ $$ |
|
| $$ | $$| $$| $$$$$$$| $$ | $$ |
|
|__/ |__/|__/ \\_______/|__/ |__/ |
|
|
|
|
|
|
|
/$$ /$$ /$$ /$$ /$$ |
|
| $$$ /$$$|__/| $$| $$ |
|
| $$$$ /$$$$ /$$| $$| $$ |
|
| $$ $$/$$ $$| $$| $$| $$ |
|
| $$ $$$| $$| $$| $$| $$ |
|
| $$\\ $ | $$| $$| $$| $$ |
|
| $$ \\/ | $$| $$| $$| $$$$$$$$ |
|
|__/ |__/|__/|__/|________/ |
|
|
|
`, |
|
"font-family: monospace; font-size: 14px;" |
|
) |
|
|
|
// 3D box with text |
|
console.log( |
|
"%c 38. 3D Box with Text", |
|
"text-shadow: 1px 1px 2px #333, 0 0 25px #00ff00, 0 0 5px #fff; font-size: 24px; background-color: black; padding: 20px; transform: perspective(400px) rotateX(25deg);" |
|
) |
|
|
|
// Zebra stripes effect |
|
console.log( |
|
"%c 39. Zebra Stripes Text", |
|
"background: repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px); color: white; padding: 10px;" |
|
) |
|
|
|
// Text with border |
|
console.log( |
|
"%c 40. Text with Border", |
|
"color: red; font-size: 24px; -webkit-text-stroke: 1px black;" |
|
) |
|
|
|
// Rainbow border |
|
console.log( |
|
"%c 41. Rainbow Border", |
|
"font-size: 24px; color: white; background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); padding: 5px; border: 3px solid transparent; -webkit-background-clip: text;" |
|
) |
|
|
|
// Retro text |
|
console.log( |
|
"%c 42. Retro Text", |
|
"font-size: 24px; color: purple; text-shadow: 3px 3px 0px #000, 0px 0px 5px rgba(255, 255, 255, 0.5);" |
|
) |
|
|
|
// Typewriter effect |
|
console.log( |
|
"%c 43. Typewriter Effect", |
|
"font-family: monospace; overflow: hidden; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: typing 1s steps(10, end), blink-caret .75s step-end infinite; @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: orange; } }" |
|
) |
|
|
|
// Dinosaur ASCII art |
|
console.log( |
|
`%c |
|
45. Dinosaur ASCII Art |
|
__ |
|
/ _) |
|
_.----._/ / |
|
/ / |
|
__/ ( | ( | |
|
/__.-'|_|--|_| |
|
`, |
|
"font-family: monospace;" |
|
) |
|
|
|
// Gradient text with neon glow |
|
console.log( |
|
"%c 46. Gradient Text with Neon Glow", |
|
"font-size: 24px; background: linear-gradient(to right, #ffcc00, #ff00cc); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px #00ffcc, 0 0 20px #ff00cc, 0 0 30px #ff00cc;" |
|
) |
|
|
|
// CSS variables and animation |
|
console.log( |
|
"%c 47. CSS Variables and Animation", |
|
"font-size: 24px; color: var(--primary-color); background-color: var(--secondary-color); padding: 10px; --primary-color: blue; --secondary-color: lightblue; animation: color-change 2s linear infinite; @keyframes color-change { 0% { --primary-color: blue; --secondary-color: lightblue; } 50% { --primary-color: red; --secondary-color: yellow; } 100% { --primary-color: blue; --secondary-color: lightblue; } }" |
|
) |
|
|
|
// Flip text effect |
|
console.log( |
|
"%c 48. Flip Text Effect", |
|
"font-size: 24px; background-color: black; color: white; transform: scaleX(-1); display: inline-block; padding: 5px;" |
|
) |
|
|
|
// Glitch effect |
|
console.log( |
|
"%c 49. Glitch Text Effect", |
|
"font-size: 24px; background: linear-gradient(to right, #ffcc00, #ff00cc); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px #00ffcc, 0 0 20px #ff00cc, 0 0 30px #ff00cc; animation: glitch 1s linear infinite; @keyframes glitch { 0% { transform: translate(0); } 25% { transform: translate(-5px, 5px); } 50% { transform: translate(5px, -5px); } 75% { transform: translate(-5px, 5px); } 100% { transform: translate(0); } }" |
|
) |
|
|
|
// ASCII heart |
|
console.log( |
|
`%c |
|
50. ASCII Heart |
|
/\\ /\\ |
|
/ \\/ \\ |
|
\\ / |
|
\\ / |
|
\\ / |
|
\\/ |
|
`, |
|
"font-family: monospace;" |
|
) |
|
|
|
// 8-bit text |
|
console.log( |
|
"%c 51. 8-bit Text", |
|
"font-size: 24px; letter-spacing: 3px; font-family: 'Press Start 2P', cursive; color: #00FF00; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;" |
|
) |
|
|
|
// Water reflection effect |
|
console.log( |
|
"%c 52. Water Reflection Text Effect", |
|
"font-size: 24px; background: linear-gradient(to right, #00c6ff, #0072ff); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);" |
|
) |
|
|
|
// SVG text effect |
|
console.log( |
|
"%c 53. SVG Text Effect", |
|
"font-size: 24px; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%2050%22%3E%3Ctext%20x=%2210%22%20y=%2235%22%20font-family=%22Verdana,%20sans-serif%22%20font-size=%2230%22%20fill=%22orange%22%3EHello%3C/text%3E%3C/svg%3E'); -webkit-background-clip: text; color: transparent;" |
|
) |
|
|
|
// 3D shadow text |
|
console.log( |
|
"%c 54. 3D Shadow Text Effect", |
|
"font-size: 24px; color: #fff; text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 #000, 6px 6px 0 #000, 7px 7px 0 #000, 8px 8px 0 #000, 9px 9px 0 #000, 10px 10px 0 #000, 11px 11px 0 #000, 12px 12px 0 #000, 13px 13px 0 #000, 14px 14px 0 #000, 15px 15px 0 #000, 16px 16px 0 #000, 17px 17px 0 #000, 18px 18px 0 #000, 19px 19px 0 #000, 20px 20px 0 #000;" |
|
) |
|
|
|
// Pixel art text |
|
console.log( |
|
"%c 55. Pixel Art Text Effect", |
|
"font-size: 24px; font-family: 'Press Start 2P', cursive;" |
|
) |
|
|
|
// ASCII fire |
|
console.log( |
|
`%c |
|
56. ASCII Fire |
|
/\\ /\\ |
|
/ ^ ^ \\ |
|
/__*__\\ |
|
|| |
|
`, |
|
"font-family: monospace;" |
|
) |
|
|
|
// Bold text with shadow |
|
console.log( |
|
"%c 57. Bold Text with Shadow", |
|
"font-weight: bold; text-shadow: 2px 2px 5px #333;" |
|
) |
|
|
|
// Text outline |
|
console.log( |
|
"%c 58. Text Outline", |
|
"font-size: 24px; color: #fff; -webkit-text-stroke: 1px black;" |
|
) |
|
|
|
// Ice effect |
|
console.log( |
|
"%c 59. Ice Effect", |
|
"font-size: 24px; color: lightblue; text-shadow: 1px 1px 2px #99ccff, 0 0 25px #ccffff, 0 0 5px #ffffff;" |
|
) |
|
|
|
// Glowing border |
|
console.log( |
|
"%c 60. Glowing Border", |
|
"font-size: 24px; color: white; background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; border: 3px solid transparent; border-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); border-image-slice: 1; padding: 5px;" |
|
) |
|
|
|
// Harry Potter text effect |
|
console.log( |
|
"%c 61. Harry Potter Text Effect", |
|
"font-size: 24px; font-family: 'Harry P'; color: #ffffff; text-shadow: 1px 1px 1px #000000;" |
|
) |
|
|
|
// Handwriting text effect |
|
console.log( |
|
"%c 62. Handwriting Text Effect", |
|
"font-size: 24px; font-family: 'Handlee', cursive;" |
|
) |
|
|
|
// Transparent text with blur |
|
console.log( |
|
"%c 63. Transparent Text with Blur", |
|
"font-size: 24px; color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.5);" |
|
) |
|
|
|
// Abstract text art |
|
console.log( |
|
`%c |
|
64. Abstract Text Art |
|
/\\_/\\ |
|
( o.o ) |
|
> ^ < |
|
`, |
|
"font-family: monospace;" |
|
) |
|
|
|
// Emoji background |
|
console.log( |
|
"%c 65. Emoji Background", |
|
"background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M11%2014h2v2h-2v-2zm-2-5h6v6h-6v-6z%22/%3E%3C/svg%3E'); padding: 20px;" |
|
) |
|
|
|
// Stroke text effect |
|
console.log( |
|
"%c 66. Stroke Text Effect", |
|
"font-size: 24px; -webkit-text-stroke: 2px black; color: white;" |
|
) |
|
|
|
// Rotated text |
|
console.log("%c 67. Rotated Text", "font-size: 24px; transform: rotate(30deg);") |
|
|
|
// Flashing text effect |
|
console.log( |
|
"%c 68. Flashing Text Effect", |
|
"font-size: 24px; animation: flash 1s infinite; @keyframes flash { 0%, 49.99%, 100% { opacity: 1; } 50%, 99.99% { opacity: 0; } }" |
|
) |
|
|
|
// Rainbow outline |
|
console.log( |
|
"%c 69. Rainbow Outline", |
|
"font-size: 24px; color: white; -webkit-text-stroke: 1px red; text-shadow: 0 0 5px orange, 0 0 10px yellow, 0 0 15px green, 0 0 20px blue, 0 0 25px indigo, 0 0 30px violet;" |
|
) |
|
|
|
// Gradient outline |
|
console.log( |
|
"%c 70. Gradient Outline", |
|
"font-size: 24px; color: white; -webkit-text-stroke: 1px black; background: linear-gradient(to right, #ffcc00, #ff00cc); -webkit-background-clip: text;" |
|
) |
|
|
|
// Pulsating text effect |
|
console.log( |
|
"%c 71. Pulsating Text Effect", |
|
"font-size: 24px; animation: pulse 1s infinite; @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }" |
|
) |
|
|
|
// Kinetic typography |
|
console.log( |
|
"%c 72. Kinetic Typography", |
|
"font-size: 24px; font-family: 'Montserrat', sans-serif; white-space: nowrap; overflow: hidden; border-right: .15em solid orange; animation: typing 2s steps(40, end), blink-caret 0.75s step-end infinite; @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } }" |
|
) |
|
|
|
// Underwater text effect |
|
console.log( |
|
"%c 73. Underwater Text Effect", |
|
"font-size: 24px; color: #00e0ff; text-shadow: 0 0 5px #00e0ff, 0 0 10px #00e0ff, 0 0 15px #00e0ff, 0 0 20px #00e0ff, 0 0 25px #00e0ff, 0 0 30px #00e0ff, 0 0 35px #00e0ff;" |
|
) |
|
|
|
// Neon glow effect |
|
console.log( |
|
"%c 74. Neon Glow Effect", |
|
"font-size: 24px; color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0f, 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff, 0 0 50px #0ff;" |
|
) |
|
|
|
// Hacker text effect |
|
console.log( |
|
"%c 75. Hacker Text Effect", |
|
"font-size: 24px; font-family: 'Courier New', Courier, monospace; background-color: black; color: green; padding: 10px;" |
|
) |
|
|
|
// Bokeh text effect |
|
console.log( |
|
"%c 76. Bokeh Text Effect", |
|
"font-size: 24px; background: url(https://i.imgur.com/MgBct4W.jpg) repeat; -webkit-background-clip: text; color: transparent;" |
|
) |
|
|
|
// Dripping text effect |
|
console.log( |
|
"%c 77. Dripping Text Effect", |
|
"font-size: 24px; color: yellow; text-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 60px yellow, 0 0 70px yellow;" |
|
) |
|
|
|
// Heartbeat pulse effect |
|
console.log( |
|
"%c 78. Heartbeat Pulse Effect", |
|
"font-size: 24px; animation: heartbeat 1s infinite; @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }" |
|
) |
|
|
|
// Sparkling text effect |
|
console.log( |
|
"%c 79. Sparkling Text Effect", |
|
"font-size: 24px; color: transparent; background-image: url('https://media.giphy.com/media/YMzJpI5S0YiUO/giphy.gif'); -webkit-background-clip: text; background-clip: text; animation: sparkle 2s linear infinite; @keyframes sparkle { 0%, 100% { background-position: -100% -100%; } 50% { background-position: 100% 100%; } }" |
|
) |
|
|
|
// Snowy text effect |
|
console.log( |
|
"%c 80. Snowy Text Effect", |
|
"font-size: 24px; color: transparent; background-image: url('https://media.giphy.com/media/gnLyHi9c17AYc/giphy.gif'); -webkit-background-clip: text; background-clip: text; animation: snow 2s linear infinite; @keyframes snow { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }" |
|
) |
|
|
|
// Matrix digital rain effect |
|
console.log( |
|
"%c 81. Matrix Digital Rain Effect", |
|
"font-size: 24px; color: green; font-family: 'Consolas', monospace; white-space: pre; overflow: hidden;" |
|
) |
|
|
|
// Transparent background with border |
|
console.log( |
|
"%c 82. Transparent Background with Border", |
|
"font-size: 24px; color: #fff; background-color: rgba(0,0,0,0.5); padding: 10px; border: 2px dashed #fff;" |
|
) |
|
|
|
// Alien text effect |
|
console.log( |
|
"%c 83. Alien Text Effect", |
|
"font-size: 24px; font-family: 'Coda', cursive; color: green; text-shadow: 0 0 10px rgba(0,255,0,0.5), 0 0 20px rgba(0,255,0,0.5), 0 0 30px rgba(0,255,0,0.5), 0 0 40px rgba(0,255,0,0.5);" |
|
) |
|
|
|
// Cracked text effect |
|
console.log( |
|
"%c 84. Cracked Text Effect", |
|
"font-size: 24px; font-family: 'Impact', sans-serif; color: #f00; text-shadow: 0 0 5px #f00, 0 0 10px #f00, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;" |
|
) |
|
|
|
// Cyberpunk text effect |
|
console.log( |
|
"%c 85. Cyberpunk Text Effect", |
|
"font-size: 24px; font-family: 'Orbitron', sans-serif; color: #0f0; text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0, 0 0 25px #0f0, 0 0 30px #0f0, 0 0 35px #0f0;" |
|
) |
|
|
|
// Rustic text effect |
|
console.log( |
|
"%c 86. Rustic Text Effect", |
|
"font-size: 24px; font-family: 'Marck Script', cursive; color: #964B00; text-shadow: 1px 1px 2px #000;" |
|
) |
|
|
|
// Ink bleed text effect |
|
console.log( |
|
"%c 87. Ink Bleed Text Effect", |
|
"font-size: 24px; font-family: 'Fascinate', cursive; color: #c71585; text-shadow: 1px 1px 2px #000;" |
|
) |
|
|
|
// Mosaic text effect |
|
console.log( |
|
"%c 88. Mosaic Text Effect", |
|
"font-size: 24px; font-family: 'VT323', monospace; color: #00ff00; text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 #000, 6px 6px 0 #000, 7px 7px 0 #000, 8px 8px 0 #000, 9px 9px 0 #000, 10px 10px 0 #000, 11px 11px 0 #000, 12px 12px 0 #000, 13px 13px 0 #000, 14px 14px 0 #000, 15px 15px 0 #000, 16px 16px 0 #000, 17px 17px 0 #000, 18px 18px 0 #000, 19px 19px 0 #000, 20px 20px 0 #000;" |
|
) |
|
|
|
// Skywriting text effect |
|
console.log( |
|
"%c 89. Skywriting Text Effect", |
|
"font-size: 24px; font-family: 'Permanent Marker', cursive; color: #4682b4; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);" |
|
) |
|
|
|
// Subtle neon text effect |
|
console.log( |
|
"%c 90. Subtle Neon Text Effect", |
|
"font-size: 24px; color: #e0f3ff; text-shadow: 1px 1px 2px #000, 0 0 25px #00bfff, 0 0 5px #00bfff;" |
|
) |
|
|
|
// Pixelated text effect |
|
console.log( |
|
"%c 91. Pixelated Text Effect", |
|
"font-size: 24px; font-family: 'Press Start 2P', cursive;" |
|
) |
|
|
|
// Iceberg text effect |
|
console.log( |
|
"%c 92. Iceberg Text Effect", |
|
"font-size: 24px; color: #ADD8E6; text-shadow: 1px 1px 2px #000;" |
|
) |
|
|
|
// Lava text effect |
|
console.log( |
|
"%c 93. Lava Text Effect", |
|
"font-size: 24px; color: #FF4500; text-shadow: 1px 1px 2px #000;" |
|
) |
|
|
|
// Night sky text effect |
|
console.log( |
|
"%c 94. Night Sky Text Effect", |
|
"font-size: 24px; color: #000080; text-shadow: 1px 1px 2px #FFFFFF;" |
|
) |
|
|
|
// Vintage text effect |
|
console.log( |
|
"%c 95. Vintage Text Effect", |
|
"font-size: 24px; color: #8B4513; text-shadow: 1px 1px 2px #000;" |
|
) |
|
|
|
// Pastel text effect |
|
console.log( |
|
"%c 96. Pastel Text Effect", |
|
"font-size: 24px; color: #FFDAB9; text-shadow: 1px 1px 2px #000;" |
|
) |
|
|
|
// Silhouette text effect |
|
console.log( |
|
"%c 97. Silhouette Text Effect", |
|
"font-size: 24px; color: #000; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);" |
|
) |
|
|
|
// Vaporwave text effect |
|
console.log( |
|
"%c 98. Vaporwave Text Effect", |
|
"font-size: 24px; font-family: 'Roboto', sans-serif; color: #FF69B4; text-shadow: 1px 1px 2px #000;" |
|
) |
|
|
|
// Comic book text effect |
|
console.log( |
|
"%c 99. Comic Book Text Effect", |
|
"font-size: 24px; font-family: 'Comic Sans MS', cursive; color: #FFD700; text-shadow: 1px 1px 2px #000;" |
|
) |
|
|
|
// Pop art text effect |
|
console.log( |
|
"%c 100. Pop Art Text Effect", |
|
"font-size: 24px; font-family: 'Anton', sans-serif; color: #FF4500; text-shadow: 1px 1px 2px #000;" |
|
) |