Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or typography. With CSS, you can use clipping and add animation to text to spice things up a little.
And to illustrate this, we have collected 15 stunning and cool text effects that are made possible with CSS (some with a little help from Javascript codes).
For more things you can do with CSS, check out:
- 18 cool things you won’t believe were built using CSS
- 30 jQuery text effect libraries you need to know
- How to create heart shape with CSS
- Animate.css – CSS3 library to create animation easily
Elastic stroke Animation
Yoksel animates the stroke of the text with a cool color scheme. This effect is made with CSS and SVG. The result is awesome!
SVG Glitch
Want to make effects that look like a broken analog TV? Dirk Weber made this stunning glitch effect using CSS and SVG filter.
Shop Talk logo
The Shop Talk logo is recreated by Hugo using only CSS. The logo looks similar to the original, complete with the right texture.
Slashed Effect
This idea by Robet Messerle gives the knife sliced effect, done with less than 70 lines of CSS.
Elegant Shadow Effect
Long Shadow effect comes to text, made using CSS. The creator, Juan Brujo made 4 other effects but this is easily the most impressive one.
Foggy text effect
Andreas creates an awesome cinematic foggy effect. Applicable on Webkit browsers only.
SVG text mask
A design by Marco Barria shows an elegant text masking effect on a large background image.
Text Animation
Yoann created an awesome ticker effect with this text animation. Watch how the second word alternates between three words.
Hit The Floor
This 3D effect by ThatGuySam is a simple play on text-shadows, but with an awesome result.
Background Clip Text
Jintos was playing around with a Webkit background clip to add a background image inside text. He made 16 cool creations using this method.
CSS Text-FX
Moklik added dimmed light effect to the text, giving you intermittent flashes that warn of danger from afar.
Animated signing of signature
Gary Hepting created a real-time signing animation. This works by applying Javascript to the SVG path to animate the signing.
Colorful Glitchy 404
Can you hear the sound of this glitch and feel the vibration, inside your head? That’s how good this glitch effect is. mistic100 made with CSS plus a bit of Javascript.
Cosmos
Now this is an elegant and inspiring logo. It is also suitable for use for "Cosmos", because orbits, get it?
Loading
A cool loading effect that is simply the hiding and displaying of letters.
15 Beautiful Text Effects Generated with CSS
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.