How we can create different types of stylish text effects using CSS? Solution: CSS Text Effects With Multiple Styles, 8 Different Text Style Effects.
Previously I have shared many types of text effects like: text fill effect, text-shadow effect, text mask effect, etc. But this post about text styling with many effects like 3D, Gradient, etc. This is very important to know the basic styling of texts using HTML & CSS. So look at these some basic style effects using pure CSS.
Today you will learn to create 8 different types of text styles effects. Mostly all effects based on shadow & others are based on color, gradient, etc. These are very easy to create, you will understand instantly after seeing the codes. First, know all the effects I am sharing in this post:
- Neon Text Effect
- Letterpress Effect
- Text Stroke Effect
- 3D Text Effect
- Embossed Effect
- Knockout Text Effect
- Striped Effect
So, Today I am sharing CSS Text Effects With Multiple Styles, sharing pure and clean CSS and HTML codes for better understanding. I know these all are the basic things, but one of my visitors asks me for this that’s why I am sharing this. Maybe this will be useful for you if you are a web designer.
If you are thinking now how these text effects actually are, then see the preview given below.
Preview Of 8 Different Texts Style Effects
See this video preview to getting an idea of how these effects look like.
Now you can see this visually. If you like these, then get the source code of its.
You May Also Like:Â
CSS Text Effects With Multiple Styles Source Code
Before sharing source code, let’s talk about this. First I have created separate divs for each effect, in some styles I put heading tags for different styling. I have used some google fonts to creating effects more amazing and attractive. Some of the effects are completely based on CSS Shadow like 3D effect, embossed.
For creating the neon effect I have used border shadow along with text-shadow. In the knockout effect, I have used an image as a mask. For the striped effect, I have used a gradient, background-clip (info), & text-fill properties. Maybe striped effect will work only chrome & firefox browsers.
That is the whole concept, there are all basic things. You will understand easily after getting the codes. For creating this, you have to create only 2 files. One for HTML, & one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html> <head> <title>CSS Text Effects | Webdevtrick.com</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Poiret+One|Alfa+Slab+One|Monoton" rel="stylesheet"> </head> <body> <div id="container"> <div class="neon">Neon Text</div> <div class="letterpress"><h1>Letterpress</h1></div> <div class="stroke">Text Stroke</div> <div class="gradient"><h2>Gradient</h2></div> <div class="threed">3D Text</div> <div class="embossed">Embossed</div> <div class="knock"><h4>Knockout</h4></div> <div class="striped"><h3>STRIPED</h3></div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
/** Code By Webdevtrick ( https://webdevtrick.com ) **/ body { background-color: #7c7778; margin: 0 auto; } #container { margin: 0 auto; padding-top: 40px; position: relative; } .neon, .letterpress, .stroke, .gradient, .threed, .embossed, .striped, .knock { width: 400px; height: 80px; margin: 0 auto; text-align: center; } .neon { padding: 10px; color: pink; font: 60px 'Poiret One', cursive; box-shadow: inset 0px 0px 10px #ffbbbb, 0px 0px 10px #e60023; text-shadow: 0px 0px 10px #e60023, 2px 2px 4px #212121; border: 2px solid pink; border-radius: 15px; } h1 { font: bold 50px arial, sans-serif; background-color: black; color: transparent; text-shadow: 0px 2px 3px rgba(255, 255, 255, .3); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } .letterpress { padding-top 10px; padding-bottom: 10px; } .stroke { font: 40px "Alfa Slab One", cursive; color: white; -webkit-text-stroke: 2px black; text-shadow: 2px 0px 0px rgba(0, 0, 0, 1); } h2 { font: 50px "Monoton", cursive; background: -webkit-linear-gradient(80deg, #fff, #e60023); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 0px; } .threed { margin-top: 20px; font: bold 50px arial, sans-serif; color: #ccc; text-shadow: 4px 3px 0px #333, 3px 0px 0px #333, 2px 0px 0px #333, 1px 0px 0px #333, 3px 0px 15px rgba(0,0,0, .8), 0px 4px 0px #444, 0px 3px 0px #444, 0px 2px 0px #444, 0px 1px 0px #444; } .embossed { text-shadow: -1px -1px 0px rgba(255,255,255,.6), 1px 1px 0px rgba(0,0,0,0.8); color: #555; opacity: .9; font: 40px "Alfa Slab One", cursive; letter-spacing: 3px; } .striped { font: bold 50px arial, sans-serif; background: repeating-linear-gradient( 45deg, #fff, #fff 5px, #ddd 5px, #ddd 10px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: -50px; } h4 { font: 40px "Monoton", cursive; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-image: url("https://images.pexels.com/photos/990824/pexels-photo-990824.jpeg?cs=srgb&dl=art-artistic-attractive-990824.jpg"); } .knock { margin-top: -40px; } |
That’s It. Now you have successfully created CSS Text Effects With Multiple Styles. In other words, 8 Different Text Style Effects. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
