Thread Rating:
- 0 Vote(s) - 0 Average
- 1
- 2
- 3
- 4
- 5
css text effect
|
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
This tutorial will teach you how to manipulate text using CSS properties. You can set following text properties of an element:
The color property is used to set the color of a text.
The direction property is used to set the text direction.
The letter-spacing property is used to add or subtract space between the letters that make up a word.
The word-spacing property is used to add or subtract space between the words of a sentence.
The text-indent property is used to indent the text of a paragraph.
The text-align property is used to align the text of a document.
The text-decoration property is used to underline, overline, and strikethrough text.
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
Set the text color:
Following is the example which demonstrates how to set the text color. Possible value could be any color name in any valid format.
<p style="color:red;">
This text will be written in red.
</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Set the text direction :
Following is the example which demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<p style="direction:rtl;">
This text will be renedered from right to left
</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Set the space between characters:
Following is the example which demonstrates how to set the space between characters. Possible values are normal or a number specifying space..
<p style="letter-spacing:5px;">
This text is having space between letters.
</p>
This will produce following result:
This text is having space between letters.
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Set the space between words:
Following is the example which demonstrates how to set the space between words. Possible values are normal or a number specifying space..
<p style="word-spacing:5px;">
This text is having space between words.
</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Set the text indent:
Following is the example which demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space..
<p style="text-indent:1cm;">
This text will have first line indented by 1cm
and this line will remain at its actual position
this is done by CSS text-indent property.
</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Set the text alignment:
Following is the example which demonstrates how to align a text. Possible values are left, right, center, justify..
<p style="text-align:right;">
This will be right aligned.
</p>
<p style="text-align:center;">
This will be center aligned.
</p>
<p style="text-align:left;">
This will be left aligned.
</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Decorating the text:
Following is the example which demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink..
<p style="text-decoration:underline;">
This will be underlined
</p>
<p style="text-decoration:line-through;">
This will be striked through.
</p>
<p style="text-decoration:overline;">
This will have a over line.
</p>
<p style="text-decoration:blink;">
This text will have blinking effect
</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Set the text cases:
Following is the example which demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase..
<p style="text-transform:capitalize;">
This will be capitalized
</p>
<p style="text-transform:uppercase;">
This will be in uppercase
</p>
<p style="text-transform:lowercase;">
This will be in lowercase
</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Set the white space between text:
Following is the example which demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.
<p style="white-space:pre;">This text has a line break
and the white-space pre setting tells the browser to honor it
just like the HTML pre tag.</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
Posts: 5,382
Threads: 2,057
Joined: Dec 2016
Reputation:
1
Set the text shadow:
Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers.
<p style="text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.</p>
Hello World!:
- tes
- Hello Friends . Welcome Back
Hasan
|
Possibly Related Threads… |
Thread |
Author |
Replies |
Views |
Last Post |
|
CSS white-space Property |
Hasan |
0 |
1,265 |
07-04-2018, 03:29 AM
Last Post: Hasan
|
|
CSS - Tables |
Hasan |
2 |
1,498 |
06-28-2018, 09:55 AM
Last Post: Hasan
|
|
CSS - Links |
Hasan |
1 |
1,924 |
06-28-2018, 09:47 AM
Last Post: Hasan
|
|
CSS - Images |
Hasan |
3 |
1,891 |
06-28-2018, 09:37 AM
Last Post: Hasan
|
|
Setting Fonts using CSS |
Hasan |
7 |
1,528 |
06-28-2018, 09:30 AM
Last Post: Hasan
|
|
Setting Backgrounds using CSS |
Hasan |
1 |
1,192 |
06-28-2018, 03:31 AM
Last Post: Hasan
|
|
CSS - Colors |
Hasan |
0 |
1,418 |
06-28-2018, 03:23 AM
Last Post: Hasan
|
|
CSS Syntax - Selectors |
Hasan |
0 |
1,198 |
06-28-2018, 03:20 AM
Last Post: Hasan
|
|
CSS Introduction |
Hasan |
0 |
1,194 |
06-28-2018, 03:19 AM
Last Post: Hasan
|
Users browsing this thread: 1 Guest(s)