w3docs logo
  1. Snippets
    2. ›
  2. text

How-to articles, tricks, and solutions about TEXT

How to Add a Fade out Text Effect with CSS

If you want to use beautiful effects for texts and make your Website more eye-catching, read our snippet, try examples and learn to create fade out text effect.

html css color style text font

How to Add a Glass Background Effect to the Text

If you want to make your website eye-catching and creative read this snippet and learn to create a glass background effect for your text step by step.

html css color style text background font

How to Add a Mouseover Text with HTML

In this tutorial, find out how to create a mouseover text description without Javascript. Use the HTML <div> or <span> element with the “title” attribute.

html text hover attribute

How to Add a Text on the HTML5 <canvas> Element

In this tutorial, you’ll find out how to add text on the HTML5 <canvas> element. For that, you need Javascript. Use the fillText() and strokeText() methods.

html javascript text HTML5 canvas

How to Add a Vertical Text with CSS Cross-Browser

If you have faced the problem of drawing a vertical text, you can use the transform property. Find out how to use this property to create a vertical text with CSS Cross-Browser.

css text transform

How to Add an Animated Text Over an Image on Hover With CSS3

Know how to put an animated text over a faded image on hover using only CSS3. For that purpose, use the transition and the opacity properties. See examples!

css image text hover animation CSS3 transition

How to Add Lines Before and After the Heading Text

If you are tired of standard heading styles then read this snippet and learn to add lines before and after heading giving it an attractive and unique style.

html css style text pseudo-elements

How to Add the Marquee Effect without Using the Marquee Tag (with CSS, JavaScript and jQuery)

Learn the alternative ways of having continually scrolling text without using the obsolete <marquee> tag. See examples with CSS animations, JavaScript and jQuery.

css text hover effect animation scroll jQuery

How to Align the Placeholder Text of an Input Field in HTML

The ::placeholder pseudo-element allows styling the placeholder text of a form element. Here you will find out how to align an input field’s placeholder text.

css text alignment placeholder input

How to Center the Text in the HTML Table Row

In this snippet, we’ll demonstrate and explain examples of centering a text in the table row. For that purpose, you can use the CSS text-align property.

html css text alignment table