W3.CSS Wide Text

  • The w3-wide classes are used for wider text.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container">
<h2> Use of w3.css Wider Text</h2>

<p class="w3-wide"> This is a text which is w3-wide class specifies a wider text.</p>
</div>

</body>
</html>
Output
W3.CSS

Use of w3.css Wider Text

This is a text which is w3-wide class specifies a wider text.

W3.CSS Text Opacity

  • The w3-opacity class is used for the visibility of elements.
  • By Using the CSS3 text-shadow property add shadow or blur effects to text.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container">
<h2>This is a w3.css Text Opacity</h2>

<div class="w3-panel w3-pink">
<h2 class="w3-opacity">This is a w3.css Text Opacity</h2>
</div>

<div class="w3-panel w3-red">
<h2 class="w3-opacity">This is a w3.css Text Opacity</h2>
</div>

<div class="w3-panel w3-orange">
<h2 class="w3-opacity">This is a w3.css Text Opacity</h2>
</div>

<div class="w3-panel w3-blue">
<h2 class="w3-opacity"> This is a w3.css Text Opacity</h2>
</div>
</div>

<div class="w3-container w3-light-grey">
<h2 style="text-shadow:1px 1px 0 #444">This is a Text Shadow</h2>
</div>

<div class="w3-container w3-blue">
<h2 style="text-shadow:1px 1px 0 #444">This is a Text Shadow</h2>
</div>

<div class="w3-container w3-red">
<h2 style="text-shadow:2px 2px 0 #444">This is a Text Shadow</h2>
</div>
<div class="w3-container">

<h2>W3.CSS Special Effects</h2>

<div class="w3-panel w3-green">
<h1 class="w3-opacity">
<b>This is a Text Opacity + Bold</b></h1>
</div>

<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow" style="text-shadow:2px 2px 0 #444">
<b>This is a Yellow Text + Shadow + Bold</b></h1>
</div>

<div class="w3-panel w3-green">
<h1 class="w3-text-white" style="text-shadow:1px 1px 0 #444">
<b>This is a white Text + Shadow + Bold</b></h1>
</div>
</div>

</body>
</html>
Output
W3.CSS

This is a w3.css Text Opacity

This is a w3.css Text Opacity

This is a w3.css Text Opacity

This is a w3.css Text Opacity

This is a w3.css Text Opacity

This is a Text Shadow

This is a Text Shadow

This is a Text Shadow

W3.CSS Special Effects

This is a Text Opacity + Bold

This is a Yellow Text + Shadow + Bold

This is a white Text + Shadow + Bold

CSS Framework Website development using W3.CSS Framework. W3.CSS is a Framework W3.CSS is a modern CSS framework with built-in responsiveness ...
Read More
W3.Css Containers W3. CSS Containers is predefine class use just like a external CSS. The W3-Container class adds a 16px left ...
Read More
W3.CSS Background colors The w3-color classes set the background color for any HTML element. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link ...
Read More
W3.CSS Text colors The W3-text-color classes set the background color for any HTML element. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link ...
Read More
W3.CSS Hover Colors The W3-hover-color classes define the background hover color for any HTML element. The W3-hover-text-color classes define the text hover ...
Read More
W3.CSS Panels Panels are the same as containers but extra feature is to added top and bottom margin. The w3-panel ...
Read More
W3.CSS Borders w3-border : Using this class to add borders (top, right, bottom, left) to an element.w3-border-top : Using this ...
Read More
W3.CSS Bar Note : w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used to add thick borders to an element. w3-bottombar ...
Read More
W3.CSS Text Alignment The w3-left-align classes are used for left alignment elements. The w3-right-align classes are used for right alignment ...
Read More
W3.CSS Wide Text The w3-wide classes are used for wider text. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link rel="stylesheet" href="w3.css"> <body> ...
Read More
English Hindi