This content originally appeared on DEV Community and was authored by Orange_Abstrakt
Headings, titles, subheadings etc tell the user about your website. They also take up a lot of the space. So naturally to attract more people and to make your website much more aesthetically beautiful and impressive you can style your text.
Now which style should you choose?
This totally depends on your likes and dislikes. Try a few and see which one goes best with your site. Now without any further ado lets see some simple yet amazing ways of styling your html text.
1) Gradient Text
Gradients add a certain feel to your website that really makes your site stand out. Now changing the background to a gradient is fairly simple and common knowledge. Text Gradients can be slightly trickier but they are totally worth it.
Once you have picked the font and set the size you can start coding your gradient text.
~The background property can be set to linear-gradient(color1, color2).
~Then we clip the gradient to the text. The “background-clip: text” is supported in all main browsers with the Webkit prefix, it allows a background image to be clipped by a text element.
~Finally you remove the text fill color by setting it to transparent.
2) LED-text
This gives the element an Led-like feel and really helps bring your site to life.
Set the size for your text and select a font. I usually use Brush Script mt for this style as it really adds to the LED theme. Once done set the color(white looks the best).
Now comes the interesting part. Using the text-shadow property we can very easily Make our LED text.
Now the text shadow takes in maximum 4 values. the first is the x-offset, second is the y-offset, 3rd is the blur radius and finally the color.
For this effect we want the shadow to be at the same position as the text therefore the first 2 values are 0px. Then we add a blur radius of 7px, 10px and 21px and set the color to white. This makes the center bright. Now we add a shadow of a color of our choice with larger blur radii.
That is all for today. Let me know if you want more text designs. This is my first post on this website so I wanted to keep it short and see the feedback.
This content originally appeared on DEV Community and was authored by Orange_Abstrakt
Orange_Abstrakt | Sciencx (2021-06-24T13:45:43+00:00) How To make your css text look impressive. Retrieved from https://www.scien.cx/2021/06/24/how-to-make-your-css-text-look-impressive/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.