WordPress: 8 text effects for individual posts

Text: Solveig Hansen, 2016

There’s only so much formatting you can do in the WordPress.com Visual editor. However, with a little knowledge of CSS and HTML, you can do a lot in the HTML editor. Here are eight ways to format the text + the code that shows you how:

Semi-transparent gray background with 20% opacity

Background color

Black text with gray shadow

Increase font size: 35px

Font size 200% (twice the standard size)

25px padding from line above, 50px from left margin
50px from left margin here, too

3 lines
with
line height 90%

3 lines
with
line height 150%

 
And here’s the code (there’s a scroll bar at the bottom):

<p style="padding:12px;background:rgba(195,195,195,0.2);"><span style="color:#000000;">Semi-transparent gray background with 20% opacity</span></p>

<p><span style="background-color:aqua;">Background color</span></p>

<p style="text-shadow:1px 1px 1px gray;">Black text with gray shadow</p>

<p><strong style="font-size:35px;">Increase font size: 35px</strong></p>

<p><span style="font-size:200%;">Font size 200% (twice the standard size)</span></p>

<p style="text-align:left;padding:25px 50px 0;"><strong style="font-size:15px;">25px padding from line above, 50px from left margin
50px from left margin here, too
</strong></p>

<p style="line-height:90%;">3 lines
with
line height 90%
</p>

<p style="line-height:150%;">3 lines
with
line height 150%
</p>

 
See wordpress tips for more tips and advice on WordPress.com blogs.

Share your thoughts:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s